JS第二天

作者: knot98 | 来源:发表于2018-10-12 19:38 被阅读0次

JS第二天
第二天 js+jquery的学习经验
JavaScript30 Day 2
第二天指令式编程、抽象思维
2018-07-21
JS第二天
JS第二天
JS第二天
JSConf China 2017 Day Two — End
JS学习——第二天

JS第二天

一、分支结构

1、if语句

if分支结构代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>分支结构</title>
</head>
<body>
    分支结构
</body>
<script type="text/javascript">
    // if分支结构

    // var tq = prompt("今天天气(晴|雨)");
    // if (tq == '雨') {
    //  alert("带伞上学!");
    // }

    // 语法
    /*
    if (条件表达式) {
        代码块;
    }
    */

    // 条件表达式可以为普通表达式
    // 表达式:由常量,变量组成的合法式子 1 | 1+a | ""+0("0")
    // 0 "" null undefined NaN 为假
    // var temp = " "; // 为真
    // if (temp) {
    //  alert("表达式为真!");
    // }


    // 双分支
    // var tq = prompt("今天天气(晴|雨)");
    // if (tq == '雨') {
    //  alert("带伞上学!");
    // } else {
    //  alert("不上学!");
    // }

    // 多分支
    // var tq = prompt("今天天气(晴|雨|多云)");
    // if (tq == '雨') {
    //  alert("带伞上学!");
    // } else if (tq == '晴') {
    //  alert("不上学!");
    // } else 
    //  alert("睡觉!");
    //  alert("恶龙咆哮!"); // 该语句不属于if结构
    
    // 1.else分支可以省略
    // 2.else if分支可以为多个

    // 注: 当某个分支只有一条逻辑语句,可以省略{}


    // if嵌套
    var jijie = prompt("季节(春夏秋冬):");
    if (jijie == '冬') {
        var wd = prompt("今天温度(-5|5)");  // 接收到的是字符串
        wd = Number(wd);
        if (wd < 0) {
            alert('穿羽绒服!');
        } else {
            alert('穿短袖!');
        }
    } 
    // else if 春夏秋

</script>
</html>

if 基础语法

if (条件表达式) {
    代码块;
}
// 当条件表达式结果为true，会执行代码块；反之不执行
// 条件表达式可以为普通表达式
// 0、undefined、null、""、NaN为假，其他均为真

if 复杂语法

// 1.双分支
if (表达式1) {
    代码块1;
} else {
    代码块2;
}

// 2.多分支
if (表达式1) {
    
} else if (表达式2) {
    
} 
...
else if (表达式2) {
    
} else {
    
}

if 嵌套

if (表达式1) {
    if (表达式2) {
        
    }...
}...

2、switch语句

switch分支结构代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>switch分支</title>
</head>
<body>
    switch分支
</body>
<script type="text/javascript">
    var month = prompt('请输入月份:');

    // month = + month;
    // switch (month) {
    //  // case 1: alert("31天"); break;
    //  case 1: alert("31天");
    //  default: alert("28天");
    // }

    // switch (month) {
    //  case '1': alert("31天"); break;
    //  default: alert("28天");
    // }

    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之下,也可以省略

</script>
</html>

switch (表达式) {
    case 值1: 代码块1; break;
    case 值2: 代码块2; break;
    default: 代码块3;
}
// 1.表达式可以为 整数表达式 或 字符串表达式
// 2.值可以为 整数 或 字符串
// 3.break可以省略
// 4.default为默认代码块，需要出现在所有case最下方，在所有case均未被匹配时执行

二、循环结构

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环结构</title>
</head>
<body>
    循环结构
</body>
<script type="text/javascript">
    // 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, 1: 100};
    for (k in obj) {
        console.log(k, obj[k])
    }
    // 对象的简单使用
    console.log(obj["name"]);
    console.log(obj[1]);
    // 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value

    // 5.for...of迭代器
    // iter = ['a', 'b', 'c'];
    iter = 'abc';
    for (v of iter) {
        console.log(v)
    }
    // 1.用于遍历可迭代对象：遍历结果为value
    // 2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

    // 6.关键词
    // break:结束本层循环
    // continue:结束本次循环,进入下一次循环
    
