day42 js

一.javascript

1.ECMAScript5基础语法

js引入方式:

外接方式:<script type="text/javascript" src="./index.js"></script>

内接方式:<script type="text/javascript"></script>

加载顺序,从上往下

var 声明变量

测试语句

console.log(变量名):控制台输出内容, 测试

alert(变量名):弹出框测试

数据类型

基本数据类型

number

var a = 123;

console.log(typeof a) //typeof 变量名: 检查当前变量是什么数据类型

var a1 = 5/0; //特殊情况

console.log(typeof a1) //输出:Infinity无限大, 类型:number

<script>
    var a = 5/0;
    console.log(a);
    console.log(typeof a);
</script>

string

var str = '123';

console.log(typeof str)

//字符串的 *

var a = "one";

var b = "two";

console.log(a*b); 输出:NaN(not a number), 类型: number

//字符串拼接使用+

<script>
    //字符串的拼接, 变量的替换
    var name = 'bajie';
    var age = 18;
    var str = name+" is "+age+" years old.";    //正常使用js语法, 用+号拼接(行内替换: "+name+")
    var str1 = `${name} is ${age} years old.`;   //使用es6的模板字符串, 整个字符串反引号``, 里面用shell的变量引用方法替换
    console.log(str);
    console.log(str1);
</script>

boolean

var b1 = false; //flase 和 true都是小写

console.log(typeof b1)

null

var c1 = null; //输出null本身类型:object

console.log(c1)

undefined

var d1; //表示变量未定义

