JavaScript入门

JavaScript

基础

输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

prompt相当于python的input,返回输入的内容（也是字符串）

var name prompt('请输入信息');

变量

变量声明没有数据类型限制，只要是变量就用var，可以不同类型之间赋值（JS是动态语言 变量的数据类型是可以变化的）,多个变量用逗号隔开

与其他语言基本相同，变量的属性基本相同。

var age = 20,
    name = 'Tiany',
    height = 182;

对于没有赋值或者没有声明的变量，没法使用。

数据类型

一些JS的数据类型：

数字型 Number

可以赋值二、八、十、十六进制数

只需要记住，在JS中八进制前面加0，十六进制前面加 0x

JavaScript中数值的最大和最小值

• 最大值：Number.MAX_VALUE，这个值为：

  1.7976931348623157e+308

• 最小值：Number.MIN_VALUE，这个值为：5e-32

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

数字型三个特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN

//表示方式
alert(Number.MAX_VALUE*2);	//无穷大
alert(Number.MIN_VALUE*2);	//无穷小

• Infinity ，代表无穷大，大于任何数值

• -Infinity ，代表无穷小，小于任何数值

• NaN ，Not a number，代表一个非数值

isNaN()函数判断是否为数字 返回true false

字符串

String 单双引号都行

字符串长度：检测获取用length函数

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

字符串拼接与python相同

获取变量数据类型

typeof 变量名

var num = 1;
console.log(typeof num);

转化为字符串型：

转化为数字型

可以去单位（例如px）

隐式转换可以将字符串自动转成数字型

转化为布尔型：

只有一个函数：Boolean()

• 代表空、否定的值会被转换为false,如""、0、NaN、null、undefined
• 其余值都会转换为true

算数运算符

这里简单说几个

比较运算符：JavaScript多个’=‘和’!’ 代表是否全等 要求值和 数据类型都一致

逻辑运算符：这几个 和C一样

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

前边的有假 后边的就不算了

前边的有真 后边的就不算了

赋值运算符

直接、加等、减等、乘 除 取模后赋值

JavaScript流程控制

就是不同结构，顺序、分支、循环

分支

分支：if语句格式

//双分支
if(条件表达式){
	//执行语句1
} else {
    //执行语句2
}

//多分支
if(条件表达式){
	
} else if {
	//执行语句1
} else if {
    //执行语句2
} else {
    //执行语句3
}

三目运算：表达式1 ? 表达式2 : 表达式3;

switch分支流程

switch( 表达式 ){
	case value1: 
        // 表达式 等于 value1 时要执行的代码
		break;
	case value2: 
        // 表达式 等于 value2 时要执行的代码
		break;
	default: 
        // 表达式 不等于任何一个 value 时要执行的代码 
}

case是全匹配

注意： 执行 case 里面的语句时，如果没有 break **，则继续执行下一个 ** case 里面的语句。(不管匹不匹配)

循环

JavaScript和C的语法完全一致，不用再多赘述了

for while do-while 都有

continue 和 break 用法也都一样

数组

JavaScript的创建方式有：

1.利用 new 创建

var arr = new Array();

2.用数组字面量创建 [] (常用)

var arr = [];
var arr1 = [1,2,'tiany',true] //可多种数据类型放一起

遍历数组直接也可以直接循环索引。

提取数组长度：arr.length

对以下数组追加元素:

var arr1 = [1,2,3,'tiany']
arr1[4] = '1'

函数

函数声明与调用

1. 声明

   function 函数名 () {
   	// 函数体
   }
   

   关键字就是 function

   第二种命名方式：

   var fun = function(aru) {
       console.log('我是函数表达式');
       console.log(aru);
   }
   fun('tiany');
   

   也就是代表着 以变量名形式定义 所以"fun"也可作为值 可进行赋值操作。

2. 调用就直接

   //函数名();
   SayHello();
   

含参函数：

function 函数名(形参1,形参2,...) {
    //函数体
}
函数名(实参1,实参2,...);

返回值：

function getResult() {
    return 666;
}
num = getResult();
//num = 666

有返回返回返回值，没返回返回undefined

arguments的使用

注：函数体内部写

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