</script>
</html>

1、for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
// 1.循环变量可以在外、在内声明
// 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②，②④③个数为[0, n]

2、while循环

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

3、do...while循环

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：结束本次循环进入下一次循环

三、异常处理

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>异常处理</title>
</head>
<body>
    异常处理
</body>
<script type="text/javascript">
    while (1) {
        var num1 = + prompt("请输入第一个数字:");
        var num2 = + prompt("请输入第二个数字:");

        var res = num1 + num2;

        try {
            if (isNaN(res)) throw "计算有误!";
            alert(res);
            break;
        } catch (err) {
            console.log("异常:" + err);
        } finally {
            console.log('该语句一定会被执行,一次try逻辑执行一次');
        }
    }

    
</script>
</html>

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

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

四、函数初级

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>函数初级</title>
</head>
<body>
    函数初级
</body>
<script type="text/javascript">
    // 0.函数的调用
    // 函数名(参数列表)

    // 1.ES5函数定义
    function fn1() {
        console.log("fn1 函数");
    }
    fn1();

    var fn2 = function () {
        console.log("fn2 函数");
    }
    fn2();

    // 2.ES6函数定义
    let fn3 = () => {
        console.log("fn3 函数");
    }
    fn3();


    // 3.匿名函数
    // (function () {
    //  console.log("匿名函数");
    // })

    // 匿名函数定义后,无法使用,所以只能在定义阶段自调用
    let d = "匿名";
    (function (t) {
        console.log(t + "函数");
    })(d);

</script>

<script type="text/javascript">
    // 函数的参数
    // 注:js参数都是位置参数

    // 参数不统一
    function fun1 (a, b, c) {
        console.log(a, b, c);  // 100 undefined undefined
    }
    fun1(100);


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

    // 默认值参数
    function fun3 (a, b=20, c, d=40) {
        console.log(a, b, c, d);  // 100 200 300 40
    }
    fun3(100, 200, 300);


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

</script>

<script type="text/javascript">
    // 返回值
    // 1.空返回
    var func1 = function (num) {
        if (num == 0) return; // 用来结束函数
        console.log('num: ', num);
    }
    func1(100);

    // 2.返回值类型任意,但只能为一个值
    var func2 = function (a, b) {
        // return a, b, a + b; // 不报错,但只返回最后一个值
        return a + b;
    }
    // 注:函数返回值就是函数的值,外界可以用变量结束函数执行后的函数值
    var res = func2(10, 20);
    console.log("和:%d", res);

</script>

</html>

1、函数的定义

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

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

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.函数最多只能拥有一个返回值

五、事件初级

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件初级</title>
    <script type="text/javascript">
        // 事件需要绑定具体执行函数(方法)
        // 通过事件满足的条件触发绑定的函数(方法)
        // 函数(方法)完成具体的功能

        // onload事件附属于window
        // onload触发条件:页面加载完毕(DOM文档树及页面资源)
        // 行间式方式可以书写在body标签
        window.onload = function () {
            div.style.color = 'red';
        }
    </script>
</head>
<body>
    事件初级
    <div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div>
    <!-- 1.直接将js代码块书写在行间事件中, 不提倡 -->
    <!-- 2.行间事件调用函数, 不提倡(比较直接) -->
</body>

<script type="text/javascript">
    var overAction = function () {
        div.style.color = 'blue';
    }

    // 3.为目的对象绑定事件方法,内部可以使用this关键词
    // this就是绑定的对象本身
    div.onmouseout = function () {
        this.style.color = 'pink';
    }
</script>
</html>

JS-事件.PNG

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

六、JS选择器

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js选择器</title>
    <style type="text/css">
        /*css选择器*/
        #d {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="d" class="dd">123</div>
    <div id="d" class="dd">123</div>
    <div id="e1" class="ee">123</div>
    <div id="e2" class="ee">123</div>
    <div id="e3" class="ee">123</div>
