一 操作网页元素的步骤
1. 查找网页元素
|
给标签设置id属性，一个网页中的id值不允许重复
<button id="btn">按钮</button>
|
2. 给按钮绑定事件，监听用户操作
|
btn.onclick = function(){
一旦监听到用户的操作，具体执行的内容
}
input.onfocus = function(){ } (输入框)获得焦点(光标)
input.onblur = function(){ } (输入框)失去焦点(光标)
|
3. 弹出警示框
|
alert() 弹出警示框 请合理使用,否则频繁弹框用户体验感不好，根据具体需求使用
|
4. 修改标签之间的内容(修改HTML)
|
<span id="sum"></span>
sum.innerHTML = 要修改的值
|
5. 修改标签的CSS样式
|
<div id="box"></div>
box.style.样式名称 = 样式值
比如: box.style.backgroundColor ='red'
注意:如果CSS样式属性名有多个单词，记得采用驼峰命名法
|
sum.innerHTML = Number(a)+Number(b)
<html><head><meta charset="utf-8"><title>计算器calc</title></head><body>第1个数字<input type="text" id="num1"><br>第2个数字<input type="text" id="num2"><br><button id="btn">=</button>两个数字相加的和：<span id="sum">结果</span><script>// 给按钮绑定点击事件btn.onclick = function(){// 分别获取两个数字var a = num1.valuevar b = num2.value// 方法一：// 弹警示框两个数相加的结果// 输入框默认输入字符串alert(Number(a)+Number(b))// 方法二：// 修改id值sum的HTML元素的内容sum.innerHTML = Number(a)+Number(b)}</script></body></html>
二 流程控制
程序 = 数据 + 算法
程序的执行方式: 顺序执行、选择执行、循环执行
1 分支结构
1. if语句
|
if (条件) {
如果符合小括号中的条件，执行此处的代码
}
注意:只有小括号中的条件，结果为true才会执行大括号中的代码
|
|
以下5个值作为条件表达式会转为false：
0 NaN '' undefined null
经常用于某些内容的非空判断：
if(!title){ console.log('标题不能为空!') }
|
2. if-else 语句
|
if(条件表达式){
符合判断条件，执行此语句块1
}else {
不符合判断条件，执行此语句块2
}
|
3. if-else嵌套
|
if(条件表达式1){
语句块1
}else if(条件表达式2){
语句块2
}else if(条件表达式3){
语句块3
}else{
以上条件均不满足，执行此处代码
}
1. 执行顺序:从最上面的第一个条件开始判断，符合条件，执行条件后的语句块，整体结束
如果不符合条件，会继续向下判断下一个条件，直至所有条件判断完。如果设置了else,执行else中的代码；如果没有设置else,整体结束
2. else if(){ } 的个数不是固定的，根据具体的业务需求去加
3. else { } 不是必须的，根据需求决定要不要加
|
4. switch-case语句
|
是一种特殊的多项分支语句，条件只能进行全等于的比较
|
|
switch(表达式){
case 值1:
语句块1
break
case 值n:
语句块n
break
default：
语句块n+1
}
1. 执行顺序: 会拿着表达式的值依次与每个case后的值做全等比较，如果相等，会执行对应case后的语句块；如果不相等，会继续向下判断
2. 如果匹配到了case后的值，执行了语句块，那就要看该语句块后是否有break,如果有，直接结束switch-case;如果没有，会逐个向下穿透所有的case，包括default
3. 如果匹配了所有的case均不相等，那就看是否设置了default,若有，执行default,否则结束
4. 表达式的值最好与case后值的类型相同，不需要类型转换，性能会高
5. case的个数不是固定的，default是可选项，不是必须要加的
|
2 循环结构
|
循环就是我们想要重复执行多次相同或相似的代码
循环的要素:
开始条件 结束条件 更改条件
|
1. while循环
|
while(循环条件){
循环体
}
只要循环条件的结果为true,就一直执行循环,所以while(true){} 是死循环
|
|
break 可以用于强制结束循环
|
2. do-while循环
|
do{
循环体
}while(循环条件)
1. do-while循环会直接执行第一轮循环，不做任何判断
2. 是否要执行第二轮循环，取决于是否符合判断条件
3. while与do-while循环使用上区别不大，do-while循环常用于需要先执行一次的情况
|
3. for循环
|
for(开始条件;循环条件;更改条件){
循环体
}
1. for循环也属于先判断再执行的循环
2. for循环的开始条件可以一次声明多个变量
3. 循环的循环条件如果有多个话，是最后一个起作用
|
4. break与continue
|
1. break和continue都是关键字
2. break在循环中用于强制结束当前循环(后面轮数全部不执行)
3. continue在循环中用于跳过本轮循环continue后的代码，直接进行下一轮循环
|
5. 循环的嵌套
|
for(var i = 1 ; i <=10 ; i++){ //外层循环
for(var i = 1 ; i <=10 ; i++){//内层循环
}
}
1. 循环嵌套就是在一个循环中嵌套了另一个循环
2. 外层循环执行1次，内层循环执行多次
3. 对于图形来说，外层循环控制的是行数，内层循环控制的是列数
4. 外层循环与内层循环的循环变量不应该相同，推荐使用i和j
|
创建img对象不生效)