function fn() {
    console.log(arguments);	// 里面存储了所有传递过来的参数(实参)
    //输出的是Arguments(3)[.....] 3是元素个数
}
fn(1,2,3);
//伪数组 并不是真正意义上的数组
//1. 具有数组的 length 属性
//2. 按照索引的方式进行储存的
//3. 它没有真正数组的一些方法 pop() push() 等

function getMax() {
    var max = arguments[0];
    for (var i = 1;i < argumnets.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(1,2,3,4,5));
//简单来说就是直接对参数进行操作

预解析

1. js引擎在运行js时分为两步：预解析、代码执行
2. 预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
3. 代码执行：从上往下依次执行

预解析的变量提升和函数提升分别把变量和函数声明提升到最前面（不提升赋值操作，只有变量，故一般不定义的话会显示undefined 但函数可以随便放）

JS对象

JS的对象和C++、python的一样 属性方法都有

创建对象方式

三种方法：

1. 第一种

   //利用对象字面量创建对象{}
   var obj = {}; //创建空对象
   var obj = {
       uname: '张三',
       age: 20,
       sex: '男',
       sayHello: function() {
           console.log('Hello');
       }
   }
   //1、 里面的属性或者方法我们采取键值对的形式 属性名：属性值
   //2、多个属性或者方法中间用逗号隔开的
   //3、方法冒号后面跟的是一个匿名函数
   //(1).使用对象 调用对象就也是 对象名.属性名（方法名）
   console.log(obj.uname);
   //(2).还有一种 对象名['属性名']
   console.log(obj['age']);
   //方法：
   obj.sayHello();
   

2. 第二种

   //利用 new Object 创建对象
   var obj = new Object();
   obj.uname = '张三';
   obj.age = 20;
   obj.sex = '男';
   obj.sayHello = function() {
       console.log('Hello');
   }
   //等号赋值方式规定属性
   

3. 第三种

   //构造函数
   //使用前边两种方式创建只能一次只创建一个对象
   //就是将属性值封装到函数中，每次都可创建具有相同属性的对象 调用方式为：new 构造函数名();
   function Star(uname,age,sex) {
       this.uname = uname;
       this.age = age;
       this.sex = sex;
       this.SayHello = function(massage) {
           console.log(massage)
       }
   }
   var zhang = new Star('张三',20,'男');
   //调用必须要用new 名字();
   

new的执行过程

遍历对象：

for (var k in obj) {
    console.log(k);
    console.log(obj[k]);
}
//和遍历字典类似，javascript的遍历键值对的方式用for in 这里k就是键

内置对象

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)

内置对象最大优点就是帮助我们快速开发

JavaScript提供了多个内置对象:Math、Date、Array、String等

查阅MDN文档

直接查MDN网站即可：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

使用内置对象时，不需要new来调用，直接使用里面的属性和方法即可

例：

console.log(Math.PI); //属性 圆周率
console.log(Math.abs(-1)) //绝对值 这里也支持隐式转换（字母不行）
console.log(Math.ceil(1.1)) //向上取整 2
console.log(Math.floor(1,1)) //向下取整 1
console.log(Math.round(1.5)) //四舍五入 2 其他数字都是四舍五入，但是.5特殊 它往大了取
console.log(Math.max(1,2,3)); //方法 最大值
//对于可以没有参数的方法,返回值时-Infinity
console.log(Math.random()) // 返回一个随机的小数

随机整数

function getRandom(min,max) {
	return Math.floor(Math.random(max-min+1)) + min;
}
console.log(getRandom(0,10));

格式化年月日

