js学习笔记----Day02函数和DOM

条件语句

1. if else

• if else if else

2. switch

3. 三目运算符

循环语句

1. for

• break(跳过全部循环, break之后的循环体中的代码都不会执行)

• continue (跳过本次循环)

2. do while

函数function

优点:

• 提高了代码的可复用性

• 函数不能自己调用自己. 除非使用递归

• 有参函数, 如果木有实参(或实参数量>形参数量), 参数类型为undefined.

//可以通过函数名.length方式获得函数中形参个数

console.log(sum.length);

//实参个数

console.log(arguments.length);

js的作用域

• 变量的生命周期----作用范围

• js以函数划分作用域

全局变量和局部变量

全局变量

• 所有作用域都可以获得全局变量的值

• 注意: 全局变量必须要有值才能被调用

局部变量

• 只能在本作用域使用

注意点(一): 若形参和实参的命名相同, 作用域内部的形参会屏蔽实参的值

function demo2() {
    // 改变的是实参的值
    console.log(x++);//5
}
demo2(x);
console.log(x);//6

var x = 5;
function demo3(x) {
    // 改变的是形参的值
    console.log(x++);//5
}
demo3(x);
console.log(x);//5

注意点(二): 变量的使用----就近原则 !!!

//注意: 变量使用就近原则: 获取一个变量的值, 会在当前所在作用域内找有没有,如果有直接获取
//如果没有就往上一层找, 如果有直接获取, 如果上一层也没有就继续往上找, 直到找到最上层也没有, 就报错
//a is not defined
function sum2() {
    //var a = 11;
    function sum3() {
        //var a = 33;
        console.log(a);
    }
    sum3();
}
sum2();

DOM

DOM节点.png

DOM作用

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

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

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

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

• 例: dom操作div , 修改box的宽300 高300 和背景颜色

//1.获取box元素
//document :每个载入浏览器的 HTML 文档都会成为 Document 对象
//通过 Document 对象可以对 HTML 页面中的所有元素进行访问。

// 文档    获取  元素   根据 id
//document get Element By Id //功能:文档对象根据id获取元素
//方法参数: 元素id, 格式:字符串
//方法返回值: 获取的元素
var box = document.getElementById('box');
console.log(box);

//2.通过dom修改box
//属性本质就是一个变量
//注意1:通过dom修改元素属性, 赋值格式为字符串,如果该属性有单位要添加单位
//注意2:通过dom修改元素属性, 本质是以行内式的方式修改, 行内式优先级高于页内式
box.style.width = '300px';
box.style.height = '300px';
box.style.backgroundColor = 'yellow';

DOM事件

• 事件三要素

1. 事件源: 相应事件的对象
2. 事件: 触发的动作
3. 事件指令: 相应事件后执行的代码

• 添加事件格式:
  事件源.事件 = 事件指令(即函数)
• demo

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

//3.onclick 鼠标点击事件
btn.onclick = btnClick;
function btnClick{

}

事件属性一览表

event.png