首先:JavaScript:弱类型预解析脚本语言。
JavaScript组成:
1、ECMASCRIPT:定义了JavaScript的语法规范,描述了语言的基本语法和数据类型
2、BOM(Browser Object Model):浏览器对象模型
有一套成熟的可以操作浏览器的API,通过BOM可以操作浏览器。比如:弹出框,浏览器跳转,获取分辨率等
3、DOM(Doucument Object Model):文档对象模型
有一套成熟的可以操作页面中的元素的API,通过DOM可以操作页面中的元素。比如:增加个div,减少个div,给div换个位置等
总结:JS就是通过固定的语法操作浏览器和标签结构来实现网页上的各种效果
一、JS之条件分支
if 语句
// 条件为 true 的时候执行 {} 里面的代码
if (true) {
alert(‘因为条件是 true,我会执行‘)}// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
alert(‘因为条件是 false,我不会执行‘)
}
if else 语句
// 条件为 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:
上述情况都不满足的时候执行的代码}
三元运算
var age = 18;age >= 18 ? alert(‘已经成年‘) : alert(‘没有成年‘)
二、JS之循环结构
循环结构
WHILE 循环
// 1. 初始化条件 var num = 0;
// 2. 条件判断while (num < 10) {// 3. 要执行的代码console.log(‘当前的 num 的值是 ‘ + num)// 4. 自身改变 num = num + 1}
DO WHILE 循环
// 下面这个代码,条件一开始就不满足,
但是依旧会执行一次 do 后面 {} 内部的代码 var num = 10 do {console.log(‘我执行了一次‘) num = num + 1} while (num < 10)
FOR 循环
// 把初始化,条件判断,自身改变,
写在了一起 for (var i = 1; i <= 10; i++) {// 这里写的是要执行的代码console.log(i)}// 控制台会依次输出 1 ~ 10BREAK 终止循环
for (var i = 1; i <= 5; i++)
{// 没循环一次,吃一个包子 console.log(‘我吃了一个包子‘)// 当 i 的值为 3 的时候,条件为 true,执行 {} 里面的代码终止循环// 循环就不会继续向下执行了,也就没有 4 和 5 了 if (i === 3) {break}}
CONTINUE 结束本次循环
for (var i = 1; i <= 5; i++) {// 当 i 的值为 3 的时候,执行 {} 里面的代码 // {} 里面有 continue,那么本次循环后面的代码就都不执行了 // 自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了 if (i === 3) {console.log(‘这个是第三个包子,掉地下了,我不吃了‘) continue}console.log(‘我吃了一个包子‘)}
三、JS之函数
函数的概念
// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {console.log(i)}// 函数,这个 {} 就是那个 “盒子” function fn() {// 这个函数我们以前写的代码 for (var i = 0; i < 10; i++) {console.log(i)}}
函数的两个阶段
函数定义阶段
声明式
function fn() {// 一段代码 }
// function: 声明函数的关键字,表示接下来是一个函数了// fn: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)// (): 必须写,是用来放参数的位置(一会我们再聊)// {}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)
赋值式
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 这两个变量 }
-
实参
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)
-
行参比实参多
function fn(num1, num2, num3) {
// 函数内部可以使用 num1 num2 和 num3}// 本次调用的时候,传递了两个实参,100 和 200 // 就分别对应了 num1 和 num2 // 而 num3 没有实参和其对应,那么 num3 的值就是 undefined fn(100, 200)
函数的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
function fn() {
// 执行代码 return 100}// 此时,fn() 这个表达式执行完毕之后就有结果出现了console.log(fn()) // 100
JS基础之分支、循环、函数
原文:https://www.cnblogs.com/homeathere/p/12394297.html