DAY55-前端入门-javascript

Posted 2021-01-12 LIFE

目录

• 一、分支结构
  • 1.if分支结构
  • 2.switch语句
• 二、循环结构
  • 1.for循环
  • 2.while循环
  • 3.do...while循环
  • 4、for...in循环
  • 5、for...of循环
  • 6、break，continue关键词
• 三、异常处理
• 四、函数
  • 2、函数的调用
  • 3、函数的参数
  • 4、返回值
• 五、事件
• 六、js选择器
  • 1、getElement系列
  • 2、querySelect系列
  • 3、id名
• 七、js操作内容
• 八、js操作样式

一、分支结构

1.if分支结构

语法：

if (条件表达式) {
? 代码块;
}

else if(条件表达式) {
? 代码块;
}

else {
? 代码块;
}

总结：

1. 条件表达式可以为普通表达式。
2. 表达式:由常量,变量组成的合法式子
3. 0 "" null undefined NaN 为假
4. else分支可以省略
5. else if分支可以为多个
6. 当某个分支只有一条逻辑语句,可以省略{}

2.switch语句

语法：

switch (表达式) {
? case 值1: 代码块1; break;
? case 值2: 代码块2; break;
? default: 代码块3;
}

var month = prompt(‘请输入月份:‘);
month = + month;
switch (month) {
        case 1: case 3: case 5: case 7: case 8: case 10: case 12: {
            alert(‘31天‘);
            break;
        };

        case 4:
        case 6:
        case 9:
        case 11:
            alert("30天"); break;

        default: alert("28天");
    }

总结：

1. break结束最近的case,跳出switch结构
2. 表达式与值进行的是全等比较,所以表达式与值得类型需要统一 (字符串 | 整数值)
3. 多个case可以共用逻辑代码块
4. default分支为默认分支,需要出现在所有case之下,也可以省略

二、循环结构

1.for循环

语法

//for (循环变量①; 条件表达式②; 循环变量增量③) {
//      代码块④;
//  }
//执行的逻辑顺序 ① ②④③ ... ②④③ ②  (②④③个数[0, n])

for (var i = 0; i < 5; i++) {
        document.write("</br><h1 style=‘margin: 0‘>学习使我快乐!</h1>");
    }

2.while循环

语法

var i = 0;
while (i < 5) {
    document.write("</br><h1 style=‘margin: 0‘>学习使我快乐!</h1>");
    i++;
}
//while可以解决不明确循环次数但知道循环出口条件的需求

3.do...while循环

语法

var i = 0;
do {
    document.write("</br><h1 style=‘margin: 0‘>学习使我快乐!</h1>");
    i++;
} while (i < 5);
//do..while循环,循环体一定会被执行,至少执行一次

4、for...in循环

语法

obj = {"name": "zero", "age": 8}
for (k in obj) {
    console.log(k, obj[k])
}
// 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value

5、for...of循环

语法

iter = [‘a‘, ‘b‘, ‘c‘];
for (i of iter) {
    console.log(iter[i])
}
// 1.用于遍历可迭代对象：遍历结果为index，通过[]语法访问对应的value
// 2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

6、break，continue关键词

• break：结束本层循环
• continue：结束本次循环进入下一次循环

三、异常处理

try {
    易错代码块;
} catch (err) {
    异常处理代码块;
} finally {
    必须逻辑代码块;
}
// 1.err为存储错误信息的变量
// 2.finally分支在异常出现与否都会被执行

throw "自定义异常"
// 必要的时候抛出自定义异常，要结合对应的try...catch使用

四、函数

1、函数的定义

• ES5

function 函数名 (参数列表) {
    函数体;
}

var 函数名 = function (参数列表) {
    函数体;
}

• ES6

let 函数名 = (参数列表) => {
    函数体;
}

• 匿名函数

(function (参数列表) {
    函数体;
})

// 匿名函数需要自调用
(function (参数列表) {
    函数体;
})(参数列表);

2、函数的调用

• 函数名(参数列表)

3、函数的参数

• 个数不需要统一

function fn (a, b, c) {
    console.log(a, b, c);  // 100 undefined undefined
}
fn(100);

function fn (a) {
    console.log(a)  // 100
}
fn(100, 200, 300)  // 200,300被丢弃

• 可以任意位置具有默认值

function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d);  // 100 200 300 40
}
fn(100, 200, 300);

• 通过...语法接收多个值

function fn (a, ...b) {
    console.log(a, b);  // 100 [200 300]
}
fn(100, 200, 300);
// ...变量必须出现在参数列表最后

4、返回值

function fn () {
    return 返回值;
}
// 1.可以空return操作，用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值

五、事件

• onload：页面加载完毕事件，只附属于window对象
• onclick：鼠标点击时间
• onmouseover：鼠标悬浮事件
• onmouseout：鼠标移开事件
• onfocus：表单元素获取焦点
• onblur：表单元素失去焦点

六、js选择器

1、getElement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById(‘id名‘);
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName(‘class名‘);
// 该方法可以由document及任意页面元素对象调用
// 返回值为htmlCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName(‘tag名‘);
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

2、querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector(‘css语法选择器‘);
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.querySelectorAll(‘css语法选择器‘);
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

3、id名

• 可以通过id名直接获取对应的页面元素对象，但是不建议使用

七、js操作内容

• innerText：普通标签内容（自身文本与所有子标签文本）
• innerHTML：包含标签在内的内容（自身文本及子标签的所有）
• value：表单标签的内容
• outerHTML：包含自身标签在内的内容（自身标签及往下的所有）

八、js操作样式

• 读写 style属性 样式

div.style.backgroundColor = ‘red‘;
// 1.操作的为行间式
// 2.可读可写
// 3.具体属性名采用小驼峰命名法

• 只读 计算后 样式

// eg: 背景颜色
// 推荐
getComputedStyle(页面元素对象, 伪类).getPropertyValue(‘background-color‘);
// 不推荐
getComputedStyle(页面元素对象, 伪类).backgroundColor;

// IE9以下
页面元素对象.currentStyle.getAttribute(‘background-color‘);
页面元素对象.currentStyle.backgroundColor;

// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式为只读
// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)

• 结合 css 操作样式

页面元素对象.className = "";  // 清除类名
页面元素对象.className = "类名";  // 设置类名
页面元素对象.className += " 类名";  // 添加类名