console.log(typeof d1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>                    //script可以写在body,尾部,任何地方
        var a = 2;              //声明并赋值
        var b;
        b = 6;                  //先声明再赋值
        var c = 'bajie';
        console.log(a);         //测试打印
        console.log(b);
        console.log(c);
        console.log(window.c);  //变量的落脚点, python是global, 这里是窗口window,可省略不写
        console.log(typeof a);  //查看变量的类型
        console.log(typeof c);
        var ac = a + c;          //数值 + 字符串 = 字符串(浏览器的隐式转换)
        console.log(ac);
        console.log(typeof ac);
        console.log(typeof (66+''));    //数字+一个空的字符串, 就能隐式转换成字符串
        alert('弹出警告框');
        // 每行结束为什么要加一个分号; 因为这些js文件上线的时候要压缩,以节省文件大小; 分号在其中起分隔作用
        var a = prompt('今天是什么天气?'); //js 自带的弹出输入框, 基本不用这个.
        console.log(a);
        //直接量; 字面量; 常量都一个意思, 就是看到什么就是什么
        // console.log(notdefined); //Uncaught ReferenceError: notdefined is not defined: 没定义过的变量会报错:
        //js中有报错,会中止程序, 先注释掉
        var e;                          //只声明没有赋值的变量:
        console.log(e);                 //输出是undefined
        console.log(typeof e);          //变量类型是undefined
        //变量的命名规范: 和python不同的是可以使用美刀$符号来命名
        //保留字: 此语言保留的,将来可能成为关键字, 不允许用做变量名, 不用记, IDE会给你提示
        var a = 3;
        var b = '1';
        var c = a - b;
        console.log(c);
        console.log(typeof c);  //只要出现了减号, 无论是字符串还是数值,个数是几个,运算后的结果都是数值
    </script>
</head>
<body>
</body>
</html>

引用数据类型

Function

Object

Array

Date

运算符

赋值运算符

= 也有+= -=等

算数运算符

有++ 和--, 用法和c语言一样

比较运算符

有个 === !== 和is差不多

<script>
    console.log(26 == '26'); //结果是true, 当比较时, 比较的是数值(如有字符串会隐式转成数值)
    console.log(26 === '26'); //结果是false, 等同于, 要求内存地址相同,即数值和数据类型都相同
</script>

数据类型转换

将数值转成字符串

<script>
    var a = 123;
    console.log(String(a));
    console.log(a.toString())
</script>

将字符串转成数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(parseInt('66.55'));
        console.log(parseInt('66bajieai2018'));
        console.log(parseInt(66.55));               //结果都是数值66, 1.将字符串转换数值, 2.净化作用, 只保留开头的数字 3.截取功能,只保留小数点前面的内容
    </script>
</head>
<body>
</body>
</html>
 
<script>
    console.log(Number('123.432abc'));      //输出NaN; 没有净化作用, 有字母时, 返回的结果是NaN, 类型是number
    console.log(Number('123.432'));      //输出123.432; 将字符串转换成number类型, 这个没有截取
    console.log(parseFloat('123.432abc55.6cdf')); //输出123.432; 和parseInt()类似, 返回浮点数(浮点数不用截取); 也有净化作用: 返回开头的浮点,其他不要
</script>

任何数据类型都可转为boolean类型

<script>
    var a1 = '123';
    var a2 = -123;
    var a3 = Infinity;
    var a4 = NaN;
    var a5 = 0;
    var a6;
    var a7 = null;
    console.log(Boolean(a1),Boolean(a2),Boolean(a3),Boolean(a4),Boolean(a5),Boolean(a6),Boolean(a7)); //true true true false false false false
</script>

流程控制

if-else

<script>
    var age = 10;
    if(age > 18){                        //用法和c语言的一样
        console.log('go to school');
    }else{
        console.log('go to home');
    }
</script>

&& ||

和python的 and 和 or的用法一样

switch

<script>
    var age = 20;
    switch (age) {                            //用法和c语言的一样
        case 18: console.log('is 18 man'); break;
        case 19: console.log('is 19 man'); break;
        case 20: console.log('is 20 man');
        default: console.log('is other man');
    }
</script>

while

<script>
    // 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量
    var a = 1;
    while(a<=9){                            //用法和c语言的一样
        console.log(a);
        a++;
    }
    var a;
    while(a=1,a<=9,a++){
        console.log(a);
    }
</script>
<script>
    // 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量
    var a = 0;
    while(a<=100){              //和c不完全一样{a=0,a<=100,a+=2}这样就不支持
        console.log(a);
        a+=2;
    }
</script>

do-while

先做一次, 再去while

for

<script>
    for(var i = 0; i<=100; i++) {
        if (i%2==0) {
            console.log(i);
        }
    }
</script>

常用内置对象

Array

prototype: 可以认为是数组的父类, 在父类上挂载一些方法, 在子类上可以继承使用

<script>
    var arr = ['bajie','wukong','datang']; //字面量方式创建
    console.log(arr);
    var arr1 = [];                          //字面量方式创建
    arr1[0] = 'xixi';
    console.log(arr1);
    //es5的js中没有class的概念, 我们创建对象使用构造函数 new
    var arr = new Array();              //构造函数方式创建(这里的Array是内置的)
    console.log(arr);
</script>

prototype: 数组常用的方法(proto 原型)

<script>
    var a1 = [1,2,3];
    var a2 = ['a','b','c'];
    var a3 = a1.concat(a2);     //合并两个数组为一个
    console.log(a3);
 
    var a4 = a2.join('');     //把数组中的元素用('')里的东西拼接起来
    console.log(a4);
 
    var a5 = a1.toString();     //把数组转换成字符串,每个元素之间使用逗号隔开
    console.log(a5);
    console.log(typeof a5);
 
    var a6 = a2.slice(1,4);     //切片,返回一个新的数组, 猜开头不猜结尾
    console.log(a6);
 
    a2.push('d');               //追加元素: 直接加, 返回的不是新列表, 而是新列表的个数
    console.log(a2);
    a2.push('e','f');         //追加多个元素
    console.log(a2);
    a2.push(['g','h']);          //追加一个列表进去
 
    var a7 = a1.pop();          //弹出最后一个元素,返回弹出的元素. 不能按下标弹出
    console.log(a7);
    console.log(a1);
 
    var a8 = a2.reverse();      //反转数组
    console.log(a2);
    console.log(a8);            //返回值和源数组一样...
 
    var a9 = [1,4,11,9,2,3,10,5,65];    //只按第一个数或字母排序;没啥用
    var a10 = a9.sort();
    console.log(a9);
    console.log(a10);       //返回值和源数组一样...
 
    console.log(Array.isArray(a9));  //判断是不是数组
 
    var a11 = [1,2,3,4];
    a11.shift();            //从前面弹出一个元素
    console.log(a11);
 
    a11.unshift(1);          //从前面追加一个元素
    console.log(a11);
 
    arr = ['bajie','wukong','datang'];
    for(var i = 0; i < arr.length; i++){            //遍历数组
        console.log(arr[i]);
        document.write(arr[i]);
    }
</script>

String

<script>
    var str = 'bajie';              //字面量声明字符串并赋值,
    console.log(str.charAt(0));      //按索引下标取字符
 
    var str = new String();           //构造方法声明字符串: 这个在控制台可以显示父类挂载的方法
    console.log(str);
 
    var str1 = 'ba12a3';
    var str2 = 'jie';
    console.log(str1.concat(str1,str2,str2));   //几个字符串的拼接
 
    console.log(str1.replace('b',123456));   //字符串中元素的替换
 
    console.log(str1.indexOf(2));    //查找char在字符串中的索引, 没有则返回 -1
 
    console.log(str1.slice(0,1));   //切片, 猜开头,猜不到结尾
 
    console.log(str1.split('a'));   //分隔, 和python一样返回的是数组, 如果有第二个参数,表示的是返回数组的最大长度
 
    console.log(str1.substr(0,2));  //和slice一样也是切片
 
    console.log(str1.toLowerCase());    //
    console.log(str1.toUpperCase());    //
 
    var str3 = 1234.5678;
    console.log(str3.toFixed(2));   //四舍五入, 括号里面的是保留的小数个数
 
    console.log('  bajie  '.trim());    //python 中的strip()
 
</script>

Date

<script>
    var date = new Date();  //创建日期对象只有这一种方式,
    console.log(date);  //Date Fri Nov 15 2019 19:42:43 GMT+0800 (中国标准时间)
    console.log(date.getDate());    //1-31
    console.log(date.getMonth());    //0-11     显示的时候要+1: 1-12
    console.log(date.getFullYear()); //
    console.log(date.getDay());       //0-6
    console.log(date.getHours());      //0-23
    console.log(date.getMinutes());    //0-59
    console.log(date.getSeconds());    //0-59
    console.log(date.toLocaleString()); //返回的是我想要的时间: 2019/11/15 下午8:36:22
</script>

Math内置对象

<script>
    console.log(Math.random()); //范围: 猜到开头, 猜不到结尾.  从0~1之间的随机数
    console.log(200+Math.random()*(500-200)); //生成一个  200~500 之间的随机数
    console.log(Math.min(45,66));
    console.log(Math.max(45,66));
    console.log(Math.floor(1.234)); // 1; 向下取整
    console.log(Math.ceil(1.234));  // 2; 向上取整
</script>

Function函数

<script>
    add(6,9);                //调用函数: 和python不同的是, 调用时可以在任何地方(可以在定义函数之前调用)
    function add(x,y) {     //声明函数
        alert(x+y);
    }
    add(5,6);               //调用函数:
</script>

<script>
    function add(x) {
        console.log(x);                 //形参和实参的数量不用一一对应
        console.log(arguments);         //arguments是个伪数组: 所有的实参元素都会传到这个伪元素里
        // arguments.push('wukong');    //伪数组不能用数组函数的功能, 但是可以使用遍历
        // console.log(arguments);
        console.log(arguments[1]);      //有数组的下标和长度
    }
    add('bajie',123)
</script>

2.DOM: Document object model: 文档对象模型

<script>
    document.write('<h1>八戒</h1>')  //js可以把写的标签或文本渲染到浏览器上
</script>

cocument对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(document);                  //获取的是文档对象(整个网页的文档)
        console.dir(document);
        console.log(document.documentElement);  //获取html部分
        console.log(document.body);             //擦, body是null, 获取不到 ? 因为js不能随便写,和之前说的不一样: 不是, 是因为之前的操作确实是可以随便写
        window.onload = function() {            //如何解决: 方式二,使用入口函数:窗口加载: 先是文档加载, 图片是后加载的, 最后才能执行js
            console.log(document.body);         //方式二: 有个问题; 如果网络卡顿, 图片没加载完, 那么你点击图片就没有反应(也就是说js点击动作不会生效),所以请看方式三
        };                                      //方式二: 有另外一个问题: 当有多个"窗口加载"时,有事件覆盖现象,即只有最后一个"窗口加载"被执行
                                                //异步: 不等待, 下面的代码不会等上面的代码执行完采取执行.(所以"窗口加载"这个函数是异步函数)
        //函数对象: 就是一个匿名函数,然后赋值给一个变量
        var add = function () {
            alert(123321);
        };
        add();
    </script>
</head>
<body>
    <script>
        console.log(document.body);           //如何解决: 方式一, 写到body部分的最后面, 以及之后的位置
    </script>
</body>
</html>

事件三步走, 单击事件

<html lang="en">
<head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" class="box"></div>
    <script>
        //需求: 默认盒子200*200 红色, 点击盒子让盒子变成绿色
        //事件三步走: 1.获取事件源(获取你的标签) 2.事件(比如点击) 3.事件驱动程序
        //1.获取事件源, 下面介绍的是获取DOM的三种方式
        var objDiv = document.getElementById('box');
        console.log(objDiv);
        var objDiv2 = document.getElementsByClassName('box')[0];   //Elements 是负数, 获取出来的是伪数组, 可以加下标取某个标签如[0]
        console.log(objDiv2);
        var objDiv3 = document.getElementsByTagName('div');
        console.log(objDiv3[0]);
        //还有一种获取DOM的方式, 现在基本不用了
        var objDiv4 = document.querySelector('.box');   //按类名获取标签: 多个类名时, 只能获取第一个标签
        var objDiv5 = document.querySelector('#box');   //按id获取标签
        //2.事件
        //(onclick: 点击鼠标)
        objDiv.onclick = function () {      // 函数里的代码默认不会被执行,只有(事件)点击的时候才会执行
            //3.驱动程序
            console.log(objDiv.style);   
            objDiv.style.backgroundColor = "green";  //当这句执行时, 样式被加到了行内标签里, 优先级最高
        }
    </script>
</body>
</html>

驱动程序里: 简单的流程控制

<html lang="en">
<head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" class="box"></div>
    <script>
        //不停地点击: 在红色和绿色之间交替变换
        var isRed = true;
        var objDiv = document.getElementsByTagName('div')[0];
        objDiv.onclick = function () {
            if(isRed){
                objDiv.style.backgroundColor = 'green';
                isRed = false;
            }else{
                objDiv.style.backgroundColor = 'red';
                isRed = true;
            }
        }
    </script>
</body>
</html>

盒子的显示与隐藏: 方式一: 使用display实现

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box"></div>
    <script>
        var objBtn = document.getElementById('btn');
        var objDiv = document.getElementById('box');
        var isShow = true;
        objBtn.onclick = function () {
            if(isShow){
                objDiv.style.display = 'none';
                isShow = false;
                this.innerText = '显示';          //this相当于python中的self, innerText: 设置文本内容
            }else{
                objDiv.style.display = 'block';
                isShow = true;
                this.innerText = '隐藏';
            }
        }
    </script>
</body>
</html>

盒子的显示与隐藏: 方式一: 使用display实现: 获取事件源的简化代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box"></div>
    <script>
        // var objBtn = document.getElementById('btn');
        // var objDiv = document.getElementById('box');
        //简化代码: 获取事件源, 可以用函数封装起来, 返回事件源对象
        function $(id){                                    //$是函数名, 理论上可以是任何合法的标识名, 只是习惯用$
            return document.getElementById(id);
        }
        var isShow = true;
        $('btn').onclick = function () {
            if(isShow){
                $('box').style.display = 'none';
                isShow = false;
                this.innerText = '显示';
            }else{
                $('box').style.display = 'block';
                isShow = true;
                this.innerText = '隐藏';
            }
        }
    </script>
</body>
</html>

盒子的显示与隐藏: 方式二: 提前写好隐藏的样式, 用标签属性添加隐藏样式的类名(实际和方式一一样也是使用的display属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box" class="app"></div>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        $('btn').onclick = function () {
            console.log($('box').className);    //这里用到的是标签的属性: .className; 刚刚用到的是标签样式属性.style.
            $('box').className += ' active';    //因为 = 是赋值, 会把className之前原有的属性覆盖掉, 所以用 += , ' active':注意value前面有个小技巧: 有个空格
        }
    </script>
</body>
</html>

标签属性的简单介绍

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <button id="btn">隐藏</button>
    <img src="" alt="" id="myImg">
    <script>
        function $(id){
            return document.getElementById(id);
        }
        $('btn').onclick = function () {
            $('myImg').src = './guanggao.jpg';
            $('myImg').alt = 'guanggao';
        }
    </script>
</body>
</html>