js基础day02

js基础day02

一.循环语句

1.for循环

语法结构：
for(初始语句; 循环判断语句; 末尾语句){
        循环体(一段代码)
}
初始语句:循环之前执行，一般定义一个初始值为0的变量
循环判断语句:如果条件为真，就执行循环体（循环限制条件）
末尾语句： 循环一次之后执行，一般是对初始语句变量自增或者自减
循环体：反复执行的一段代码

执行过程：
    1.执行初始语句 var i = 0;
    2.执行循环判断语句，进行逻辑判断，如果条件为真，就执行一次循环体
    3.执行末尾语句， 执行后代表一次循环结束

    4.从第二次开始，只进行循环判断语句，如果条件为真，就执行循环体
    5.后面依次执行，知道循环判断语句不满足就结束整个循环语句

 for (var i = 0; i < 10; i++){    // i= 0 , 1 10
        console.log(i);
        console.log('hello javascript');
}

2.break和continue在循环中使用

• break 在循环中，只要执行break就结束整个语句，停止循环

//循环3次为止, 结束循环
for(var i = 0; i < 5; i++){ //0 , 1 , 2
        if(i === 2){
            console.log('第三次循环,结束循环');
            break;
        }
        console.log(i);  //0 1
    }

• continue 在循环中，只要执行continue 结束本次循环，继续下次循环

for(var i = 0; i < 5 ;i++){   // i = 0 , 1, 2, 3
        if(i === 2){
            continue;//结束本次循环
        }
        console.log(i); // 0 , 1,
    }

3.while循环

while(条件){
   循环体；
}

执行过程：
    如果while中条件为真，就执行循环体
    如果while中条件为假，就不执行循环体

    注意：while中一定要条件限制，如果没有限制条件，就是死循环（一直循环下去）

var num = 0;
while (num < 5){
        console.log('hello world');
        console.log(num);
        num++; //限制条件
}

4.do-while循环

do{
   循环体
}while(条件);

执行过程：
    先去执行do里面循环体，循环体执行后，在判断while中条件是否为真
    如果为真，在执行下次循环  

var num = 6;
do{
        console.log('hello world');
        console.log(num);
        num++; //限制条件
}while (num<5);

while循环和do-while循环的区别是 do-while循环先执行代码,再判断。while循环是先判断再执行代码

二.函数

1.概念

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
• 函数是用来封装特定的功能的代码块 ，利用函数可以提高代码的复用性
• 可以把函数看作工具箱，工具箱里面放什么工具，由你决定
• 调用函数实现功能， 就是从工具箱中取工具

2.函数声明

• 本质开辟内存，保存代码

函数参数：就是一个变量， 用来接收和传递从函数外界传过来的值
function 函数名(参数1, 参数2, ...) {
    代码块
}

注意：函数名命名规则和变量名命名规则一致
函数体：用花括号括起来的所有语句

3.函数调用

• 本质：就是从内存中获取代码，并执行代码的过程
• 格式：函数名()

4.函数参数

• 根据参数：函数分为有参函数和无参函数
• a.无参函数

var c = 5;
var d = 3;
function sum() {
    console.log(c + d);
}

• b.有参函数
形参:是在声明函数时,使用的参数, 目的是从外部传入的值。由于它不是实际存在的变量,所以又叫虚拟变量
  作用: 函数被调用时, 用于接收实参值的变量
• 在调用函数时, 实参将赋值给形参. 因而必须注意实参个数, 类型要与形参一一对应.实参必须要有确定的值.

实参: 函数调用时, 传给函数的参数

• 实参可以是常量, 变量, 表达式, 函数等.(了解)
• 注意:无论实参是什么类型, 在函数调用时, 实参都必须有值, 以便把值传给形参

// num1, num2 是形参，`形参`在函数声明中定义的变量，接收实参的值。
function calc(num1 , num2) {
    console.log(num1 - num2);
}
// 8 , 3 是实参，`实参`是函数调用时，传递给函数的参数
    calc(8, 3);
    calc(c, d);

5.函数和变量使用比较

• 5.1 变量使用

var a = 3; //往内存中存值的过程
console.log(a); //从内存找到a，取值的过程

• 5.2 函数使用
• 函数保存代码块
• 调用函数，就是执行函数里面所保存的代码块
• 函数优点可以提高代码可复用性

6.函数的返回值

var a = 10;
var b = 22;
//函数声明
function sum() {
    return a + b;
    alert(111); //unreachable code 不能运行到这行代码
}

//函数调用
var c = sum();
console.log(c);

• return 函数中作用
  • 1.返回值
  • 2.中止函数执行，return 后面代码都不执行

