条件语句
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</pre>
注意点(二): 变量的使用----就近原则 !!!
//注意: 变量使用就近原则: 获取一个变量的值, 会在当前所在作用域内找有没有,如果有直接获取
//如果没有就往上一层找, 如果有直接获取, 如果上一层也没有就继续往上找, 直到找到最上层也没有, 就报错
//a is not defined
function sum2() {
//var a = 11;
function sum3() {
//var a = 33;
console.log(a);
}
sum3();
}
sum2();</pre>
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';
</pre>
DOM事件
- 事件三要素
- 事件源: 相应事件的对象
- 事件: 触发的动作
- 事件指令: 相应事件后执行的代码
- 添加事件格式:
事件源.事件 = 事件指令(即函数) - demo
//1.获取按钮
var btn = document.getElementById('btn');
//2.获取box
var box = document.getElementById('box');
//3.onclick 鼠标点击事件
btn.onclick = btnClick;
function btnClick{
}
事件属性一览表
event.png
