JavaScript基础入门1.docx
《JavaScript基础入门1.docx》由会员分享,可在线阅读,更多相关《JavaScript基础入门1.docx(34页珍藏版)》请在冰豆网上搜索。
![JavaScript基础入门1.docx](https://file1.bdocx.com/fileroot1/2023-4/16/8073252f-6d4d-4da6-9127-7572556216a5/8073252f-6d4d-4da6-9127-7572556216a51.gif)
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;//赋