7.函数四种类型

    //1.无参无返回值函数
    //函数声明
    function sum() {
        console.log(a + b);
    }
    //调用函数
    sum();

    //2.无参有返回值函数
    function sub() {
        return a - b;
    }
    console.log(sub());

    //3.有参无返回值函数
    function mult(num1, num2) {
        console.log(num1 * num2);
    }
    mult(2, 3);

    //4.有参有返回值函数
    function div(aa, bb) {
        return aa / bb;
    }
    var num2 = div(5, 2);
    console.log(num2);

8.函数注意点

• 注意1：有参函数，调用时如果不传实参，形参为undefined

 function sum(num1, num2) {
        console.log(num1);
        console.log(num2);
}
sum();

• 注意2：有参函数，实参个数大于形参个数，形参会从左往右依次取实参的值

 function sum(num1, num2) {
        console.log(num1);
        console.log(num2);
}
sum(2,3,4,5);

• 注意3：有参函数，实参个数小于形参个数，没有值的形参为undefined，运算结果为NaN

 function sum(num1, num2) {
        console.log(num1);
        console.log(num2);
}
sum(2);

• 注意4：函数不能自己调自己，除非有条件限制

function sum(num1, num2) {
        console.log(num1);
        console.log(num2);
        sum(2,3);
}
sum(2,3);

• 注意5：sum.length 获取当前函数形参个数
• arguments 函数内部参数，在函数内部指向函数本身
• arguments.length 获取当前函数实参个数

 function sum(num1, num2) {
        console.log(num1);
        console.log(num2);

        console.log(sum.length);
        console.log(arguments.length);
    }
sum(2,3,4,5);

9.全局变量和局部变量

• js作用域根据函数来划分

• 变量存在范围就是作用域

• 1.全局变量：js中定义在函数外部的变量，或者可以在任何地方访问的变量

• 注意：全局变量也是要先声明赋值后，才能使用

console.log(a);

var a = 10;
function add() {
    console.log(a);
}
add();

• 2.局部变量：函数内部定义的变量，作用域从函数左大括号开始右大括号为止
• 注意：局部变量和全局变量同名，局部变量会屏蔽全局变量

var b = 33;
    function sum() {
        var b = 22; //局部变量
        //console.log(b);
    }
    sum();

    console.log(b);

• 注意：局部变量只能在函数内部使用，函数外部获取不到局部变量

• 变量就近原则：如果使用一个变量，会先在当前范围内找有没有，如果当前范围内没有， 就去上一层范围找，如果上一层范围没有，就继续往上找，找到最上面也没有就会报错

var b = 33;
function sum() {
    var b = 22; //局部变量
    function fn() {
        var b = 44;
        console.log(b);
    }
    fn();
}
sum();

10.函数的变量提升

   var a = 10;
       function fn() {
           console.log(a);
           var a = 20;
       }
       fn();

• 如果函数内部有变量和函数外部的变量是一样的,会优先取函数内部的变量
• 如果在使用后面定义变量,这个时候就会将函数的声明定义在使用之前,而赋值还在函数后面

三.Dom

• dom: Document Object Model 文档对象模型

• 当网页被加载时，浏览器会创建页面的文档对象模型

• HTML DOM 模型被构造为对象的树。

• 节点：文档中所有内容都是节点

3.1.dom操作

3.1.1 Dom 树

ct_htmltree.gif

• 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素

• JavaScript 能够改变页面中的所有 HTML 属性

• JavaScript 能够改变页面中的所有 CSS 样式

• JavaScript 能够对页面中的所有事件做出反应

3.1.2 Document 对象

• 每个载入浏览器的 HTML 文档都会成为Document 对象。
• Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
• 点语法：通过点语法获取属性或者调用方法

3.2.操作dom结构

 //1.获取box
    var box = document.getElementById('box');
    console.log(box);

    //2.获取box中内容
    //innerHTML:获取元素的内容， 也可以修改元素中的内容
    console.log(box.innerHTML);

    //3.修改box中的文档结构
    //注意：修改谁的文档结构，就由谁来调用innerHTML
    var oul = document.getElementById('oul');
    console.log(oul.innerHTML);

    //注意：通过innerHTML修改元素文档结构，后面内容的会覆盖前面的
    box.innerHTML = '今天是回南天';
    //innerHTML 也可以添加元素
    box.innerHTML = '
我是标题
我是段落
';

3.3.dom事件

1.事件三要素：

• 事件源：要添加事件的对象，事件触发的对象
• 事件： 触发事件， 怎么触发
• 事件指令： 指的是一段代码（函数）

例子：开灯
事件源：开关按钮
事件：点击开关
事件指令：结果是通电灯亮了

• FF 火狐浏览器 , N 网景领航员浏览器 ， IE

//1.获取按钮
    var btn = document.getElementById('btn');
    //获取box
    var box = document.getElementById('box');

//最终简化版
    btn.onclick = function () {
        //修改box
        box.style.border = '10px solid #000';
        box.style.backgroundColor = 'yellow';
}

3.4.换肤效果