JavaScript基础语法
关注公众号“轻松学编程”了解更多。
一、JavaScript的诞生
JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言
名字起源: Mocha->LiveScript->JavaScript
二、js用途
它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端app等
三、js语言的组成
javascript = ECMAScript + BOM + DOM
- 核心(ECMAScript)
- 浏览器对象模型(BOM)
- 文档对象模型(DOM)
1、关键字
break | do | instanceof | typeof |
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger | function | this | with |
default | if | throw | delete |
in | try |
2、保留字
class | enum | extends | super |
const | export | import |
3、术语
- 返回值：运算后得到的值
- 程序的三大流程控制
我们的计算机在执行一个程序的时候，最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决，总会有一些跳转。采用结构化的程序设计，可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率
- 顺序：从上朝下执行的代码就是顺序
- 分支(选择)：根据不同的情况，执行对应代码
- 循环：重复做一件事情
javascript = ECMAScript + BOM + DOM
- 核心(ECMAScript)
- 浏览器对象模型(BOM)
- 文档对象模型(DOM)
四、js代码的编写位置
html属性
<a href="javascript:alert(100)"></a>script标签
<script type="text/javascript">
alert('你好')
</script>js文件
独立的js文件需要引入页面才能执行<script type="text/javascript" src="js/common.js"><script>
script标签属性
- type:类型
- src :js文件路径
带src属性的script标签内不能写js代码
五、JS变量的定义
变量定义(使用var关键字)：变量是存储数据的容器
var age; //var 是关键字，age是变量名var obj = / /; 是JavaScript中正则对象的写法
赋值：
age = 20;定义的同时赋值：
var age=20;可以一次定义多个变量：
var name="zhangsan", age=18, weight=108;
1、数组Array
一系列数据的集合，每一项可以保存任何类型的数据，称为数组的元素，每个元素之间用逗号隔开
数组格式：[1,2,3]
2、数组创建方式
//1)字面量(推荐)
var arr = [1,2,3];
//2)使用构造函数创建
var arr = new Array();//创建一个空数组
var arr = new Array('王大锤',18 ,'普通青年','广州');
//创建数组并同时写入数据
3、数组访问与写入
索引（下标）：从0开始
var arr = ['html5','css3','javascript'];
//访问
arr[0]; //=> 'html5'
arr[2]; //=> 'javascript'
//写入
arr[3] = 'web前端';length：表示数组的长度
arr.length; //=> 3
4、数组遍历
- for循环
格式：for(变量初始化;判断条件;变量更新){执行语句}
var arr = ['html5','css3','javascript']; for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
5、数组方法
push： 往数组尾部添加一个或多个元素，返回数组新的长度
pop：删除数组最后一个元素，返回删除的元素
unshift：往数组开头添加一个或多个元素，返回数组新的长度
shift：删除数组第一个元素，返回删除的元素
splice(start,deleteNum,…items)：在数组中插入、删除、替换的通用方法
- start：起始索引位置
- deleteNum：要删除的数量
- items：插入的元素（可以是多个）
slice(start[,end])：返回数组的片段或子数组，从start开始到end(不包括end所对应的元素)
如果省略end参数，则截取到数组的最后一项
支持负数sort：将数组中的元素排序，并返回排序后的数组
默认以字符串的排列方式（转换成ASCII码进行对比）
reverse：将数组中的元素颠倒顺序，返回逆序后的数组
join(separator) 返回字符串值，其中包含了连接到一起的数组的所有元素
- separator为分隔符，默认为逗号
indexOf(keyword)
方法返回keyword所在数组中的索引值，如果数组不存在keyword，则返回-1
forEach(fn)
遍历方法，for循环没有太大差别，比for循环方便map(fn)
返回一个数量相等的数组，内容是什么取决于在fn中返回的值
以上方法都对数组中的每一项运行给定函数fn,，函数中有三个形参分别为
- item：数组中的每一项,
- index：遍历过程中对应的索引值,
- array：对数组的引用
6、对象Object
- 字面量（推荐）：
var obj = {name:'小明',age:18} - 构造函数：
var obj = new Object();
7、读取属性值
obj.name;//==>小明
如果读取一个不存在的属性，返回undefined
8、添加属性
obj.sex = '男';
obj.marry = false;
obj['weight'] = 60
9、删除属性
var obj = {name:'laoxie',age:18,gender:'man'}
//删除age属性
delete obj.age;10、遍历对象for…in
var obj = {
name:'laoxie',
age:18
gender:'男'
}
//遍历对象
for(var attr in obj){
//遍历过程把每次把对象属性赋值给attr
//所以获取对象属性值为：obj[attr]
document.write(obj[attr]);//分别输出：'laoxie',18,'男'
}
11、数组与对象的组合
[{
id:'001',
name:'iphone7 plugs',
imgurl:'img/ip7.jpg',
price:5899.00,
sale:5888.00,
color:'土豪金'
},{
id:'002',
name:'Note7',
imgurl:'img/note7.jpg',
price:3899.00,
sale:998.00,
color:'黑色'
},{
id:'003',
name:'荣耀7',
imgurl:'img/honor7.jpg',
price:1999.00,
sale:1899.00,
color:'白色'
}]六、输出
- alert() 弹窗输出
- console.log() 输出到控制台
- innerHTML 输出到双标签元素内容
- value 输出到表单元素
七、JS代码规范:
- JS变量的命名规范
- 变量名必须是数字,字母,下划线
_和美元符$组成; - 第一个字符不能为数字
- 不能使用关键字或保留字
- 代码可读性
- 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
- 变量命名尽量遵守驼峰原则: myStudentScore
- 变量命名尽量见名知意
- 保持代码缩进
- JS语句的末尾尽量写上分号;
- 运算符两边都留一个空格, 如
var n = 1 + 2; - 注释
- 单行注释：//注释内容
- 多行注释（和CSS注释一样）
-
/*注释内容*/ - 多行注释不能嵌套
八、JS数据类型
基本数据类型
- Number：数字
- NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
- 不代表任何值，也不等于任何值，甚至自己都不等于自己
- 任何数据与它运算都返回NaN
- isNaN(a)：用来判断a到底是不是非数字,返回布尔值
用引号（单/双引号）括起来的内容
Boolean 类型有两个值：true和false
引用数据类型
- Array：数组
- Object：对象
特殊数据类型
- Null
Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针) - Undefined
Undefined类型只有一个值，即特殊的 undefined，在使用 var 声明变量，但没有对其赋值，这个变量的值就是 undefined
数据类型判断
- typeof
typeof 'html5'; //=>string
typeof 100; //=>number
typeof true //=>boolean
typeof null //=>object
数据类型转换
基本数据类型转换：利用内置函数进行转换(主动)
var str = '10';//string
Number(str);//10,number
Boolean(str);//true隐式转换(被动)
- 如果运算不能进行下去，内部就会尝试进行数据类型的转换
- 支持隐式转换的运算：逻辑运算、关系运算、算术运算
九、运算
1、算术运算：
+, -, *, /, %:加,减,乘,除,取余(取模)
- toFixed(num): 在数字后面调用，num为小数位，有四舍五入的功能，得到一个字符串
- parseInt()：取整:获取到第一个不为数字的字符为止
- parseFloat()：取小数
+ 的特殊用法：字符串拼接
+号两侧只要有一个是字符串则为字符串拼接
2、赋值操作：
- =
var num1=10;//表示把10赋值给num1变量 - +=：在原来的内容基础上追加内容
str += 'test' <==> str = str + 'test' - -=：
var n=10; n -= 2 <==> n = n - 2 - *=,/=,%=
3、关系运算（返回布尔值）
- ==(等于), !=(不等于)
- <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
- ===、恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）
- !==、不全等于
- 关系运算符的比较规则:
\1. 数字和数字比较, 直接比较大小
\2. 数字和字符串比较, 字符串转换为数字后再比较
\3. 字符串和字符串比较, 进行字符的ASCII码值比较
4、逻辑运算（返回布尔值）
- &&: 逻辑与
- ||：逻辑或
- !: 逻辑非
!true //=> false !false //=> true
&&比||优先级高
5、一元运算
- ++: 自增1（在原来的数值基础上加1）
- –：自减1（在原来的数值基础上加1）
- 前置：
var num = 10; ++num;--num; 返回值：返回值是减1（加1）之后的值 - 后置：
var num = 10; num++;num-- 返回值：返回值是没减1（加1）之前的值
十、条件判断语句
if语句
if单分支：
if(条件){
//条件成立(返回true)时，执行这里的代码，否则不执行
}if双分支：
当if括号内的表达式结果成立，执行执行语句1，否则执行执行语句2if(条件){
语句1
//条件成立(返回true)时，执行这里的代码，忽略以下代码
}else{
语句2
//条件不成立(返回false)时，执行这里的代码
}if多分支：
从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一if(条件1){
//条件1成立(返回true)时，执行这里的代码，忽略以下代码
}else if(条件2){
//条件2成立(返回true)时，执行这里的代码，忽略以下代码
}else{
//以上条件都不成立(都返回false)时，执行这里的代码
}
1、三元运算
格式：条件 ? 条件成立代码 : 条件不成立代码
var a=20;
var b = 50;
var sum = a>b ? a-b : a+b;
2、switch语句
switch(值) {
case value1: //要求value1与值恒等
//如果表达式的值恒等于value1，代码从这里开始执行
break;
case value2:
//如果表达式的值恒等于value2，代码从这里开始执行
break;
case value3:
//如果表达式的值恒等于value3，代码从这里开始执行
break;
case value4:
//如果表达式的值恒等于value4，代码从这里开始执行
break;
default:
如果以上条件都不成立，默认执行这里的代码
}
- switch语句在比较值时使用的是全等操作符，因此不会发生类型转换
- case: 当符合条件时，会从符合条件的那一条case语句开始，依次顺序向下执行
- break: 跳出switch语句
- default: 当所有的case都不满足的情况下会执行defalut下面的语句
十一、循环语句
- 循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
- 循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止
只要条件成立，就会不断地执行花括号里的语句
编写条件时，要避免出现死循环
1、while循环
//变量初始化
while(条件){
//条件成立就会不断地执行这里的代码，直到条件不成立
//所以这里一般会伴随着条件的更新
}
2、do…while
//变量初始化
do {
//不管条件是否成立，先执行一次这里的代码，再进行条件判断，
如果条件依然成立，则再次执行这里的代码，依此类推
//所以这里一般会伴随着条件的更新
} while(条件)
3、for循环
for(变量初始化; 条件判断; 变量更新){
//循环条件成立，则执行这里的代码
}- 两个分号必须写
十二、函数
1、函数的定义
关键字声明（声明式）：
格式：
function 函数名(){}-
function sum(){} -
var sum = function(){}
函数的声明会提前 ==> 解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）;
函数表达式(赋值式)
2、函数的执行
- 手动调用:
sum(); - 事件驱动:
格式：元素.事件 = 函数名;
buton.onclick = sum; - 事件发生都是一瞬间的
3、常见事件触发函数
- onclick：点击事件
- ondblclick：双击事件
- onmouseover：鼠标移入事件
- onmouseout:鼠标移开事件
- onchange：内容改变事件（一般用于表单元素）
- onkeyup：键盘按键弹起事件
- onkeydown: 键盘按下时触发（会连续触发）
4、作用域
俗称“使用范围”，即能够使用某个变量的范围，分<全局作用域>和<局部作用域>
- 全局变量与局部变量
- 全局变量：在全局作用域下声明的变量，可以在任意地方中使用，作用范围比较大，我们称为全局变量
- 局部变量：在函数内（局部作用域）声明的变量，只在函数中可以使用，作用范围较小，我们称之为局部变量
- 变量的访问规则
- 就近原则（如查找变量a）：
- 使用变量a时先从当前函数查找，如果当前函数有变量a则使用;
- 如果当前函数无变量a,则往父级函数查找，如果找到则使用，并停止查找;
- 如果在父级函数还是无法找到，则继续往上一层函数查找，以此类推，直到最顶层(全局作用域)，如果还是没找到，则报not defined错误;
- 作用域链：每个函数在定义时就形成了局部作用域，如果存在多个函数嵌套，他们之间就会建立起某种联系，直到全局作用域，这种联系称之为作用域链。当函数访问变量时，根据就近原则在这个作用域链中从内到外查询变量【声明提前：提前到当前作用域最顶部】。
比如： var name = 'liang'; function show(){ console.log(name); var name = 'xiao'; } 由于js的声明提前，name会提前到函数show内的最顶部，
执行语句console.log(name)时会输入undefined。
```
5、函数的参数
- 形参，就是局部变量
- 形参与实参的区别:
- 形参：声明函数时圆括号内定义的变量
- 实参：函数执行时传入的参数
- arguments
函数内部隐藏的对象（是一个类数组），保存着实参的信息 - length: 实参的数量
- 引用数据类型与基本数据类型的传参（引用传递与值传递）
- 函数作为参数传递
形参和实参的数量可以不同
6、函数返回值
- 终止函数的执行,return后的代码不会执行
- return后如果有值，则把这个值返回到函数执行的地方
如果函数没有return,执行完后返回undefined
7、函数中的this
函数中的this是一个关键字，表示当前对象，而当前对象是谁，取决于谁调用了这个函数。
十三、文档对象模型 DOW
节点操作
* 操作属性
* 设置css样式
* 操作内容
- 绑定事件
- 生成
- document.createElement()
- 插入
- 父级元素.appendChild(添加的元素) : 追加
- 获取节点:
- 获取元素的捷径
- html: document.documentElement
- body: document.body
- a : document.links //[]
- image: document.images //[]
<body>
<h1 class="title">节点操作</h1>
<div id="list">
<a href="#">Google</a>
<a href="#" id="baidu">Baidu</a>
<a href="#">Yahoo</a>
</div>
<a href="#">360</a>
<script>
var baidu = document.getElementById('baidu');
//node
console.log(baidu);
var title = document.getElementsByClassName('title');
//[node]
console.log(title);
var link = document.getElementsByTagName('a');
console.log(link);
var list = document.getElementById('list');
var list_link = list.getElementsByTagName('a');
console.log(list_link);
// 生节成点
var h2 = document.createElement('h2');
h2.id = 'subTitle';
h2.innerHTML = '人工智能';
// 获取body
// var body = document.getElementsByTagName('body')[0];
//[body]
var body = document.body;
body.appendChild(h2)
</script>
</body>
十四、浏览器对象模型 BOM
- window 可省略
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02函数的执行</title> <style> #box{width:200px;height:100px;background-color: #f00;} </style> <script> window.onload = function(){ var box = document.getElementById('box');//节点(对象) //节点(对象) function show(){ console.log('laoxie'); } // 手动执行(主动) show(); // 事件驱动执行(被动) box.onclick = show; box.onmouseover = function(){ console.log('over'); } box.onmouseout = function(){ console.log('out') } // document.onkeyup = function(event) {console.log(event.keyCode,event.key) // // 事件对象:event // console.log('upupup') // } // document.onkeydown = function(event){ // // 事件对象:event // if(event.keyCode === 38){ // } // console.log('down') // } // 表单改变事件onchange username.onchange = function(){ console.log(666) } } </script> </head> <body> <div id="box"></div> <input type="text" id="username"> </body> </html>
- 不建议省略window的场景
- 事件
- 属性
- 事件
- onload 页面所有元素(包括DOM,图片等资源文件)加载完成后执行
- 函数(方法)
- alert() 弹出框
- parseInt() 字符转为整型
- parseFloat() 字符转为浮点型
- Number()
- String()
- Boolean()
- 浏览器可视区域的宽高:
- window.innerWidth
- window.innerHeight
- 自动:
- 设置定时器:var timer = setInterval(fn,duration)
- 每个duration时间(ms),执行一次fn,返回一个定时器标识
- clearInterval(timer) :清除定时器
- 对象
- document
后记
【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。
公众号
关注我，我们一起成长~~
