JavaScript基础入门1.docx
《JavaScript基础入门1.docx》由会员分享，可在线阅读，更多相关《JavaScript基础入门1.docx（34页珍藏版）》请在冰豆网上搜索。
JavaScript基础入门1
JavaScript基础入门
目录
JavaScript基础入门1
目录2
一、JavaScript简介4
1.1JavaScript用途4
1.2JavaScript诞生4
1.3JavaScript从丑小鸭到金凤凰5
1.4JavaScript非常好学6
1.5学习方法6
二、HelloWorld！
7
2.1JavaScript书写的位置7
2.2alert（）语句7
2.3控制台8
2.4行文特性9
2.5注释9
三、字面量11
3.1数字的字面量11
3.2字符串14
四、变量15
4.1整体感知15
4.2变量必须先声明，才能使用16
4.3变量的赋值17
4.4变量声明的提升18
4.5不写var的情况18
4.6用逗号来隔开多个变量的定义18
4.7区分变量还是直接量19
五、变量的类型20
5.1概述20
5.2typeof关键字20
5.3number类型21
5.4string类型21
5.5undefined类型22
5.6加号22
六、变量类型的转换24
5.1string→number24
5.2number→string26
七、数学运算符27
一、JavaScript简介
1.1JavaScript用途
前端三层：
结构层HTML从语义的角度描述页面的结构
样式层CSS从审美的角度装饰页面
行为层JavaScript从交互的角度提升用户体验
JavaScript用来制作web页面交互效果，提升用户体验。
轮播图
选项卡TAB栏
Ajax表单验证
炫酷HTML5页面
JavaScript在今天，如果你要离开他，寸步难行，网页将无法正常使用。
1.2JavaScript诞生
在1995年Netscape（网景公司，我们要非常感谢网景公司，首先提出的交互的概念，首先提出的用户体验的概念，在老师的心中，BrendanEich能够和乔布斯平起平坐），一位名为BrendanEich的工程师创造了JavaScript，随后在1996年初，JavaScript首先被应用于Netscape2浏览器上。
最初的JavaScript名为LiveScript（活力脚本），后来因为SunMicrosystem的Java语言的兴起和广泛使用，Netscape出于宣传和推广的考虑，将它的名字从最初的LiveScript更改为JavaScript——尽管两者之间并没有什么共同点。
这便是之后混淆产生的根源。
（也就是说，JavaScript和Java没有任何关系，就是为了“榜大牌”的，和北大青鸟和北大的关系一样）。
几个月后，Microsoft随着IE3推出了一个与之基本兼容的语言JScript（注意微软的人生哲学，当它发现别人的东西很好的时候，就必须拧巴的推出自己的，然后自己的又被市场排斥，又开始兼容别人的）。
又几个月后，Netscape将JavaScript提交至EcmaInternational（一个欧洲标准化组织），ECMAScript标准第一版便在1997年诞生了，随后在1999年以ECMAScript第三版的形式进行了更新，从那之后这个标准没有发生过大的改动。
由于委员会在语言特性的讨论上发生分歧，ECMAScript第四版尚未推出便被废除，但随后于2009年12月发布的ECMAScript第五版引入了第四版草案加入的许多特性。
第六版标准已经于2015年六月发布。
ECMAScript是JavaScript的标准，现在我们学习的版本的ECMAScript4、5。
BrendanEich（JavaScript之父）
出任MozillaCTO
1.3JavaScript从丑小鸭到金凤凰
2003年：
牛皮鲜，页面上漂浮的广告、弹窗广告；所以当时的浏览器就推出一个功能，禁用广告，实际上本质就是禁用JavaScript。
页面上的特效，都特别俗，比如鼠标后面跟随的星星，然后工程师对JS的感觉就是不用学习，生搬硬套，大量的“效果宝盒”软件，一套就有各种特效了。
没有人琢磨语言特性。
2004年：
谷歌打开了Ajax这个潘多拉的盒子，从此JavaScript被人重视，很多人开始学习JS语言。
当时问世了两本JS巨作《犀牛书》、《高级程序设计》。
googlesuggest
2007年：
三层分离，iPhone发布，人们开始重视用户体验。
大家发现了，JavaScript是web页面中制作交互效果唯一的语言，所以把JS的重视程度，提到了相当高的一个地位。
招聘信息里面开始出现独立的“JS工程师”职位了，之前都是后台工程师捎带脚写写JS。
2008年：
Chrome浏览器发布，V8引擎加快了JS的解析，之前的浏览器解析JS的时候卡顿卡顿的，动画效果是蹦蹦的。
在Chrome里，它的引擎叫做V8，运行JS很流畅。
2009年：
jQuery变得流行，解决了浏览器兼容问题，制作页面效果变得简单，越来越多的初学者愿意学习JavaScript。
2010年：
Canvas画布技术得到众多浏览器支持，可以用Canvas替代Flash了，并且能制作小游戏，比如偷菜、停车小游戏。
我们有这个课程，做FlappyBird、俄罗斯方块、消消乐、接触物理抛物线引擎。
2011年：
Node.js得到广泛应用，实际上就是把JavaScript运行在了服务器上，单线程非阻塞，能够让企业用最小的成本实现后台网站，比如之前4万的服务器都卡，现在用了node之后，4000的机器都很流畅。
2012年：
HTML5+CSS3的流行，也带火了JavaScript。
2013年：
hybridapp模式开始流行。
就是做手机app的时候，老板们发现要雇佣三队人马，ios、安卓、windowsphone。
花三份工资，并且产品还不好迭代。
所以人们发明了用网页技术开发手机App的技术，叫做webapp。
hybridapp就是混合app，同时结合web技术和原生开发技术。
省钱，好迭代。
2015年：
ECMA6发布，叫做ECMA2015。
重量级的改变，把语言的特性颠覆性的一个增强。
1.4JavaScript非常好学
好学的点是什么：
JavaScript是有界面效果：
不像C语言，黑底白字，很枯燥的。
JavaScript的语法来源于C和Java：
有C和Java的经验同学好学很多。
JavaScript是弱变量类型的语言，动态数据类型语言。
JavaScript运行在宿主环境中，不关心内存，垃圾回收。
不好学的点是什么：
兼容性问题：
IE8是个怪胎，很多东西都不一样，所以就要写兼容写法，不怕造轮子，多写几遍
花式写法很多，抽象：
从简单入手，细细品味代码
太多细节：
为知笔记认真写自己的笔记，自己做实验;
老师的课程已经精挑细选了细节，并不盲目堆砌
1.5学习方法
●要多去“品”程序，多去思考内在逻辑，读懂每一行代码！
●JS机械重复性的劳动几乎为0，基本都是创造性的劳动。
HTML、CSS都是重复的劳动，margin、padding挤来挤去。
●永远不要背程序，每一个程序都必须自己会写，有一个每天的作业，重复老师的上课案例。
二、HelloWorld！
这事儿吧，挺有意思，就是学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。
输出什么大家随意，但是很多人都习惯输出“helloworld”，世界你好。
感觉自己很有情怀的样子。
2.1JavaScript书写的位置
1
2alert（"HelloWorld!
"）;
3
JavaSript程序，要写在HTML页面中，运行页面的时候，这个页面上的JS也就一起运行了。
也就是说，js的运行必须有宿主环境，最最常见的宿主环境，就是浏览器。
JS写在
等价于：
1
2alert（"你好"）;
3alert（"帅"）;
4alert（"哈哈哈哈"）;
5
语句后面的分号，不是必须写的，如果语句是一行一行写的，那么分号是没有必要的。
但是压缩页面的时候，语句结尾的分号，非常重要。
我们把页面做好之后，通常都会进行压缩，用软件把所有的空格、换行都去掉。
此时，语句末尾的分号显得非常重要，如果去掉分号，将不能执行。
不能执行：
1
2alert（"你好"）alert（"帅"）alert（"哈哈哈哈"）
3
正确写法：
4
5alert（"你好"）;alert（"帅"）;alert（"哈哈哈哈"）;
1
2.5注释
给人看的东西，对读程序是一个提示作用。
复习一下HTML的注释：
1
--我是注释-->
CSS注释：
1/*我是注释*/
JavaScript里面的注释：
单行注释：
1
2//我是一行注释
3//再来一行
4alert（"你好"）;
5
或者多行注释：
1/*
2我是一行注释
3再来一行
4哈哈，我又写了一行
5*/
注释的符号，不能嵌套，错误的示范：
1/*
2我是一行注释
3/*
4
5*/
6再来一行
7哈哈，我又写了一行
8*/
sublime中注释的快捷键，就是ctrl+/
三、字面量
字面量：
英语叫做literals，有些书上叫做直接量。
看见什么，它就是什么。
我们先来学习数字的字面量，和字符串的字面量。
剩余的字面量类型，我们日后遇见再介绍。
3.1数字的字面量
数字的字面量，就是这个数字自己，并不需要任何的符号来界定这个数字。
JavaScript中，数字的字面量可以有三种进制：
10进制：
普通的数字就是十进制
8进制：
如果以0开头、或者以0o开头、或者以0O开头的都是八进制，八进制只能用0~7来表示
16进制：
如果以0x开头的都是十六进制。
八进制举例：
1
2//以0开头，所以就是八进制；显示的时候会以十进制显示
3//3*8+6=30
4console.log（036）;//30
5console.log（044）;//36
6console.log（010）;//8
7console.log（0o36）;//30
8console.log（0O36）;//30
9
运行结果：
注意，八进制只能出现0~7这8中字符，如果表示不合法，那么JS将自动的认为你输入错了，从而用十进制进行显示：
1console.log（088）;//以0开头，按理说是八进制，但是后面的数字错了，所以以十进制显示
但是以0o开头、0O开头的数字，如果后面写错了，控制台报错！
1console.log（0o88）;
再看一下16进制：
1console.log（0xff）;
2console.log（0x2b）;
3console.log（0x11）;
运行结果：
如果后面有错误的写法，那么控制台报错：
1console.log（0x2m）;
总结一下，下面的输出结果都是15：
1console.log（15）;
2console.log（017）;
3console.log（0o17）;
4console.log（0O17）;
5console.log（0xf）;
下面的输出结果都是负15：
6console.log（-15）;
7console.log（-017）;
8console.log（-0o17）;
9console.log（-0O17）;
1console.log（-0xf）;
小数的字面量也很简单，就是数学上的点。
计算机世界中，小数称为“浮点数”。
允许使用e来表示乘以10的几次幂：
1console.log（-3.1415926）;//-3.1415926
2console.log（.315）;//.315如果整数位数是0，可以不写
3console.log（5e5）;//500000
4console.log（5.6e5）;//560000
5console.log（1e-4）;//0.0001
6console.log（.1e-3）;//0.0001
只有十进制有小数的字面量，八进制、十六进制没有小数的字面量。
最后学习两个特殊的字面量：
Infinity无穷大
试图输出一个非常大的数字：
1console.log（3e45645645645645）;
控制台显示
表示无穷大
至于多大的数字能生成无穷大，不同浏览器不一样，不要管。
可以是负的无穷大：
1console.log（-3e45645645645645）;
我们可以直接在控制台输出无穷大，注意大小写：
1console.log（Infinity）;
NaN英语全名叫做notanumber，不是一个数。
比较哲学的是，这个“不是一个数”是一个数字字面量。
1console.log（0/0）;
总结一下，数字字面量有整数字面量（十进制、16进制、八进制），浮点数字面量（要记住e），Infinity，NaN
3.2字符串
字符串是一个术语，就是人类说的语句、词。
字符串的字面量，必须用双引号、单引号包裹起来。
字符串被限定在同种引号之间；也即，必须是成对单引号或成对双引号。
1console.log（"今天天气很好"）;
1//必须是同种引号，这是错误的：
2console.log（'哈哈"）;
如果一个数字，用引号引起来，那么就是字符串了：
1console.log（“3”）;
转义字符，
\n回车换行
\ttab缩进
1alert（"你好\n啊\n我很爱你\n啊"）;
引号的转译：
正常情况下，引号内部可以有不同种的引号，比如双引号里面可以有单引号：
1console.log（"老师说你像'考拉'一样漂亮"）;
1console.log（'老师说你像"考拉"一样漂亮'）;
可以用\”来表达引号：
1console.log（"老师说你像\"考拉\"一样漂亮"）;
反斜杠自己也用反斜杠来转义：
1console.log（"c:
\\a\\b.jpg"）;
四、变量
变量（Variables），和高中代数学习的x、y、z很像，它们不是字母，而是蕴含值的符号。
它和直接量不同，直接量5，就是数字5；直接量”你好”就是字符串“你好”。
现在这个变量不一样了，你看见一个a，实际上它不是字母a，而是里面蕴含的不同的值。
4.1整体感知
1
2//定义一个变量
3vara;
4//赋值
5a=100;
6//输出变量a
7console.log（a）;
8
我们使用var关键字来定义变量，所谓的关键字就是一些有特殊功能的小词语，关键字后面要有空格。
var就是英语variables变量的缩写，表示定义一个变量。
一旦你
1vara;
你的电脑内存中，就会开辟一个空间，来存储这个变量a。
现在就可以给这个变量赋值，JS中给变量赋值用等号，等号右边的值赋给左边。
1a=100;
现在a变量的值就是100。
所以我们输出
1console.log（a）;
控制台就会输出a变量的值，就是
4.2变量必须先声明，才能使用
使用一个变量，必须先进行一个var，才能使用。
var这个过程可以叫做声明declaration，也可以叫做定义definition。
现在我们直接运行语句：
1console.log（b）;//这个b没有被var过，所以要报错
因为b没有被定义，所以b现在不是一个变量，系统不认识这个b的。
抛出引用错误。
变量的名称是标识符（identifiers），任何标识符的命名都需要遵守一定的规则：
在JavaScript语言中，一个标识符（identifier）可以由字母、下划线（_）、美元（$）符号、数字（0-9）组成，但不能以数字开头。
也就是说，一个标识符必须由字母、下划线、美元符号开头，后续可以有字母、下划线、美元符号、数字。
因为JavaScript语言是区分大小写的，所以A和a不是同一个变量。
并且不能是JavaScript保留字、关键字。
保留字，是系统里面的有用途的字，为了不造成误会，不能成为标识符的名字。
保留字，不用背：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float
goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
合法变量名的举例：
1//以下都是合法的变量名
2vara;
3varA;
4varb333;
5var_abc;
6var$;
7var$o0_0o$;
8var________;
9var_;
非法的：
1var123a;//不能数字开头
2var12_a;//不能数字开头
3varabc@163;//不能有特殊符号，符号只能有_和$
4varabc￥;//不能有特殊符号，符号只能有_和$
5varvar;//不能是关键字
6varclass;//不能是保留字
变量的名字的长度实际上每个浏览器的规范不同，不用在意。
4.3变量的赋值
变量的赋值用等号，等号就是赋值符号，在JS中等号没有其他的含义，等号就表示赋值。
1vara;//定义
2a=100;//赋初值
3console.log（a）;
运行结果：
可以定义和赋初值一起写：
1vara=100;
2console.log（a）;
运行结果：
等号右边的值给左边，等号右边的值不变。
1vara=100;
2varb=200;
3a=b;//在改变a变量的值，a的值变为200。
b的值不变。
4console.log（a）;
5console.log（b）;
运行结果：
你会发现，变量只需要var一次，后面改变变量的值的时候，就不需要var了，可以直接改变它的值。
1vara=100;
2a=50;//不需要写var
3console.log（a）;
如果一个变量，仅仅被var了，但是没有被赋初值呢，此时这个变量的值就是undefined;
1varm;
2console.log（m）;//输出undefined
运行结果：
实际上我们已经var了这个m，已经定义了这个m，只不过这就是浏览器的一个规矩，如果这个变量没有被赋初值，那么这个变量就视为没有“定义完成”。
值就是undefined。
4.4变量声明的提升
这是js特有的一个特点，其他语言都没有这个特点。
有些程序员挺反感这个特点的。
我们现在先去改变变量的值，然后定义变量，由于JS有一个机制，叫做变量声明的提升，所以现在程序在执行前会已经看见这个程序中有一行定义变量，所以就会提升到程序开头去运行。
1
2a=100;
3vara;//这行定义变量会自动提升到所有语句之前
4console.log（a）;
5
记住，js只能提升变量的声明，而不能提升变量的赋初值
1console.log（a）;
2vara=100;
等价于：
1vara;//自动升级
2console.log（a）;
3a=100;//赋
升级会员 