目录
Js第一天学习总结
一、浏览器说明
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。
可以显示页面的一个软件
国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari、Opera、Google Chrome、等，浏览器最经常使用的客户端程序。
常用的五大浏览器：chrome、Firefox、safari、ie、opera；
二、网页、网站和应用程序
网页：单独的一个页面
网站：一些列相关的页面组成到一起
应用程序：可以和用户产生交互，并实现某种功能。
三、演示JavaScript的强大
http://impress.github.io/impress.js/
http://naotu.baidu.com/
https://codecombat.com/
https://ide.codemao.cn/
需要翻墙
https://developers.google.com/blockly/
blockly迷宫
https://blockly-games.appspot.com
blockly迷宫不需要翻墙
JavaScript编程语言 流程控制
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript运行在客户端(浏览器)的编程语言
JavaScript是一种运行在客户端的脚本语言
是一门动态类型的语言
是一门基于对象的语言
JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
最初的目的是为了处理表单的验证操作。
JavaScript现在的意义(应用场景)
JavaScript发展到现在几乎无所不能。
1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Electron)
5. App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)
3. JavaScript和HTML、CSS的区别
1. HTML：提供网页的结构，提供网页中的内容
2. CSS:用来美化网页
3. JavaScript:可以用来控制网页内容，给网页增加动态的效果
4. JavaScript的组成
ECMAScript - JavaScript的核心
定义了JavaScript的语法规范 JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
BOM -浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM -文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
五、JavaScript的书写位置
写在行内
写在script标签中
<head>
<script>
alert('Hello World!');
</script>
</head>
写在外部js文件中，在页面引入
<script src="main.js"></script>
但是需要在html的页面中引入 script的标签中的src="js的路径"
注意点：引用外部js文件的script标签中不可以写JavaScript代码
注意问题
[if !supportLists]1. [endif]在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
[if !supportLists]2. [endif]如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
[if !supportLists]3. [endif]script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以
但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
[if !supportLists]4. [endif]有可能会出现这种情况:script标签中可能同时出现type和language的写法.
[if !supportLists]5. [endif]script标签在页面中可以出现多对
[if !supportLists]6. [endif]script标签一般是放在body的标签的最后的,有的时候会在head标签中,目前讲课的时候都在body标签的后面(body中的最后)
[if !supportLists]7. [endif]如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码
六、变量
1. 什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
使用变量可以方便的获取或者修改内存中的数据
2．如何使用变量
var声明变量
var age;
同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
var age;
同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
变量的赋值
var age;
age = 18;
同时声明多个变量并赋值
var age = 10, name = 'zs';
3. 变量在内存中的存储
变量---作用,存储数据的或者是操作数据
变量声明(有var 有变量名字,没有值)
变量初始化(有var 有变量名字,有值)
4. 变量的命名规则和规范
规则-必须遵守的，不遵守会报错
由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for、while。
区分大小写
变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword
不能使用关键字(系统自带的一些单词,不能使用)
变量的交换的
第一个思路:使用第三方的变量进行交换
第二种方式交换:一般适用于数字的交换
//扩展的变量的交换:只需要看代码,不需要理解---位运算
var num1 = 10;
var num2 = 20;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1, num2);
七、数据类型
1. 简单数据类型
Number、String、Boolean、Undefined、Null
2. Number类型
十进制
var num = 9;
进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
var num = 0xA;
数字序列范围：0~9以及A~F
var num2 = 0x1;
console.log(num2); //1
var num5 = 0x0A;
console.log(num5); //10
var num6 = 0x0F;
console.log(num6); //15
var num7 = 0x10;
console.log(num7); //16
var num7 = 0x1f;
console.log(num7); //31
var num3 = 0x13;
console.log(num3); //19
var num4 = 0x15;
console.log(num4); //21
八进制
var num1 = 07; //对应十进制的7
var num2 = 019; //对应十进制的19
var num3 = 08; //对应十进制的8
数字序列范围：0~7
如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
var num4 = 015;
console.log(num4); //13
var num5 = 016;
console.log(num5); //14
var num6 = 017;
console.log(num6); //15
var num7 = 020;
console.log(num7); //16
var num7 = 022;
console.log(num7); //18 */
想要表示十进制:就是正常的数字
想要表示八进制:以0开头
想要表示十六进制:0x开头
-浮点数
浮点数的精度问题
浮点数
var n = 5e-324; //科学计数法 5乘以10的-324次方
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; //结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
不要判断两个浮点数是否相等
不要用小数去验证小数.
不要用NaN验证是不是NaN
不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量)
数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
数值判断
NaN：not a number
NaN与任何值都不相等，包括他本身
isNaN: is not a number 不是数字的数
3. String类型
js中的字符串类型的值都用双引号或者单引号
字符串的长度
Length属性用来获取字符串的长度
var str = '黑马程序猿 Hello World';
console.log(str.length);
字符串拼接
字符串拼接使用+连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
1.两边只要有一个是字符串，那么+就是字符串拼接功能
2.两边如果都是数字，那么就是算术功能。
只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加
如果有一个是字符串,另一个不是字符串,使用- 号,此时会发生计算
浏览器帮助我们自动的把字符串类型转成了数字类型,这种方式叫:隐式转换
4. Boolean类型
布尔类型:的值有两个,一个是true(真),一个是false(假)
计算机内部存储：true为1，false为0
5. Undefined和Null
1. undefined表示一个声明了没有赋值的变量，
变量只声明的时候值默认是undefined
函数没有明确返回值,如果接收了,结果也是undefined
2. null表示一个空，变量的值如果想为null，必须手动设置
6. 复杂数据类型
Object
7. 获取变量的类型
Typeof
typeof变量名
typeof(变量名)
var age = 18;
console.log(typeof age); // 'number'
8. 字面量
在源代码中一个固定值的表示法。
数值字面量：8, 9, 10
字符串字面量：'黑马程序员', "大前端"
布尔字面量：true，false
八、注释
1. 单行注释
用两个反斜杠表示
// 这是一个变量
单行注释:一般用在一行代码的上面
2. 多行注释
用来注释多条代码
多行注释:一般是用在函数或者是一段代码的上面
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
九、数据类型转换
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
[if !supportLists]1. [endif]转换成字符串类型
.toString()
var num = 5;
console.log(num.toString());
String()
var num1 = 20;
console.log(String(num1));
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。
如果变量有意义调用.toString()使用转换
如果变量没有意义使用String()转换
var num2 = null;
console.log(num2.toString()); 这是没有意义的使用toString会报错
var num2 = null;
console.log(String(num2)); 而这种情况不会出现错误
比如：undefined和null
拼接字符串方式
num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串
[if !supportLists]2. [endif]转换成数值类型
Number()：将其他类型转换为Number类型
注意：
1.Script-----》Number
只能是纯数字的字符串得到具体的值，其他都是NaN。
2.Boolean----》Number
true：1，false：0
3.undefined：NaN null:0
parseInt() :将其他类型转换为Number类型--整数
注意：
1.Script-----》Number
字符串中的之首字符必须是数字，转换后才能得到具体值，否则NaN.
2.只转换从首字符开始的连续数字
3.除了字符串的其他类型转换后都得到NaN
var num1 = parseInt("12.3abc"); //返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
parseFloat()：将其他类型转换为Number类型--小数
注意：
1.Script-----》Number
字符串中的之首字符必须是数字，转换后才能得到具体值，否则NaN.
2.只转换从首字符开始的连续数字
3.除了字符串的其他类型转换后都得到NaN
4.如果小数后面的值是有效值，转换后就保留，否则删除。
var lx = parseFloat(1.51);
var lx2 = parseFloat(2);
var lx3 = parseFloat("1.51s");
var lx4 = parseFloat("sd1.51");
var lx5 = parseFloat("0.51");
- +，-0等运算
var str = '500';
console.log(+str); //取正
console.log(-str); //取负
console.log(str - 0);
总结:想要转整数用parseInt(),想要转小数用parseFloat()
想要转数字:Number();要比上面的两种方式严格
[if !supportLists]1. [endif]转换成布尔类型
Boolean()：将其他类型转换为Number类型
0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true
自动类型转换：
在运行过程中根据编程语言的运算的语意环境，JavaScript会自动进行类型转换。
console.log(Boolean("dff")); true
console.log(Boolean(34)); true
console.log(Boolean(-34)); true
console.log(Boolean(null)); false
console.log(Boolean(undefined)); false
console.log(Boolean("")); false
十、运算符
1. 算术运算符
++：
前置++： ++变量
++a==》 a = a+1
注意：前置++和其他数据参与运算时，先自增1后运算
后置++： ++变量
a++ ===> a = a + 1
注意：前置++和其他数据参与运算时，先运算后自增1
2. 比较运算符：
得到的结果要么为true，要么为false---都是Boolean值
== != > >= < <= ===(全等于) !==(不全等于)
==（等于）：比较值的大小（判断）不比较值的数据类型 不严格
===（全等于）：比较值的大小还比较值的数据类型 严格
！=（不等于）：结果和==是相反的 如果==判断出结果为true 那么!=的结果为false
！==（不全等于）：结果和===是相反的 如果===判断出结果为true 那么!==的结果为false
var lx = "12";
var lx2 = 12;
console.log(lx==lx2); true
var lx = "12";
var lx2 = 12;
console.log(lx!=lx2); false
3.逻辑运算符
&&：运算遇到false就返回
a && b，如果a 为true，直接返回b,而不管b为true或者false
如果a为false 那么直接返回。
||：运算遇到true就返回
a || b，如果a 为 false ，直接返回b ，而不管b为true或者 false
如果a为true ，直接返回，而不会继续往下执行。
null 0 ‘’ "" undefined NaN ====>false
!---逻辑非---取反--取非
!表达式1
表达式1的结果是true,整个结果为false
表达式1的结果是false,整个结果为true
[if !supportLists]1. [endif]赋值运算符
= += -= *= /= %=
var num = 0;
num += 5; //相当于 num = num + 5;
[if !supportLists]2. [endif]运算符的优先级
优先级从高到底
1. ()优先级最高
2.一元运算符 ++ -- !
3.算数运算符 先* / % 后 + -
4.关系运算符 > >= < <=
5.相等运算符 == != === !==
6.逻辑运算符 先&& 后||
7.赋值运算符
