转载请标明出处!
JavaScript概述
一个页面分成三个部分,结构,样式,行为。
HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤),JavaScript代表了页面的行为(这种行为是被动的)。主动的行为需要一个大脑,后端作为我们的大脑替我们分析执行数据,执行行为,我们和大脑之间的联系AJAX(中枢神经)。这个就是我们这个阶段要学习的内容。
1.JavaScript是什么,它能做什么?
对页面进行渲染,让页面有行为。让页面动起来;
JavaScript简史
JavaScript在设计之初只是为了做表单验证的。但是现如今,JavaScript已经成为了一门功能全面的变成语言,已经是WEB中不可或缺的一部分,如今的JavaScript是一门既简单又复杂的语言,说它简单是因为学会它,几乎只要一个小时就可以了。但是如果你想要真正掌握它,需要几年的时间。
JavaScript发展:
NetScape公司在1995年着手开发一种名为liveScript的脚本语言, 为了营销目的搭上当时媒体热炒的Java顺风车,临时更名liveScript为JavaScript。其实JavaScript和Java没有一点关系。JavaScript1.0获得巨大成功。
NetScape公司趁热打铁继续发布JavaScript1.1版本,使得Web获得更高的关注,同时奠定了自己在浏览器界的霸主地位。
如果事情一直这样下去那么NetScape可能依旧使我们现代浏览器的霸主,可是在1996年互联网巨头微软公司进入浏览器领域,推出JScript,和NetScape公司开始争夺霸主地位。
最让人担心的问题也因此出现了,当时的JavaScript和JScript是完全不同的两个版本,这门语言没有一个标准存在,业内的担心(吐槽)日益加剧。终于,多方联合共同制定了一个标准,这个标准也就是ECMAScrip,ECMAScript作为各自JavaScript实现的基础。虽然制定标准只花费了几个月,但是这几个月却对未来20年的JavaScript发展起到了不可或缺的作用。
浏览器的发展经历了无数的坎坷,各个浏览器发现这块巨大的蛋糕后谁都不愿放弃,于是激烈的厮杀开始了。
第一次浏览器大战:
原始时期,微软发布了IE浏览器,和网景netSpace navigator大打出手,最后网景失败,将公司卖给AOL,核心团队全部离职,第一回合,微软获胜,netSpace昔日霸主陨落。
但是NetScape并没有放弃,在1998年公开源码并重新命名为 Mozilla,并重写全部程序,在2002年发布了第一个浏览器版本,firefox登场。在2004年已经开始叫板IE浏览器,iE推出IE7与之抗衡,拉开了第二次浏览器大战的序幕。
第二次浏览器大战:
第二次浏览器大战不再是IE和FF的两家之争,在现代浏览器群雄并起,同时挪威的 Opera ,几乎所有的智能手机配备的都是这个浏览器,拥有全世界最快V8引擎的Chrom,以及苹果公司的Safari,全部加入浏览器争夺。至今战争还在进行,但是对于浏览器大战我们看到的结果大多是推进了浏览器的发展,为更好的用户体验做出了非常积极的贡献。
JavaScript的组成
ECMAScript 、BOM 、DOM;
ECMAScript:这是一个标准,它规定了语法、类型、语句、关键字、保留字、操作符、对象。(相当于法律 )
BOM(浏览器对象模型):可以访问浏览器窗口的的浏览器对象模型,对浏览器窗口进行操作。
DOM(文档对象模型):DOM把整个页面映射为一个多层节点结构。HTML页面组成都是某种类型的节点,这些节点又包含着不同类型的数据。
如何写JavaScript程序?
script标签使用
<script></script>
src : 外联script 标签(立即调用,不能在该标签内写代码)
<script>
//在标签内书写内容
</script>
<script src='javascript.js'>// 这里面不能写任何内容</script>
一切准备就绪,让我们从Hello Word开始吧。
document.write的使用 >>>> HelloWord >>> 原样输出标签。
注释 (一份好的代码,要有三分之二的注释)
单行注释: // 要注释的内容。
多行注释:/* 注释的内容写在这里 */
原样输出标签内容
如果我想在页面中打印出:<strong>标签怎么办?
如果按照正常的打印方式进行打印,毫无疑问,标签会被浏览器解析。当我们要打印标签的时候要对对标签进行转义。
< 代表 <
> 代表 >
document.write('<strong>强大的</strong>');
变量(别称)
他叫翠花,他是一只熊。
熊的底层是什么那? 熊皮、熊掌、熊骨...., 那我们每次呼叫这只熊的时候都要叫她什么?有一张熊皮,500公斤熊肉,第三块小脚趾骨断过的,那个玩意?
不!我们叫她翠花!这就是这只熊的别称!放在计算机里,这就是把这只熊塞入了一个叫做翠花的变量里。
怎么声明一个变量那?
关键字 var 变量名 a = '<strong>强壮的</strong>'
var 声明变量的底层原理:我们所写的程序运行在内存中,当我们使用关键字var 声明一个变量的时候,计算机会从内存中留出一定储存空间,为我们存放不同类型的内容。
分清左右两侧的意义:
JavaScript中的 ‘’=‘’ 和我们数学中的 ‘’ = ‘’不一样,在JavaScript中‘’=‘’的作用是赋值(取别称)。
var a = '<strong></strong>'; 这句话分成两个部分。
左值:在等号左侧,是变量名(同时被赋值)
右值 :在等号右侧,是存放进变量中的东西(给变量赋值)
变量的类型(因为存放进变量中的数据是放在内存中的,计算机只识别0,1,所以需要对不同类型的数据进行转义,转义的结果会导致所需空间不同,所以JavaScript中分成很多种数据类型,以便计算机储存时使用)
数字类型(number):1234567890
字符类型(string):'123456','字符串类型',.....(有单引号或者双引号)
未定义类型(undefined):这是一种特殊类型,当变量被声明但是没有被赋值的时候,那么该变量的类型为undefined;
布尔值类型:true,false;
对象类型:object;
怎样直观地区分不同的数据类型那?
一个关键字 typeof
变量使用小技巧: 声明一串变量:var a=1,b=2,c=3;(不推荐初学者使用这样的变量声明方式,因为这样的变量声明方式会导致注释不明确。)
变量命名规范:(匈牙利命名法:驼峰命名法)
为什么要存在命名规范那?
你的代码并不是只有你一个人看,变量既然是别称,那么别称就要有特殊的含义:
举个栗子:翠花,我们能从这个名字中得到什么信息那?(这个名字的主人性别应该是女的,家中父母的一个美好愿景);
那么钢蛋那?
我们从这些名字中能够读出很多的含义,是因为我们的语言常识,同样,变量也有一套类似的标准,代表了各种各样的含义,这些含义如下:
第二个规则:
开头必须为字母或者$ 或 _
想要用break作为变量可不可以那?
关键字:
这些关键字用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。
break
|
do
|
instanceof
|
typeof
|
case
|
else
|
new
|
var
|
catch
|
finally
|
return
|
void
|
continue
|
for
|
switch
|
while
|
debugger*
|
function
|
this
|
with
|
default
|
if
|
throw
|
delete
|
in
|
try
|
|
|
保留字:未来可能作为,标识符存在。
abstract
|
enum
|
int
|
short
|
boolean
|
export
|
interface
|
static
|
byte
|
extends
|
long
|
super
|
char
|
final
|
native
|
synchronized
|
class
|
float
|
package
|
throws
|
const
|
goto
|
private
|
transient
|
debugger
|
implements
|
protected
|
volatile
|
double
|
import
|
public
|
|
alert()方法
alert()使用 。 停止浏览器加载代码。
浏览器解析代码顺序。(从上到下,从左到右);
逻辑运算符:
var a=1,b=2;
a+b=3
a - b=-1
a * b=2
a / b=0.5
a % b=1
var a='1', b='2';
a * b=2 ;
a / b=2;
a - b=-1;
a + b =???
不同:和我们概念里的逻辑运算符很多都是不一样的。
+ = == === 这些都不一样。
避免问题出现(一眼就看出来了):
让计算机告诉我:typeof 关键字;(数据类型的检测,意义在于确认是否能够被使用);
编程习惯:分号,虽然不加分号在JavaScript语法上没有问题,但是建议不要省略分号,加了分号之后可以用软件压缩。良好的变成习惯(JavaScript权威指南)上的理由。
浮点数:
你的电脑做着正确的二进制浮点运算,但问题是你输入的是十进制的数,电脑以二进制运算,这两者并不是总是转化那么好的,有时候会得到正确的结果,但有时候就不那么幸运了;
alert(0.7+0.1); //输出0.7999999999999999
alert(0.6+0.2); //输出0.8;
类型转换:
var a=3,b='10',c=true;
alert(a+b);
alert(b+c);
alert(a+c);
运算结果好像并不是我们想要的:应该怎么办那?当我们想做数学运算的时候,应该先对所有的数据类型进行统一(统一成数字格式),这时候我们就该用到数据类型的转换。
数据类型转换方法:
parseInt();
parseFloat();
我们尝试一下数据转换的结果:
认识NaN:他是一种特殊的Number类型结果,代表意外转换的数字,NaN和任何东西都是不等的。
关于浮点数:Math.round()四舍五入取整浮点数。
赋值操作:(JavaScript中存在非常多的简写)
var a=1;
a=a+1;
a+=1;
alert(a)
这些当然还包括 -= 、*=、/=、%=
这些赋值操作符的结果都是什么?
一个更简便的写法 a++ ; a - -;
++a 和 - -a 有什么不同;(思考)
var a = 5 + 4;
var b = a * 2;
var c = b / 4;
var d = b - c;
var e = -d;
var f = e % 4;
f的结果是什么?
var g = 18.4;
var h = g % 4;
h的结果是什么?
var i=3;
var j=i++;
j的结果是什么?
- javaScript系列 [06]-javaScript和this
在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...
- javaScript系列 [03]-javaScript原型对象
[03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
- javaScript系列 [05]-javaScript和JSON
本文输出和JSON有关的以下内容❐ JSON和javaScript❐ JSON的语法介绍❐ JSON的数据类型❐ JSON和XMLHTTPRequest❐ JSON的序列化和反序列化处理 1.1 JS ...
- (五)我的JavaScript系列:JavaScript的糟粕
泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...
- javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
- 深入理解JavaScript系列:JavaScript的构成
此篇文章不是干货类型,也算不上概念阐述,就是简单的进行一个思路上的整理. 要了解一样东西或者完成一件事情,首要的就是先要搞清楚他是什么.作为一个前端开发人员,JavaScript应该算作是最核心之一的 ...
- javaScript系列 [04]-javaScript的原型链
[04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...
- javaScript系列 [02]-javaScript对象探析
[02]-javaScript对象探析 题记:多年前,以非常偶然的方式关注了微信公众号“面向对象”,本以为这个公众号主要以分享面向对象编程的干货为主,不料其乃实实在在的猿圈相亲平台.通过查看公开资料, ...
随机推荐
- linux含有某字符串的文件
find .|xargs grep -ri "IBM" -l 只列出文件名:grep -rn "Item" * -l pattern files
- iOS实现抽屉效果
抽屉效果 在iOS中非常多应用都用到了抽屉效果,比如腾讯的QQ,百度贴吧- --- 1. 终于效果例如以下图所看到的 --- 2.实现步骤 1.開始启动的时候.新建3个不同颜色的View的 1.设置3 ...
- centos6配置固定ip地址(选择桥接模式)
1.配置ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 首先把BOOTPROTO="dhcp"改成BOOTPROT ...
- Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)
1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心 ...
- Tool-DB:Navicat
ylbtech-Tool-DB:Navicat Navicat是一套快速.可靠并价格相当便宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小企业的 ...
- 基础apache命令
在启动Apache服务之前,可以使用下面的命令来检查配置文件的正确性. C:\Apache2.2\bin> httpd -n Apache2.2 -t 还可以通过命令行控制Apache服务 ...
- linux安装lua
1,下载lua源码wget http://www.lua.org/ftp/lua-5.3.3.tar.gz或curl -R -O http://www.lua.org/ftp/lua-5.3.3.ta ...
- Chrome 开发工具系列
- Core Java(六)
面向对象语言特性 (一) (一) static 作用于 变量,方法,代码块 静态变量:被类的所有对象共享 在类加载时被加载 优先于对象 Student.country = "中国& ...
- localStorage、sessionStorage、cookie、session
localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...