1 JavaScript
1.1 特点
-
解释型
-
弱类型
-
基于对象
-
跨平台性
-
事件驱动
1.2 JavaScript版本
-
ECMAScript3.0
-
ECMAScript5.0
-
ECMAScript6.0 (ECMA2015、ECMAScript2016、ECMAScript2017)
1.3 应用领域
-
WEB前端 (网页)
-
后端 （node.js）
-
混合APP(IOS 安卓)
-
游戏
2 浏览器中JavaScript的基本语法
2.1 在HTML中使用JS
引入外部的 js 文件。类似于 CSS的link
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>
在htm中直接写，包裹在script标签中，类似css的style
<script>
code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在HTML中使用JS</title> 6 </head> 7 <body> 8 9 引入外部的js文件 里面不能再写代码 10 <script src="./script.js"></script> 11 12 直接在html中写js代码 13 <script> 14 console.log('HELLO,你爱我吗'); 15 alert('哈哈哈哈哈'); 16 </script> 17 </body> 18 </html>
2.2 指令结束符
#第一种 ;
#第二种 换行
2.3 注释
// 单行注释
/*
多行注释
*/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS基本语法</title> 6 </head> 7 <body> 8 <script> 9 //指令结束符 10 console.log("同志");console.log("小同志");console.log("老同志") 11 12 console.log(1) 13 console.log(2) 14 console.log(3) 15 16 //单行注释 17 /* 18 多行注释 19 多行注释 20 多行注释 21 多行注释 22 */ 23 24 //输出内容 25 console.log("啊，我被输出了"); //输出到控制台 26 document.write('啊，我也被输出了'); //输出到页面 不常用 27 //alert('啊，我好疼'); //弹框输出 28 29 30 //javascript 如何定义变量 31 // 必须由数字、字母、下划线、$ 组成，并且不能以数字开头 32 // 不能是关键字 33 // 严格区分大小写 user_name / userName(推荐) / UserName / UserNameAge 34 var username = '小丽丽'; 35 var userName = '大丽丽'; 36 var userAge; 37 38 console.log(username) 39 console.log(userName) 40 41 console.log(userAge) 42 43 44 45 46 47 48 49 50 </script> 51 </body> 52 </html>
2.4 变量
var 变量名 = 值;
* var 关键字
* 变量名 由数字、字母、下划线、$ 组成 不能数字开头。 变量名不能使关键字
* 变量名严格区分大小写
* 变量声明 没给值，默认值是undefined
2.5 输出内容
console.log() 输出到控制台
document.write() 输出到页面
alert() 弹出
3 JS程序用到的知识点
弹框
alert() 警告框 没有返回值
confirm() 确认框 返回布尔值
prompt() 输入框 返回用户输入的内容，点确定。 点取消，null
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹框</title> 6 </head> 7 <body> 8 <script> 9 //警告框 没有返回值 10 //alert('不许动!'); 11 12 //确认框 返回 布尔值 true/false 13 if (confirm('你喜欢我吗?')) { 14 alert('不准你喜欢我'); 15 } else { 16 res = prompt('快点喜欢我？'); 17 alert(res); 18 } 19 20 //输入框 21 </script> 22 </body> 23 </html>
获取页面中的元素 作为js对象
document.getElementById() #返回对象，通常会称作元素对象
元素对象与 HTML元素 存在映射关系
元素对象用来描述某个HTML元素
HTML元素的属性，会映射成 元素对象的 属性
双标签元素里面的内容
eleObj.innerHTML 获取/设置
3 JavaScript 数据类型
3.1 数据类型
-
原始类型 Number(数字)、 String(字符串)、Boolean(布尔值)、Null(空)、Undefined(未定义）
-
对象类型 Object、Array、Date、Math、Error Set(ES6).....
3.2 Number
-
js不区分 整型和 浮点型
-
定义方式
//十进制
var num = 100
//十六进制
var num = 0x10f
//科学计数法
var num = 123e100 -
特殊值 NaN
NaN跟任何值进行任何运算，结果仍然NaN
跟谁都不相等，包括自己
一般NaN被动产生（数据类型转为Number，不能转为正常的数字，就是NaN）
函数 isNaN() 判断是不是NaN或者能不能转换为NaN
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据类型</title> 6 </head> 7 <body> 8 <h1>数据类型</h1> 9 <hr> 10 11 <script> 12 //数字 13 14 var n1 = 10234; 15 var n2 = 0x12; //十六进制 16 var n3 = 2e2; //科学计数法（小学知识） 17 18 console.log(n1,n2,n3) 19 20 //浮点精度问题 21 console.log(.1 + .2); 22 23 //NaN 表示Not a number 24 25 console.log(NaN) 26 console.log(typeof(NaN)) 27 28 //NaN 跟 任何值 进行任何运算 结果依然是NaN 29 console.log(NaN * 0); 30 31 //NaN跟谁都不相等 32 console.log(NaN == NaN) 33 34 35 var num = 2344e1000; 36 37 console.log(typeof(num)) 38 console.log(num) 39 40 41 console.log(isNaN(NaN)) 42 console.log(isNaN('hello')) 43 console.log(isNaN('123')) //字符串'123' 转为number 的时候 是 123 不是NaN 44 45 </script> 46 </body> 47 </html>
3.3 String 字符串
# 单引号
# 双引号
# 反引号 模板字符串 ` `
单引号 双引号 没有区别
反引号：
多行
可以支持${变量} 添加变量
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>字符串</title> 6 </head> 7 <body> 8 <script> 9 var username = '大丽丽'; 10 11 12 //单引号 13 //var msg01 = '我和你去钓鱼'; 14 var msg01 = '我和' + username + '去钓鱼'; 15 16 //双引号 17 var msg02 = "我和" + username + "去公园"; 18 19 20 // 反引号 （ES6） 21 /*var msg03 = ` 22 我和你去动物园 23 遇到了老虎 24 我打了它 25 被抓了 26 判了15年 27 `;*/ 28 var msg03 = ` 29 我和${username}去动物园 30 遇到了老虎 31 我打了它 32 被抓了 33 判了15年 34 `; 35 36 37 console.log(msg01) 38 console.log(msg02) 39 console.log(msg03) 40 41 42 43 </script> 44 </body> 45 </html>
3.4 布尔值
true
false
3.5 Null和undefined
被动产生
3.6 数据类型转换
强制转换
Number()
字符串：纯数字转为正常的数字，其他NaN
布尔值： true->1 false->0
String()
Boolean()
字符串->布尔： 只有空字符串转为false，其他true
数字->布尔： 0和NaN是false，其他true
null和undefined都会转为false
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据类型转换</title> 6 </head> 7 <body> 8 <script> 9 //自动类型转换 10 console.log(100 + '20'); //10020 数字100自动转为字符串 11 console.log(10 * '3'); //30 字符串转为了数字 12 console.log('2' / '4a'); // NaN 字符串自动转为数字， 13 14 //100会转为布尔值 true 15 if (100) { 16 17 } 18 19 //强制类型转换 20 21 console.log(Boolean('false')) //true 22 console.log(Boolean('')); //false 23 24 console.log(Boolean(NaN)) //false 25 console.log(Boolean(null)) //false 26 console.log(Boolean(undefined)) //false 27 28 console.log('') 29 30 31 console.log(String(null)) 32 console.log(Number(true)) 33 console.log(Number(false)) 34 console.log(Number(null)) 35 console.log(Number(undefined)) 36 </script> 37 </body> 38 </html>
自动转换
根据运算符 做出适当的类型转换
4 运算符
4.1 算术运算符
+ 加号 正号
- 减法 负号
*
/
%
++ 累加
-- 累减
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>运算符</title> 6 </head> 7 <body> 8 9 <h1>运算符</h1> 10 <hr> 11 12 <script> 13 /* 14 1 * 1 二元运算 15 +100 正号 16 -100 一元运算符 17 a += 10 18 a ++ 19 20 ?: 21 */ 22 23 //算数运算符 24 /* 25 + - * / % ++递增 --递减 26 */ 27 28 var num = 10; 29 30 num ++; //每次递增1 31 num ++; // 等同于 num += 1 32 ++ num; //也可以递增 33 34 console.log(num) 35 36 num --; //每次递减1 num -= 1 37 -- num; 38 console.log(num) 39 40 console.log(''); 41 42 43 // 表达式 表达式通常由运算符和操作数组成。 简单表达式也有复杂表达式 44 // 表达式的特点 表达式有计算结果 45 // 有些表达式 还会产生额外的作用（对操作产生影响） 46 47 48 var a = 10; 49 50 var r = (a += 10); //表达式 51 console.log(r); //r是表达式的计算结果 52 53 console.log(a); //a+10表示，除了表达式有结果，操作数也被影响了 54 55 56 57 console.log(''); 58 59 60 61 var b = 10; 62 63 //r = b ++; //表达式 64 r = ++b; 65 console.log(r); //10 b++表达式的结果是 10 | ++b 结果11 66 console.log(b); // b++ 还是 ++b 对b的影响是一样的 67 68 69 var c = 34; 70 71 console.log(c --); //表达式的结果是34，c的值变为了33 72 console.log(-- c); //32 73 console.log(c); 74 75 76 var d = 1; 77 78 // 1 - 2 + 2 - 2 79 var r = (d++) - (d--) + (++d) - (d--) 80 /* 81 1 d=2 82 2 d=1 83 2 d=2 84 2 d=1 85 */ 86 87 console.log(r); //-1 88 console.log(d); //1 89 90 </script> 91 </body> 92 </html>
4.2 比较运算符
>
>=
<
<=
== 相等 两个操作数 只要值相等(类型不同会自动转换) 就相等
=== 全等 类型和值都要相同才全等
!= 不等
!== 不全等
in 判断 数组的索引 和 对象的属性 是否存在 数组的索引用in判断的是数组的索引。
instanceof 一个对象是否属于某个构造函数(类)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>运算符</title> 6 </head> 7 <body> 8 <script> 9 //比较运算符 10 11 console.log(100 == '100') 12 console.log(1 == true) 13 console.log(100 == 100) 14 15 console.log(100 === '100') 16 console.log(1 === true) 17 console.log(1 === 1) 18 19 console.log('') 20 21 22 console.log(100 != '100'); //false 23 console.log(100 !== '100'); //true 24 25 console.log('') 26 27 28 //了解 29 //in 用于数组和对象 30 var list = [10,20,30,40,50]; 31 32 console.log(0 in list) 33 console.log(6 in list) 34 35 36 //用于对象 object 37 var obj = {'name':'lili', 'age':19} 38 console.log('age' in obj); 39 40 41 42 </script> 43 </body> 44 </html>
4.3 逻辑运算符
&& 逻辑与and
|| 逻辑或or
！ 逻辑非not
4.4 位运算符
&
|
~
^
<<
>>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按位</title> </head> <body> <script> var a = 11; var b = 8; console.log(a & b) /* 1011 1000 --------------- 1000 */ </script> </body> </html>
4.5 赋值运算符
=
+=
-=
*=
/=
%=
4.6 其他运算符
+ 字符串连接符
?: 比较运算符 表达式？值1:值2 问号前面判断条件成立就返回值1 不成立就返回值2
typeof 判断类型 typeof(100)
delete 删除对象的属性和数组的成员
void 空运算符 <a = href("javascript:void(0)")> 点击链接不跳转，不刷新
, 逗号运算符 分隔开定义的变量，比如 var a = 10,b = 12
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>其他运算符</title> 6 </head> 7 <body> 8 9 <!--没有任何作用的超链接 --> 10 <a href="javascript:void(0)">按钮</a> 11 <script> 12 13 //比较运算符 14 //判断条件?结果1：结果2 15 16 var score = 20; 17 18 var res = score > 60 ? '及格' : '不及格'; 19 20 console.log(res); 21 22 23 //有个函数叫 typeof 有个运算符也叫typeof 24 console.log(typeof(100)); 25 // console.log(typeof 'hello'); string 26 27 28 //同时声明多个变量 29 var a=600,b=200,c=300; 30 console.log(a,b,c) 31 32 33 34 35 36 37 </script> 38 </body> 39 </html>
总结
-
ECMAScript和JavaScript ES6(ES2015)
-
在HTML中使用 js。
<script></script> -
js的基本语法： 注释，指令结束符(；换行) 变量、 输出内容
-
js程序： 获取页面的元素，元素对的属性。 事件 函数
-
数据类型： 原始类型 (Number string boolean null undefined) 对象类型（array、object）
-
运算符： 算术运算符(++ 、--) 比较运算符(== 、===、!=、!==) 、 位运算符、逻辑运算符、赋值运算符、其他(字符串连接符、比较运算符、typeof )
作业
-
整理笔记
-
完善简易计算器， 加减乘除、归0
Math.pow()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简易计算器</title> 6 <style> 7 input { 8 width: 300px; 9 font-size: 16px; 10 line-height: 18px; 11 padding:10px; 12 border: 1px solid #ccc; 13 } 14 15 button { 16 padding: 10px 20px; 17 border: 1px solid #ccc; 18 background: #f5f5f5; 19 } 20 .res { 21 width: 300px; 22 height: 100px; 23 padding: 10px; 24 border: 1px solid #ccc; 25 } 26 .item { 27 display: inline-block; 28 /*border:1px solid #ff6700;*/ 29 width:50px; 30 padding:0 5px; 31 margin:0 5px; 32 } 33 .clearfix { 34 clear:both; 35 } 36 .item1 { 37 width:665px; 38 height:330px; 39 border:1px solid black; 40 background:url("meinv02.jpg") no-repeat; 41 } 42 43 </style> 44 </head> 45 <body> 46 <h1>计算器</h1> 47 <hr> 48 49 <table class = "item1"> 50 <tr > 51 <td></td> 52 <td> 53 <input type="text" id="num1"> 54 </td> 55 </tr> 56 <tr class = "clearfix"></tr> 57 58 <tr > 59 <td></td> 60 <td> 61 <input type="text" id="num2"> 62 </td> 63 </tr> 64 65 <tr > 66 <td></td> 67 <td class = "item"> 68 <button onclick="add()">+</button> 69 </td> 70 <td class = "item"> 71 <button onclick ="min()">-</button> 72 </td> 73 <td class = "item"> 74 <button onclick = "mul()">*</button> 75 </td> 76 <td class = "item"> 77 <button onclick = "div()"></button> 78 </td> 79 </tr> 80 81 <tr> 82 <td></td> 83 <td> 84 <div class="res" id="box"></div> 85 </td> 86 </tr> 87 </table> 88 89 <script> 90 91 //定义函数 92 function add() { 93 // 获取 用户在 input 中输入的内容 94 // 获取元素对象 返回对象 对象描述 id是num1的元素 95 var inputEle1 = document.getElementById('num1'); 96 var inputEle2 = document.getElementById('num2'); 97 98 //获取用户在input中输入的值 99 var v1 = inputEle1.value; 100 var v2 = inputEle2.value; 101 102 //判断用户输入是否是纯数字 103 if (isNaN(v1)) { 104 alert('加数1必须是纯数字'); 105 return; 106 } 107 if (isNaN(v2)) { 108 alert('加数2必须是纯数字'); 109 return; 110 } 111 112 //把字符串转换为数字 113 v1 = Number(v1); 114 v2 = Number(v2); 115 116 //两个数相加 117 var sum = v1 + v2; 118 119 //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 120 var boxEle = document.getElementById('box'); 121 boxEle.innerHTML = sum; 122 123 } 124 function min() { 125 // 获取 用户在 input 中输入的内容 126 // 获取元素对象 返回对象 对象描述 id是num1的元素 127 var inputEle1 = document.getElementById('num1'); 128 var inputEle2 = document.getElementById('num2'); 129 130 //获取用户在input中输入的值 131 var v1 = inputEle1.value; 132 var v2 = inputEle2.value; 133 134 //判断用户输入是否是纯数字 135 if (isNaN(v1)) { 136 alert('加数1必须是纯数字'); 137 return; 138 } 139 if (isNaN(v2)) { 140 alert('加数2必须是纯数字'); 141 return; 142 } 143 144 //把字符串转换为数字 145 v1 = Number(v1); 146 v2 = Number(v2); 147 148 //两个数相加 149 var sum = v1-v2; 150 151 //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 152 var boxEle = document.getElementById('box'); 153 boxEle.innerHTML = sum; 154 155 } 156 function mul() { 157 // 获取 用户在 input 中输入的内容 158 // 获取元素对象 返回对象 对象描述 id是num1的元素 159 var inputEle1 = document.getElementById('num1'); 160 var inputEle2 = document.getElementById('num2'); 161 162 //获取用户在input中输入的值 163 var v1 = inputEle1.value; 164 var v2 = inputEle2.value; 165 166 //判断用户输入是否是纯数字 167 if (isNaN(v1)) { 168 alert('加数1必须是纯数字'); 169 return; 170 } 171 if (isNaN(v2)) { 172 alert('加数2必须是纯数字'); 173 return; 174 } 175 176 //把字符串转换为数字 177 v1 = Number(v1); 178 v2 = Number(v2); 179 180 //两个数相加 181 var sum = v1*v2; 182 183 //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 184 var boxEle = document.getElementById('box'); 185 boxEle.innerHTML = sum; 186 187 } 188 function div() { 189 // 获取 用户在 input 中输入的内容 190 // 获取元素对象 返回对象 对象描述 id是num1的元素 191 var inputEle1 = document.getElementById('num1'); 192 var inputEle2 = document.getElementById('num2'); 193 194 //获取用户在input中输入的值 195 var v1 = inputEle1.value; 196 var v2 = inputEle2.value; 197 198 //判断用户输入是否是纯数字 199 if (isNaN(v1)) { 200 alert('加数1必须是纯数字'); 201 return; 202 } 203 if (isNaN(v2)) { 204 alert('加数2必须是纯数字'); 205 return; 206 } 207 208 //把字符串转换为数字 209 v1 = Number(v1); 210 v2 = Number(v2); 211 212 //两个数相加 213 var sum = v1/v2; 214 215 //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 216 var boxEle = document.getElementById('box'); 217 boxEle.innerHTML = sum; 218 219 } 220 </script> 221 222 </body> 223 </html>