</body>

<script type="text/javascript">
    // 1.直接可以通过id名,确定页面元素对象(id一定要唯一)
    // d.style.color = "cyan";

    // 2.getElement方式
    // document:所有标签都存在于文档中,所有通过document对象就可以找到指定的页面元素对象

    // id
    var d1 = document.getElementById('d');
    d1.style.backgroundColor = "pink";

    // class
    var d2 = document.getElementsByClassName('dd');
    console.log(d2);  // HTMLCollection 类数组类型
    console.log(d2[0].style);
    d2[0].style.backgroundColor = "cyan";
    d2[1].style.backgroundColor = "blue";

    // tagName
    var d3 = document.getElementsByTagName('div');
    d3[1].style.backgroundColor = "#333";

    // 注:只有getElementById只能由document调用

    var body = document.getElementsByTagName('body')[0];
    body.style.backgroundColor = "#eee";
    var d4 = body.getElementsByClassName('dd')[0];
    d4.style.backgroundColor = "orange";
    var d5 = body.getElementsByTagName('div')[1];
    d5.style.backgroundColor = "brown";

</script>

<script type="text/javascript">
    // 参数为css语法的选择器

    // 找满足条件的第一个
    // 可以被document调用,也可以被普通对象调用
    var e1 = document.querySelector('#e1'); // id为e1的标签,唯一一个
    e1.style.backgroundColor = "#f7f";

    var e2 = document.querySelector('body .ee'); // body标签下的class为ee的 第一个标签
    e2.style.backgroundColor = "#ff6700";

    var e3 = document.querySelector('body .ee:nth-of-type(5)');
    console.log(e3)
    e3.style.backgroundColor = "#ff6700";

    // 找满足条件的所有
    var es = document.querySelectorAll('.ee');
    console.log(es); // NodeList
    es[1].style.backgroundColor = "tomato";

</script>

</html>

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操作页面内容

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JS操作页面内容</title>
</head>
<body>
    <div class="sup">
        sup的文本
        <div class="sub">sub的文本</div>
    </div>
    <form action="">
        <input class="input" type="text" />
        <button class="btn" type="button">获取</button>
    </form>
</body>

<script type="text/javascript">
    // 通过js获取页面需要操作的元素对象
    var sup = document.querySelector('.sup');
    var sub = sup.querySelector('.sub');

    // 获取

    // 自身及所有子级的文本
    console.log(">>>>>" + sup.innerText);  // sup的文本 \n sub的文本
    console.log(">>>>>" + sub.innerText);  // sub的文本

    // 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...)
    console.log(">>>>>" + sup.innerHTML);  // <div class="sub">sub的文本</div>
    console.log(">>>>>" + sub.innerHTML);  // sub的文本

    // 赋值
    sub.innerText = "<b>修改的sub文本</b>";
    sub.innerHTML = "<b style='color: red'>修改的sub文本</b>";
    // Text不解析标签语法,原样作为文本赋值给目标对象
    // HTML可以解析标签语法

    console.log("-------------------------------------------------");
    console.log(sub.innerHTML);  // <b style='color: red'>修改的sub文本</b>
    console.log("-------------------------------------------------");
    console.log(sub.outerHTML);  // <div class="sub"><b style='color: red'>修改的sub文本</b></div>
    console.log("-------------------------------------------------");


    var btn = document.querySelector('.btn');
    var ipt = document.querySelector('.input');
    btn.onclick = function () {
        // 获取表单元素的文本值

        // 获取文本
        var v = ipt.value;
        console.log(v);

        // 清空文本
        ipt.value = "";  // 赋值空文本
    }

</script>

</html>

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