// 格式化日期 年月日 
            var date = new Date();
            console.log(date.getFullYear()); // 返回当前日期的年  2019
            console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
            console.log(date.getDate()); // 返回的是 几号
            console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            alert('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

格式化时分秒

// 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());

获取Date总的毫秒数(时间戳)

// 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

倒计时计算：

        // 倒计时效果
        // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
        // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        // 转换公式如下： 
        //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
        //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
        //  m = parseInt(总秒数 /60 %60 );     //   计算分数
        //  s = parseInt(总秒数%60);            //   计算当前秒数
        function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2019-5-1 18:00:00'));
        var date = new Date();
        console.log(date);

数组排序：

1. 翻转数组

   var arr = ['pink', 'red', 'blue'];
           arr.reverse();
           console.log(arr);
   

2. 数组排序(冒泡排序)

   var arr1 = [13, 4, 77, 1, 7];
           arr1.sort(function(a, b) {
               //  return a - b; 升序的顺序排列
               return b - a; // 降序的顺序排列
           });
           console.log(arr1);
   

获取元素索引：

• arr.indexOf(element,index) 从头部开始寻找第一个元素的索引 未找到就返回-1 第二个参数是从第几个元素开始
• arr.lastIndexOf() 从尾部开始寻找第一个符合的元素的索引

数组转换为字符串：

1. toString() 将数组直接转换为字符串

   var arr = [1, 2, 3];
           console.log(arr.toString()); // 1,2,3
   

2. join(分隔符)

   var arr1 = ['green', 'blue', 'pink'];
           console.log(arr1.join()); // green,blue,pink
           console.log(arr1.join('-')); // green-blue-pink
           console.log(arr1.join('&')); // green&blue&pink
   

字符串不可变，所以不能大量的拼接字符串

根据位置返回字符

// 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));
        // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); // 97
        // 3. str[index] H5 新增的
        console.log(str[0]); // a

字符串操作方法：

// 字符串操作方法
        // 1. concat('字符串1','字符串2'....)
        var str = 'andy';
        console.log(str.concat('red'));

        // 2. substr('截取的起始位置', '截取几个字符');
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

其他几个

// 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));
        // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

        // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));

简单数据类型和复杂数据类型

// 简单数据类型 null  返回的是一个空的对象  object 
        var timer = null;
        console.log(typeof timer);
        // 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 
        // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
        // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据

复杂数据类型传参

// 复杂数据类型传参
        function Person(name) {
            this.name = name;
        }

        function f1(x) { // x = p
            console.log(x.name); // 2. 这个输出什么 ?  刘德华   
            x.name = "张学友";
            console.log(x.name); // 3. 这个输出什么 ?   张学友
        }
        var p = new Person("刘德华");
        console.log(p.name); // 1. 这个输出什么 ?   刘德华 
        f1(p);
        console.log(p.name); // 4. 这个输出什么 ?   张学友

Web APIs

Web APIs是js的应用，大量使用JS基础语法做交互效果

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问的一组例程的能力，而又无需访问源码，或理解内部工作的机制

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

DOM就是文档对象模型，是处理（HTML或者XML）一类的标准编程接口

通过已经定义的一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

DOM树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM把以上内容都看作是对象

获取元素

获取页面中的元素可以使用以下几种方式：

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

ID：

使用getElementById()方法可以获取带有ID的元素对象(单个)

document.getElementById('id'); //参数是大小写敏感的字符串

返回的是找到的element对象，没找到就返回null

记得查询元素的时候它是放在标签下边的

使用console.dir()可以打印获取的元素对象，可以查看对象里面的属性和方法

根据标签名获取：

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名'); 
element.getElementsByTagName('标签名'); //还可以获取某个元素(父元素)内部所有指定标签的子元素，父元素必须是指定的单个元素

不管页面中有几个，返回的都是伪数组形式

注：因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。 得到元素对象是动态的

根据HTML5新增的方法获取：

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回所有对象的集合

注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

获取特殊元素(body,html)

document.body //返回body元素对象
document.documentElement // 返回html元素对象

事件基础

1、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

2、事件的三要素

1. 事件源 （谁）
2. 事件类型 （什么事件）
3. 事件处理程序 （做啥）

var btn = document.getElementById('btn');
btn.onclick = function() {
 alert('你好吗'); 
};

3、执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

常见的鼠标事件：

操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内 容 、属性等。注意以下都是属性

1、改变元素内容

element.innerText //从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML //起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2、常用元素的属性操作

1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title

3、表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

type、value、checked、selected、disabled

4、样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式

1. element.style 行内样式操作
2. element.className 类名样式操作

注意：

1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
3. className 会直接更改元素的类名，会覆盖原先的类名

操作元素总结

操作元素是 DOM 核心内容

更改页面背景案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

自定义属性的操作

1、获取属性值

• element.属性 获取属性值。
• element.getAttribute(‘属性’);

区别

• element.属性 获取内置属性值（元素本身自带的属性）

• element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性

2、设置属性值

• element.属性 = ‘值’ 设置内置属性值。
• element.setAttribute(‘属性’, ‘值’);

区别

• element.属性 设置内置属性值
• element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）

3、移除属性

• element.removeAttribute(‘属性’);