首先:JavaScript:弱类型预解析脚本语言。
JavaScript组成:
1、ECMASCRIPT:定义了JavaScript的语法规范,描述了语言的基本语法和数据类型
2、BOM(Browser Object Model):浏览器对象模型
有一套成熟的可以操作浏览器的API,通过BOM可以操作浏览器。比如:弹出框,浏览器跳转,获取分辨率等
3、DOM(Doucument Object Model):文档对象模型
有一套成熟的可以操作页面中的元素的API,通过DOM可以操作页面中的元素。比如:增加个div,减少个div,给div换个位置等
总结:JS就是通过固定的语法操作浏览器和标签结构来实现网页上的各种效果
一、JS之条件分支
-
我们的 js 代码都是顺序执行的(从上到下)
-
逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码
if 语句
-
通过一个 if 语句来决定代码执行与否a
-
语法: if (条件) { 要执行的代码 }
-
通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行
// 条件为 true 的时候执行 {} 里面的代码
if (true) {
alert('因为条件是 true,我会执行')}// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
alert('因为条件是 false,我不会执行')
}
if else 语句
-
通过 if 条件来决定,执行哪一个 {} 里面的代码
-
语法: if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }
-
两个 {} 内的代码一定有一个会执行
// 条件为 true 的时候,会执行 if 后面的 {}
if (true) {
alert('因为条件是 true,我会执行')} else {
alert('因为条件是 true,我不会执行')}// 条件为 false 的时候,会执行 else 后面的 {}
if (false) {
alert('因为条件为 false,我不会执行')} else {
alert('因为条件为 false,我会执行')}
if else if ... 语句 与 if else if … else 语句 同理
SWITCH 条件分支结构
-
也是条件判断语句的一种
-
是对于某一个变量的判断
-
语法:
switch (要判断的变量) {
case 情况1:
情况1要执行的代码
break
case 情况2:
情况2要执行的代码
break
case 情况3:
情况3要执行的代码
break
default:
上述情况都不满足的时候执行的代码}
-
要判断某一个变量 等于 某一个值得时候使用
三元运算
-
三元运算,就是用 两个符号 组成一个语句
-
三元运算只是对 if else 语句的一个简写形式
-
语法: 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行
var age = 18;age >= 18 ? alert('已经成年') : alert('没有成年')
二、JS之循环结构
循环结构
-
循环结构,就是根据某些给出的条件,重复的执行同一段代码循环必须要有某些固定的内容组成
WHILE 循环
-
while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了语法 while (条件) { 满足条件就执行 }因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了
// 1. 初始化条件 var num = 0;
// 2. 条件判断while (num < 10) {// 3. 要执行的代码console.log('当前的 num 的值是 ' + num)// 4. 自身改变 num = num + 1}
-
如果没有自身改变,那么就会一直循环不停了
DO WHILE 循环
-
是一个和 while 循环类似的循环while 会先进行条件判断,满足就执行,不满足直接就不执行了但是 do while 循环是,先不管条件,先执行一回,然后在开始进行条件判断语法: do { 要执行的代码 } while (条件)
// 下面这个代码,条件一开始就不满足,
但是依旧会执行一次 do 后面 {} 内部的代码 var num = 10 do {console.log('我执行了一次') num = num + 1} while (num < 10)
FOR 循环
-
和 while 和 do while 循环都不太一样的一种循环结构道理是和其他两种一样的,都是循环执行代码的语法: for (var i = 0; i < 10; i++) { 要执行的代码 }
// 把初始化,条件判断,自身改变,
写在了一起 for (var i = 1; i <= 10; i++) {// 这里写的是要执行的代码console.log(i)}// 控制台会依次输出 1 ~ 10BREAK 终止循环
-
在循环没有进行完毕的时候,因为我设置的条件满足,提前终止循环比如:我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情要终止循环,就可以直接使用 break 关键字
for (var i = 1; i <= 5; i++)
{// 没循环一次,吃一个包子 console.log('我吃了一个包子')// 当 i 的值为 3 的时候,条件为 true,执行 {} 里面的代码终止循环// 循环就不会继续向下执行了,也就没有 4 和 5 了 if (i === 3) {break}}
CONTINUE 结束本次循环
-
在循环中,把循环的本次跳过去,继续执行后续的循环比如:吃五个包子,到第三个的时候,第三个掉地下了,不吃了,跳过第三个,继续吃第四个和第五个跳过本次循环,就可以使用 continue 关键字
for (var i = 1; i <= 5; i++) {// 当 i 的值为 3 的时候,执行 {} 里面的代码 // {} 里面有 continue,那么本次循环后面的代码就都不执行了 // 自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了 if (i === 3) {console.log('这个是第三个包子,掉地下了,我不吃了') continue}console.log('我吃了一个包子')}
三、JS之函数
函数的概念
-
对于 js 来说,函数就是把任意一段代码放在一个 盒子 里面在我想要让这段代码执行的时候,直接执行这个 盒子 里面的代码就行先看一段代码
// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {console.log(i)}// 函数,这个 {} 就是那个 “盒子” function fn() {// 这个函数我们以前写的代码 for (var i = 0; i < 10; i++) {console.log(i)}}
函数的两个阶段
-
按照我们刚才的说法,两个阶段就是 放在盒子里面 和 让盒子里面的代码执行
函数定义阶段
-
定义阶段就是我们把代码 放在盒子里面我们就要学习怎么 放进去,也就是书写一个函数我们有两种定义方式 声明式 和 赋值式
声明式
-
使用 function 这个关键字来声明一个函数语法:
function fn() {// 一段代码 }
// function: 声明函数的关键字,表示接下来是一个函数了// fn: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)// (): 必须写,是用来放参数的位置(一会我们再聊)// {}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)
赋值式
-
其实就是和我们使用 var 关键字是一个道理了首先使用 var 定义一个变量,把一个函数当作值直接赋值给这个变量就可以了语法:
var fn = function() {// 一段代码 }
// 不需要在 function 后面书写函数的名字了,因为在前面已经有了
函数调用阶段
-
就是让 盒子里面 的代码执行一下让函数执行两种定义函数的方式不同,但是调用函数的方式都以一样的
调用一个函数
-
函数调用就是直接写 函数名() 就可以了
// 声明式函数
function fn() {console.log('我是 fn 函数')}// 调用函数 fn() // 赋值式函数var fn2 = function() {console.log('我是 fn2 函数')}// 调用函数 fn()
-
注意: 定义完一个函数以后,如果没有函数调用,那么写在 {} 里面的代码没有意义,只有调用以后才会执行
调用上的区别
-
虽然两种定义方式的调用都是一样的,但是还是有一些区别的声明式函数: 调用可以在 定义之前或者定义之后
// 可以调用fn()
// 声明式函数function fn() {console.log('我是 fn 函数')}// 可以调用 fn()
-
赋值式函数: 调用只能在 定义之前
// 会报错 fn()
// 赋值式函数var fn = function() {console.log('我是 fn 函数')}// 可以调用fn()
函数的参数
-
我们在定义函数和调用函数的时候都出现过 ()现在我们就来说一下这个 () 的作用就是用来放参数的位置参数分为两种 行参 和 实参
// 声明式
function fn(行参写在这里) {// 一段代码}fn(实参写在这里)// 赋值式函数var fn = function(行参写在这里) {// 一段代码 }fn(实参写在这里)
行参和实参的作用
-
行参
-
就是在函数内部可以使用的变量,在函数外部不能使用每写一个单词,就相当于在函数内部定义了一个可以使用的变量(遵循变量名的命名规则和命名规范)多个单词之间以 , 分隔
// 书写一个参数
function fn(num) {// 在函数内部就可以使用 num 这个变量 }var fn1 = function(num) {// 在函数内部就可以使用 num 这个变量 }// 书写两个参数function fun(num1, num2) {// 在函数内部就可以使用 num1 和 num2 这两个变量 }var fun1 = function(num1, num2) {// 在函数内部就可以使用 num1 和 num2 这两个变量 }
-
如果只有行参的话,那么在函数内部使用的值个变量是没有值的,也就是 undefined行参的值是在函数调用的时候由实参决定的
-
实参
-
在函数调用的时候给行参赋值的也就是说,在调用的时候是给一个实际的内容的
function fn(num) {
// 函数内部可以使用 num }// 这个函数的本次调用,书写的实参是 100 // 那么本次调用的时候函数内部的 num 就是 100 fn(100) // 这个函数的本次调用,书写的实参是 200 // 那么本次调用的时候函数内部的 num 就是 200 fn(200)
-
函数内部的行参的值,由函数调用的时候传递的实参决定多个参数的时候,是按照顺序一一对应的
function fn(num1, num2) {
// 函数内部可以使用 num1 和 num2}// 函数本次调用的时候,书写的参数是 100 和 200 // 那么本次调用的时候,函数内部的 num1 就是 100,num2 就是 200 fn(100, 200)
参数个数的关系
-
行参比实参少
-
因为是按照顺序一一对应的行参少就会拿不到实参给的值,所以在函数内部就没有办法用到这个值
function fn(num1, num2) {
// 函数内部可以使用 num1 和 num2 }// 本次调用的时候,传递了两个实参,100 200 和 300 // 100 对应了 num1,200 对应了 num2,300 没有对应的变量// 所以在函数内部就没有办法依靠变量来使用 300 这个值 fn(100, 200, 300)
-
行参比实参多
-
因为是按照顺序一一对应的所以多出来的行参就是没有值的,就是 undefined
function fn(num1, num2, num3) {
// 函数内部可以使用 num1 num2 和 num3}// 本次调用的时候,传递了两个实参,100 和 200 // 就分别对应了 num1 和 num2 // 而 num3 没有实参和其对应,那么 num3 的值就是 undefined fn(100, 200)
函数的return
-
return 返回的意思,其实就是给函数一个 返回值 和 终断函数
终断函数
-
当我开始执行函数以后,函数内部的代码就会从上到下的依次执行必须要等到函数内的代码执行完毕而 return 关键字就是可以在函数中间的位置停掉,让后面的代码不在继续执行
function fn()
{console.log(1)console.log(2)console.log(3)// 写了 return 以后,后面的 4 和 5 就不会继续执行了returnconsole.log(4)console.log(5)}// 函数调用fn()
返回值
-
函数调用本身也是一个表达式,表达式就应该有一个值出现现在的函数执行完毕之后,是不会有结果出现的
// 比如 1 + 2 是一个表达式,那么
这个表达式的结果就是 3console.log(1 + 2) // 3function fn() { // 执行代码}// fn() 也是一个表达式,这个表达式就没有结果出现console.log(fn()) // undefined
-
return 关键字就是可以给函数执行完毕一个结果
function fn() {
// 执行代码 return 100}// 此时,fn() 这个表达式执行完毕之后就有结果出现了console.log(fn()) // 100
-
我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果