【029】Python全栈日记-JavaScript（一）

今天我们正式进入javascript的学习，JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JS其实和Python非常相似，而且也是由C编写而来，HTML和CSS实现网页布局，而JS来实现网页的逻辑和动态效果，所以JS是前端工程师真正的核心所在。

 

我们先来了解一下JavaScript的历史，JavaScript的历史可以说是浏览器的发展史。

 

　　JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。

　　JavaScript 1.0获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript（名称不同是为了避免侵权）的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本，IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧，JavaScript的规范化最终被提上日程。

1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化，TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成，经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）

（以上选自Javascript高级程序设计）

 

 

JavaScript最初的目的:简化表单验证

 

一、JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

 

1、网页特效

2、服务端开发(Node.js)

3、命令行工具(Node.js)

4、桌面程序(Electron)

5、App(Cordova)

6、控制硬件-物联网(Ruff)

7、游戏开发(cocos2d-js)

 

 

二、JavaScript和HTML、CSS的区别

1、HTML：提供网页的结构，提供网页中的内容

2、CSS: 用来美化网页（行内 》style <style></style> <link>）

3、JavaScript: 可以用来控制网页内容，给网页增加动态的效果(行内 <script> <script>)

 

三、JavaScript的组成

 

1、ECMAScript - JavaScript的核心

 

2、ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

 

3、BOM - 浏览器对象模型（2天）

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

 

4、DOM - 文档对象模型（1天）

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

 

四、JavaScript初体验

和css一模一样的规范：

CSS：行内样式、嵌入样式、外部样式

 

JavaScript的书写位置

 

1、写在行内

 

2、写在script标签中

Head和body都可以

 

3、写在外部js文件中，在页面引入

 

4、注意点

引用外部js文件的script标签中不可以写JavaScript代码

 

 

五、变量

 

1、什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

 

2、为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

 

3、如何使用变量

（1）var声明变量
var age;

 

（2）变量的赋值
var age;
age = 18;

 

（3）同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';

 

（4）同时声明多个变量并赋值
var age = 10, name = 'zs';

 

 

六、变量的命名规则和规范

1、规则 - 必须遵守的，不遵守会报错

由字母、数字、下划线、$符号组成，不能以数字开头

不能是关键字和保留字，例如：for、while。

区分大小写

 

2、规范-建议遵守的，不遵守不会报错

变量名必须有意义

遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

下面哪些变量名不合法
1MAx   _3Max  int  FitFIt

 

 

七、练习

1、交换两个变量的值

2、不使用临时变量，交换两个数值变量的值

 

八、数据类型

1、简单数据类型

Number、String、Boolean、Undefined、Null

 

2、Number类型

数值字面量：数值的固定值的表示法

110 1024 60.5

 

进制（不懂转换的可以参考：https://jingyan.baidu.com/article/495ba84109665338b30ede98.html）
（1）十进制
    var num = 9;
    进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
 

（2）十六进制
    var num = 0xA;
    数字序列范围：0~9以及A~F
 

（3）八进制
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8
数字序列范围：0~7
如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

 

3、浮点数

浮点数的精度问题

浮点数
不要判断两个浮点数是否相等，计算机语言缺陷。

 

4、数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

 

5、数值判断

NaN：not a number 'abcdf '

NaN 与任何值都不相等，包括他本身

isNaN: is not a number

 

6、String类型

（1）转义符

（2）字符串长度

length属性用来获取字符串的长度

 

（3）字符串拼接

字符串拼接使用 + 连接

两边只要有一个是字符串，那么+就是字符串拼接功能

两边如果都是数字，那么就是算术功能。

 

7、Boolean类型

Boolean字面量： true和false，区分大小写

计算机内部存储：true为1，false为0

 

8、Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined

null表示一个空，变量的值如果想为null，必须手动设置

 

 

九、获取变量的类型

typeof

 

 

十、字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：'黑马程序员', "大前端"

布尔字面量：true，false

 

 

十一、注释

1、单行注释

用来描述下面一个或多行代码的作用

 

2、多行注释

用来注释多条代码

 

 

十二、数据类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

 

1、转换成字符串类型

（1）toString()

（2）String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

 

（3）拼接字符串方式

num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

 

2、转换成数值类型

（1）Number()
Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

 

（2）parseInt()

 

（3）parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束

如果解析的内容里只有整数，解析成整数

 

（4）+，-0等运算

 

3、转换成布尔类型

Boolean()

0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

 

 

十三、操作符

运算符 operator

5 + 6

表达式 组成 操作数和操作符，会有一个结果

 

1、算术运算符
+ - * / %  

 

2、一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

-- 自身减1

 

（1）前置++

​

前置++：先加1，后参与运算：所以结果位13

 

（2）后置++

后置++：先参与运算，后加1：所以结果为12
 

猜猜看：

答案：5，4，3，4

 

（3）总结

前置++：先加1，后参与运算

后置++：先参与运算，后加1

上面两个理解后，下面两个自通

前置-- ：先减1，后参与运算

后置-- ：先参与运算，后减1​

 

 

3、逻辑运算符(布尔运算符)
&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

 

（1）关系运算符(比较运算符)
<  >  >=  <= == != === !==
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

 

（2）赋值运算符

= += -= *= /= %= i+=1 
例如：

 

（3）运算符的优先级

优先级从高到底

       1. ()  优先级最高

       2. 一元运算符  ++   --   !

       3. 算数运算符  先*  /  %   后 +   -

       4. 关系运算符  >   >=   <   <=

       5. 相等运算符   ==   !=    ===    !==

       6. 逻辑运算符 先&&   后||

       7. 赋值运算符  = 

答案：false false

 

十四、表达式和语句

（1）表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

（2）语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句 ；

 

十五、流程控制

1、程序的三种基本结构

 

（1）顺序结构:输入 输出 赋值语句

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

 

（2）分支结构

根据不同的情况，执行对应代码

 

（3）循环结构

循环结构：重复做一件事情

 

2、分支结构

if语句

语法结构

 

练习：

求两个数的最大数

判断一个数是偶数还是奇数

分数转换，把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A

 

作业：

 判断一个年份是闰年还是平年 闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份

 判断一个人的年龄是否满18岁(是否成年)

 

3、switch语句

语法格式:

break可以省略，如果省略，代码会继续执行下一个case

switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

 

练习： 成绩分类（把分数变成ABCDE）千万不要写100个case哟

 

 

4、布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true

非空字符串  非0数字  true 任何对象

转换成false 

空字符串、0 、false 、null 、undefined

结果：true

 

 

5、循环结构

在javascript中，循环语句有三种，while、do..while、for循环。

 

（1）while语句

基本语法：

代码示例：

 

（2）do...while语句

do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

基础语法：

代码示例：

 

练习：

求100以内所有3的倍数的和

使用do-while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为y则打印”我们形影不离“，若输入为n,则继续询问

 

（3）for语句

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

 

for循环语法：

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

初始化表达式

判断表达式

自增表达式

循环体

 

练习：

（1）、打印正方形

结果：

（2）打印直角三角形

结果：

（3）99乘法表

结果：

那如果我想在网页上用表格画出来99乘法表应该如何呢？

结果:

 

6、continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

 

 

练习

冒泡排序，从小到大

可是有个而问题如果我们的a=[1,2,3,4,5,6,7,8,10,9]

像这样已经排好序的，只有一两个乱序，一趟就能排好，可是用上面的方法我们需要拍9次，那如何优化呢？

 

 

作业、

1、三个数排大小

 

 

2、查找元素

法1：（更优）

法2：