JavaScript基础语法
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在HTML中使用JS</title> </head> <body> <!--引入外部的js文件 里面不能再写代码--> <script src="./script.js"></script> <!--直接在html中写js代码--> <script> console.log('HELLO,你爱我吗'); alert('哈哈哈哈哈'); </script> </body> </html>
2.2 指令结束符
#第一种 ;
#第二种 换行
2.3 注释
// 单行注释
/*
多行注释
*/
2.4 变量
var 变量名 = 值;
* var 关键字
* 变量名 由数字、字母、下划线、$ 组成 不能数字开头。 变量名不能使关键字
* 变量名严格区分大小写
* 变量声明 没给值，默认值是undefined
2.5 输出内容
console.log() 输出到控制台
document.write() 输出到页面
alert() 弹出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS基本语法</title> </head> <body> <script> //指令结束符 --------两种方式：使用分号，或者换行，如果在一行不加分号写多个console则会报语法错误 console.log("同志");console.log("小同志");console.log("老同志") console.log(1) console.log(2) console.log(3) //单行注释 /* 多行注释 多行注释 多行注释 多行注释 */ //输出内容 console.log("啊，我被输出了"); //输出到控制台 document.write('啊，我也被输出了'); //输出到页面 不常用 //alert('啊，我好疼'); //弹框输出 //javascript 如何定义变量 // 必须由数字、字母、下划线、$ 组成，并且不能以数字开头 // 不能是关键字 // 严格区分大小写 user_name / userName(推荐) / UserName / UserNameAge var username = '小丽丽'; var userName = '大丽丽'; var userAge; //输出的结果是undefined console.log(username) console.log(userName) console.log(userAge) </script> </body> </html>
3 JS程序用到的知识点
弹框
alert() 警告框 没有返回值
confirm() 确认框 返回布尔值
prompt() 输入框 返回用户输入的内容，点确定。 点取消，null
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹框</title> </head> <body> <script> //alert是警告框 没有返回值 //alert('不许动!'); //donfirm是确认框 返回 布尔值 true/false----------比alert多了一个取消按钮 //prompt是一个输入框，返回的是用户输入的内容，点取消按钮返回的是一个null if (confirm('你喜欢我吗?')) { alert('我也喜欢你'); } else { res = prompt('你凭什么不喜欢我？'); alert(res); } //输入框 </script> </body> </html>
获取页面中的元素 作为js对象
document.getElementById() #返回对象，通常会称作元素对象
元素对象与 HTML元素 存在映射关系
元素对象用来描述某个HTML元素
HTML元素的属性，会映射成 元素对象的 属性
双标签元素里面的内容
eleObj.innerHTML 获取/设置双标签的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> input { width: 300px; font-size: 16px; line-height: 18px; padding:10px; border: 1px solid #ccc; } button { padding: 10px 20px; border: 1px solid #ccc; background: #f5f5f5; } .res { width: 300px; height: 100px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <h1>计算器</h1> <hr> <table> <tr> <td>加数1：</td> <td> <input type="text" id="num1"> </td> </tr> <tr> <td>加数2：</td> <td> <input type="number" id="num2"> </td> </tr> <tr> <td></td> <td> <button onclick="add()">+</button> </td> </tr> <tr> <td></td> <td> <div class="res" id="box"></div> </td> </tr> </table> <script> //定义函数 function add() { // 获取 用户在 input 中输入的内容 // 获取元素对象 返回对象 对象描述 id是num1的元素 var inputEle1 = document.getElementById('num1'); var inputEle2 = document.getElementById('num2'); //获取用户在input中输入的值 var v1 = inputEle1.value; var v2 = inputEle2.value; //判断用户输入是否是纯数字 if (isNaN(v1)) { alert('加数1必须是纯数字'); return; } if (isNaN(v2)) { alert('加数2必须是纯数字'); return; } //把字符串转换为数字 v1 = Number(v1); v2 = Number(v2); //两个数相加 var sum = v1 + v2; //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容 var boxEle = document.getElementById('box'); boxEle.innerHTML = sum; } </script> </body> </html>
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型</title> </head> <body> <h1>数据类型</h1> <hr> <script> //数字 var n1 = 10234; var n2 = 0x12; //十六进制 var n3 = 2e2; //科学计数法（小学知识） console.log(n1,n2,n3) //浮点精度问题 console.log(.1 + .2); //NaN 表示Not a number console.log(NaN) console.log(typeof(NaN)) //NaN的数据类型依然是number //NaN 跟 任何值(包括0) 进行任何运算 结果依然是NaN console.log(NaN * 0); //结果是NaN //NaN跟谁都不相等 console.log(NaN == NaN) //结果是false var num = 2344e1000; console.log(typeof(num)) //结果是infinity即无穷大 console.log(num) //数据类型依然为number console.log(isNaN(NaN)) //true console.log(isNaN('hello')) //true console.log(isNaN('123')) // false 字符串'123' 转为number 的时候 是 123 不是NaN </script> </body> </html>
3.3 String 字符串
# 单引号
# 双引号
# 反引号 模板字符串 ` `
单引号 双引号 没有区别
反引号：
多行
可以支持中 ${变量} 添加变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串</title> </head> <body> <script> var username = '小丽丽'; //单引号 //var msg01 = '我和你去钓鱼'; var msg01 = '我和' + username + '去钓鱼'; //双引号 var msg02 = "我和" + username + "去公园"; // 反引号 （ES6） /*var msg03 = ` 我和你去动物园 遇到了老虎 我打了它 被抓了 判了15年 `;*/ // ${}可以向多行字符串中插入变量名 var msg03 = ` 我和${username}去动物园 遇到了老虎 我打了它 被抓了 判了15年 `; console.log(msg01) console.log(msg02) console.log(msg03) </script> </body> </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
自动转换
根据运算符 做出适当的类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型转换</title> </head> <body> <script> //自动类型转换 console.log(100 + '20'); //10020 数字100自动转为字符串,因为加号还可以连接字符串，当做连接字符串的优先级高一点 console.log(10 * '3'); //30 字符串转为了数字 console.log('2' / '4a'); // NaN 字符串自动转为数字， //100会转为布尔值 true if (100) { } //强制类型转换 console.log(Boolean('false')) //true console.log(Boolean('')); //false console.log(Boolean(NaN)) //false console.log(Boolean(null)) //false console.log(Boolean(undefined)) //false console.log('') //结果是空 console.log(String(null)) //结果是null console.log(Number(true)) //结果是1 console.log(Number(false)) //结果是0 console.log(Number(null)) //结果是0 console.log(Number(undefined)) //结果是NaN </script> </body> </html>
4 运算符
4.1 算术运算符
+ 加号 正号
- 减法 负号
*
/
%
++ 累加
-- 累减
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <h1>运算符</h1> <hr> <script> /* 1 * 1 二元运算 +100 正号 -100 一元运算符 a += 10 a ++ ?: */ //算数运算符 /* + - * / % ++递增 --递减 */ var num = 10; num ++; //每次递增1，结果是11 num ++; // 等同于 num += 1 ，结果基于上一次再加1是12 ++ num; //也可以递增，结果变为13 console.log(num) //运算结果13 num --; //每次递减1 num -= 1 -- num; console.log(num) //减两次结果是11 console.log(''); // 表达式 表达式通常由运算符和操作数组成。 简单表达式也有复杂表达式 // 表达式的特点 表达式有计算结果 // 有些表达式 还会产生额外的作用（对操作产生影响） // ++和--再应用 var a = 10; var r = (a += 10); //表达式 console.log(r); //r是表达式的计算结果10,a console.log(a); //a+10表示，除了表达式有结果，操作数也被影响了 console.log(''); var b = 10; //r = b ++; //表达式 r = ++b; console.log(r); //10 b++表达式的结果是 10 | ++b 表达式的结果是11,只有b++对表达式的结果是没有影响的 console.log(b); // b++ 还是 ++b 对b的影响是一样的，即两者都会是b进行加1操作 var c = 34; console.log(c --); //表达式的结果是34，c的值变为了33 console.log(-- c); //32 console.log(c); var d = 1; // 1 - 2 + 2 - 2 var r = (d++) - (d--) + (++d) - (d--) /* 1 d=2 2 d=1 2 d=2 2 d=1 */ console.log(r); //-1 console.log(d); //1 </script> </body> </html>
4.2 比较运算符
>
>=
<
<=
== 相等 两个操作数 只要值相等(类型不同会自动转换) 就相等
=== 全等 类型和值都要相同才全等
!= 不得
!== 不全等
in 判断 数组的索引 和 对象的属性 是否存在
instanceof 一个对象是否属于某个构造函数(类)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script> //比较运算符 console.log(100 == '100') //true console.log(1 == true) //true console.log(100 == 100) //true console.log(100 === '100') //false console.log(1 === true) //false console.log(1 === 1) //true console.log('') //输出为空我们在这里可以将其看做是换行 console.log(100 != '100'); //false console.log(100 !== '100'); //true console.log('') //换行 //了解 //in 用于数组和对象 var list = [10,20,30,40,50]; console.log(0 in list) //true 判断的是索引在不在数组中 console.log(6 in list) //false //用于对象 object var obj = {'name':'lili', 'age':19} //对象中的key可加可不加引号 console.log('age' in obj); //判断的是关键字是不是对象中的key，age要加引号 </script> </body> </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
typeof 判断类型
delete 删除对象的属性和数组的成员
void 空运算符
, 逗号运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他运算符</title> </head> <body> <!--没有任何作用的超链接 --> <a href="javascript:void(0)">按钮</a> <!--将一个可以跳转的超链接编程一个不可以跳转的超链接，没有什么意义--> <script> //比较运算符 //判断条件?结果1：结果2 var score = 20; var res = score > 60 ? '及格' : '不及格'; //?比较运算，分数大于60则返回及格，否则返回不及格 console.log(res); //有个函数叫 typeof 有个运算符也叫typeof console.log(typeof(100)); //number console.log(typeof 'hello'); //string //同时声明多个变量 var a=100,b=200,c=300; //逗号运算符可以在一行声明多个变量 console.log(a,b,c) </script> </body> </html>
总结
-
ECMAScript和JavaScript ES6(ES2015)
-
在HTML中使用 js。
<script></script> -
js的基本语法： 注释，指令结束符(；换行) 变量、 输出内容
-
js程序： 获取页面的元素，元素对的属性。 事件 函数
-
数据类型： 原始类型 (Number string boolean null undefined) 对象类型（array、object）
-
运算符： 算术运算符(++ 、--) 比较运算符(== 、===、!=、!==) 、 位运算符、逻辑运算符、赋值运算符、其他(字符串连接符、比较运算符、typeof )
python之基础知识大全