八、JS操作页面样式

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js操作页面样式</title>
    <style type="text/css">
        div#div.div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--  style="background-color: orange;" 行间式优先级高于任何css选择器 -->
    <!-- 低于!important -->
    <!-- <div id="div" class="div" style="background-color: orange;"></div> -->
    <div id="div" class="div"></div>
    <button class="btn">切换</button>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');
    // js操作的就是行间式
    // div.style.backgroundColor = 'orange';

    // 需求:切换背景颜色 红 <=> 黄
    // 1.获取原来的颜色
    // 2.判断颜色
    // 3.修改颜色

    // 因为页面一般采用css样式布局,css布局的样式叫 计算后样式
    // 而ele.style.样式只能获取行间式样式
    // var bgColor = div.style.backgroundColor;  
    // console.log(bgColor);

    // 获取计算后样式
    // getComputedStyle参数: 页面对象 伪类
    // getPropertyValue参数: css语法的样式字符串
    // var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');
    var bgColor = getComputedStyle(div, null).backgroundColor;
    console.log(bgColor);  // rgb(255, 0, 0)


    var btn = document.querySelector('.btn');
    // 点击一下
    btn.onclick = function () {
        // 获取当前颜色一次
        bgColor = getComputedStyle(div, null).backgroundColor;
        console.log(bgColor); 
        // 判断并修改
        if (bgColor == 'rgb(255, 0, 0)') {
            div.style.backgroundColor = 'orange';
        } else {
            div.style.backgroundColor = 'red';
        }
    }

</script>
</html>

读写 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 += " 类名";  // 添加类名

JS操作类名:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js操作类名</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
        .show {
            width: 200px;
            height: 200px;
            background-color: red;
            display: block;
        }
        .hidden {
            display: none;
        }
        .border {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button class="btn1">显示</button>
    <button class="btn2">加边框</button>
    <button class="btn3">改颜色</button>
    <button class="btn4">加文本</button>
    <button class="btn5">隐藏</button>
    <div class="div"></div>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');
    var b1 = document.querySelector('.btn1');
    var b5 = document.querySelector('.btn5');
    var b2 = document.querySelector('.btn2');
    var b4 = document.querySelector('.btn4');



    b1.onclick = function () {
        div.className = 'show';
    }
    b5.onclick = function () {
        div.className = 'hidden';
    }
    b2.onclick = function () {
        div.className += ' border';
    }
    b4.onclick = function () {
        div.innerText += "文本";
    }



</script>
</html>

JS第二天
JS第二天目录：分支结构循环结构异常处理函数初级事件处理 JS选择器 JS操作页面内容 JS操作页面样...
第二天 js+jquery的学习经验
第二天 js+jquery的学习经验 - CSDN博客
JavaScript30 Day 2
这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解第二天的挑战...
第二天指令式编程、抽象思维
兄弟会-全栈工程师第二天笔记指令式编程 NodeJS 运行于服务器端的JS程序抽象思维 JS语法特性例如：
2018-07-21
暑假学习第二天 HTML再巩固了盒模型 JS今日巩固了map(),filter(),reduce(),apply(...
JS第二天
js运算符运算操作符 ‘+’ 1.数学运算、字符串链接 2.任何数据类型加字符串都等于字符串‘-’、...
JS第二天
对象到其他类型之间的数据转换对象到boolean 非空对象是true 空对象(是null，不是{}) fal...
JS第二天
来到简书第二天，有点不知道写什么好。二零一九年，想了很多，开始做的却很少… 真正开始实行的大概只有来...
JSConf China 2017 Day Two — End
第二天的分享更加偏向 Web 后端。第一场：Node.js Microservices on Autopilot...
JS学习——第二天
2018年2月23日，第二天课程。课程主题：运算操作、函数以及变量。要点：1.运算操作符+，-，*，/，%，*...

JS第二天

JS第二天

目录：

一、分支结构

1、if语句

2、switch语句

二、循环结构

1、for循环

2、while循环

3、do...while循环

4、for...in循环

5、for...of循环

6、break，continue关键词

三、异常处理

四、函数初级

1、函数的定义

2、函数的调用

3、函数的参数

4、返回值

五、事件初级

六、JS选择器

1、getElement系列

2、querySelect系列

3、id名

七、JS操作页面内容

八、JS操作页面样式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读