python之路 JavaScript基础

一、JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二、组成部分

ECMAScript，描述了该语言的语法和基本对象

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

三、一些简单案例

注：显示结果请自行测试

1.简单的html输出

<script>

    document.write('<h1>我是你耀哥</h1>')

</script>

此脚本请在开头测试，如果在尾部测试，那么会覆盖整个html页面

2.简单的点击按钮弹出提示

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script>

    function func(){

        alert('欢迎点击按钮') #alert是JavaScript用来测试用的函数 可以在浏览器中弹出信息

    }

</script>

</head>

<body>

    <button value="按钮" onclick="func()">按钮</button> #当我点击按钮的时候 onclick事件调用函数

</body>

</html>

当我点击按钮的时候，整个页面会弹出欢迎点击按钮信息

3.改变页面元素内容

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script>

    function  func(){

        var x = document.getElementById('demo');   #获取id

        x.innerHTML='我被改变了';                       #innerHTML是用来改变标签中的内容

    }

</script>

</head>

<body>

<p id="demo">我的是你耀哥</p>

<button value="按钮" onclick="func()">按钮</button> #onclick事件调用func函数

</body>

</html>

4.点击改变指定div的背景颜色

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>       #定义样式 高宽100px；颜色是aquamarine；

    #demo{

        width:100px;

        height:100px;

        background-color:aquamarine;

    }

</style>

</head>

<body>

    <div id="demo" onclick="func()"></div>

    <script>

        function func(){

            var x = document.getElementById('demo');    #获取id

            x.style.backgroundColor='gray';             #使用style函数改变背景颜色

    </script>

</body>

</html>

5.验证表单，是否输入值

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form>

<p>用户名：</p><input id="demotext" type="text"/>

<p>密 码：</p><input  id="demopass" type="password"/></br>

<button  onclick="func()">提交</button>

</form>

<script>

function func(){

    var x = document.getElementById('demotext').value;

    if(x.length==0){

        alert('用户名不能为空');

    }else{

        alert(x);

    }

    var y = document.getElementById('demopass').value;

    if(y.length==0){

        alert('密码不能为空');

    }else{

        alert(y);

    }

}

</script>

</body>

</html>

四、存在方式

HTML中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

1.head中存放

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

    alert('我是head中的脚本')

</script>

</head>

<body>

</body>

</html>

2.body中存放

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script>

    alert('我是body中的脚本')

</script>

</body>

</html>

3.引入外部js文件

<!DOCTYPE html>

<html lang="en">

<body>

<script src="外部的js文件.js"></script>

</body>

</html>

注：
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

五、基本语法

1.注释

单行注释 使用 “//”

//            var x = document.getElementById('demo');

多行注释 使用 “/*和*/结尾”

 /*

function func(){

    var x = document.getElementById('demotext').value;

    if(x.length==0){

        alert('用户名不能为空');

    }else{

        alert(x);

    }*/

2.变量

变量定义要求：

1）.变量必须以字母开头
2）.变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3）.变量名称对大小写敏感（y 和 Y 是不同的变量）

变量声明：

var 变量名 = 赋值

var 定义的是局部变量 js中用的最多的方法

如果不加var 那么是全局变量。js用的较少。

var a=1,b=2,c=3,

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。

3.数据类型

1）.数字类型

var a = 1；

var b = 1.1；

2）.布尔类型

布尔（逻辑）只能有两个值：true 或 false。

var x=true

var y=false

3）数组类型

第一种：

var arr=new Array();

arr[0]="mayun";

arr[1]="mahuateng";

arr[2]="liuyao";

第二种：

var arr=['mayun','mahuateng','liuyao'];

第三种：

var arr=new Array('mayun','mahuateng','liuyao');

用for循环打印数组内容

<script>

    var arr=new Array();

    arr[0]="mayun";

    arr[1]="mahuateng";

    arr[2]="liuyao";

    for(i=0;i<arr.length;i++){

        alert(arr[i])

    }

</script>

4）undefined

undefined表示未定义值

5）null类型

null是一个特殊值

5)字符串类型

var name = 'liuyao';

var name = String("liuyao");

var name_age = String(18);

6)字典

var items = {'k1': v2, 'k2': 'v2'}

4.运算符

运算符 = 用于赋值。

运算符 + 用于加值。

1.算术运算符

2.赋值运算符

案例:

字符串拼接打印

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

    txt1="liu yao";

    txt2="  da sha bi";

    txt3=txt1+txt2;

    alert(txt3)

</script>

</body>

</html>

3.比较运算符

4.逻辑运算符

4.条件语句

1）if else

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行

语法：

if (条件)

{

只有当条件为 true 时执行的代码

}

或者：

if (条件){

只有当条件为 true 时执行的代码

}

案例：

<script>

var num2 = 3

if(num2>num1){

    alert('num1大于num2');

}else{

    alert('num2小于num1');

}

</script>

2) if else if else

语法：

if (条件 1)

{

当条件 1 为 true 时执行的代码

 }

else if (条件 2)

{

当条件 2 为 true 时执行的代码

}

else

{

当条件 1 和 条件 2 都不为 true 时执行的代码

}

案例：

<script>

var num = 5;

if(num>6){

    alert('num大于6');

}else if(num<7){

    alert('num小于7');

}else{

    alert('以上都不对');

}

3)switch语句

switch 语句来选择要执行的多个代码块的其中一个。

语法：

switch(n)

{

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

n   与 case 1 和 case 2 不同时执行的代码

}

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

案例：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<input  id="demo" type="text"/>

<button  onclick="func()">数字查询</button>

<script>

    function func(){

        var x = document.getElementById('demo').value;

        var y = Number(x);

        switch(y){

            case 1:

                alert('你输入的是1');

                break;

            case 2:

                alert('你输入的是2');

                break;

            case 3:

                alert('你输入的是3');

                break;

            default:

            alert('你输入的数不存在');

        }

    }

</script>

</body>

</html>

4）循环语句

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

语法：

for (语句 1; 语句 2; 语句 3)

{

 被执行的代码块

}

语句 1 在循环（代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

案例：

循环打印十个数字

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

    for(i=0;i<10;i++){

        document.write("<h1>"+i+"</h1>");

    }

</script>

</body>

</html>

循环数组打印内容

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

    var key = ['1','2','3','4','5'];

    for(i in key){

        document.write('<h1>'+i+'</h1>');

    }

</script>

</body>

</html>

案例：循环数组

var names = ["liuyao", "mayun", "aoteman"];

// 数组：方式一

for(var i=0;i<names.length;i++){

    console.log(i);

    console.log(names[i]);

}

// 数组：方式二

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

var names = {"name": "liuyao", "age": 18};

// 字典：方式一

for(var index in names){

    console.log(index);

    console.log(names[index]);

}

5）while语句

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

语法：

while (条件)

{

需要执行的代码

}

案例：

循环打印

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

    var i = 1;

    while(i<5){

        document.write('<h1>'+i+'</h1>');

        i++;

    }

</script>

</body>

</html>

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

语法：

do

 {

 需要执行的代码

 }

while (条件);

6）break和Continue 语句

break 语句可用于跳出循环。如果之后有代码，那么继续执行：

案例：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script>

    for (i=0;i<10;i++)

    {

        if (i==3)

        {

            document.write('break跳出了');

        break;

    }

        document.write('<h1>'+i+'</h1>');

    }

</script>

</body>

</html>

Continue 语句
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

案例：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

for (i=0;i<10;i++)

{

    if (i==3)

    {

        document.write('break跳出了');

    continue;

}

    document.write('<h1>'+i+'</h1>');

}

</script>

</body>

</html>

5.异常操作

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

语法：

try

{

 //在这里运行代码

 }

catch(err)

 {

//在这里处理错误

}

案例：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

try {

    adddlert("我是刘耀");

    }

catch(err){

    alert('错误')

}

</script>

    </body>

</html>

6.函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

案例：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<button onclick="func()">点击按钮执行函数</button>

<script>

function func(){

    alert('func的函数')

}

</script>

</body>

</html>

语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

这里是要执行的代码

}

注：提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，

    并且必须以与函数名称相同的大小写来调用函数。

不带参数函数：

function func(){

    alert('func的函数')

}

自执行函数：

(function(arg){

    alert(arg);

})('123');

调用带参数函数：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<button onclick="func(1,2)">点击执行</button>

<script>

    function func(num1,num2){

        alert(num1);

        alert(num2);

    }

</script>

</body>

</html>

带有返回值的函数：

在使用 return 语句时，函数会停止执行，并返回指定的值。

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

function func()

{

    var x = 5;

    return x;

}

var me = func();

alert(me);

</script>

</body>

</html>

7.js标准库

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数..

1.数组对象

创建一个数组：

var arr = ['liu','yao','18']

length属性可设置或返回数组中元素的数目。

<script>

var arr = ['liu','yao','18'];

num = arr.length;

alert(num);

</script>

结果：3

constructor 属性返回对创建此对象的数组函数的引用。

<body>

<script>

var arr = ['liu','yao','18'];

con = arr.constructor;

alert(con);

</script>

concat()
方法用于连接两个或多个数组。

增加新元素

<script>

var arr = ['liu','yao','18'];

document.write(arr.concat('1','2','3'));

</script>

两个数组链接

<script>

var num1 = ['1','2','3'];

var num2 = ['4','5','6'];

document.write(num1.concat(num2));

</script>

join()方法用于把数组中的所有元素放入一个字符串。可以按照分隔符存放

<script>

var arr = new Array(3);

arr[0] = "liu";

arr[1] = "yao";

arr[2] = "yao";

document.write(arr.join())

</script>

按照分隔符

<script>

var arr = new Array(3);

arr[0] = "liu";

arr[1] = "yao";

arr[2] = "yao";

document.write(arr.join('----'))

</script>

显示结果：

liu----yao----yao

pop()删除并返回数组的最后一个元素

<script>

var num = ['liu','yao','18'];

document.write(num.pop())

</script>

push()向数组的末尾添加一个或更多元素，并返回新的长度。

<script>

var num = ['liu','yao','18'];

document.write(num.push('22102107'))

</script>

reverse()颠倒数组中元素的顺序。

<script>

var num = ['liu','yao','18'];

document.write(num.reverse())

</script>

shift() 删除并返回数组的第一个元素

<script>

var num = ['liu','yao','18'];

document.write(num.shift())

</script>

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

<script>

    var arr = ['1','2','3'];

    alert(arr.unshift('4'));

</script>

slice()方法用于提取原数组的一部分，返回一个新数组，原数组不变。

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。
如果省略第二个参数，则一直返回到原数组的最后一个成员。

<script>

var arr = ['1','2','3','4','5','6','7'];

    alert(arr.slice(1,3));

</script>

splice方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员。它的返回值是被删除的元素。该方法会改变原数组。

splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

// 格式

arr.splice(index, count_to_remove, addElement1, addElement2, ...);

<script>

var arr = ['1','2','3','4','5','6','7'];

alert(arr.splice(1,2,a,b));

</script>

sort() 对数组的元素进行排序

var arr = ['1','2','3'];

alert(arr.sort())

valueOf()方法返回数组本身。

var a = [1, 2, 3];

a.valueOf();

toString 方法返回数组的字符串形式。

var a = [1, 2, 3];

a.toString() 

var a = [1, 2, 3, [4, 5, 6]];

a.toString()

2.字符串对象

创建

var s = new String("abc");

new String("abc")

将任意类型的值转为字符串。

String(true)

String(5)

fromCharCode()。该方法根据Unicode编码，生成一个字符串。

<script>

alert(String.fromCharCode(104, 101, 108, 108, 111));

</script>

charAt方法返回一个字符串的给定位置的字符，位置从0开始编号。

<script>

var arr = 'abcde';

alert(arr.charAt(1));

</script>

charCodeAt方法返回给定位置字符的Unicode编码（十进制表示）。

<script>

var arr = 'abcde';

alert(arr.charCodeAt(1));

</script>

concat方法用于连接两个字符串。

<script>

var s1 = 'abc';

var s2 = 'def';

alert(s1.concat(s2))；

</script>

substring()方法的第一个参数表示子字符串的开始位置，第二个位置表示结束结果。因此，第二个参数应该大于第一个参数。如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。

<script>

var arr = 'abcde';

alert(arr.substring('1','2'));

</script>

substr方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。

<script>

var arr = 'abcdefghi';

alert(arr.substr('2','5'));

</script>

slice方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置。与substring方法不同的是，如果第一个参数大于第二个参数，slice方法并不会自动调换参数位置，而是返回一个空字符串。

<script>

var arr = 'abcdefghi';

alert(arr.slice('2','5'));

</script>

indexOf 和 lastIndexOf 方法

indexOf从字符串头部开始匹配，lastIndexOf从尾部开始匹配。

<script>

var arr = 'abcdefghi';

alert(arr.indexOf('b'));

</script>

<script>

var arr = 'abcdefghi';

alert(arr.lastIndexOf('h'));

</script>

toLowerCase 和 toUpperCase 方法

toLowerCase用于将一个字符串转为小写，toUpperCase则是转为大写。

<script>

var arr = 'liuyao';

alert(arr.toUpperCase());

</script>

<script>

var arr = 'LIUYAO';

alert(arr.toLowerCase());

</script>

trim()方法去除空格

<script>

var x = ' liuyao ';

document.write('|');

document.write(x);

document.write('|');

document.write(x.trim());#去除两边空格

</script>

查找和替换
match方法

match方法返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。返回数组还有index属性和input属性，分别表示匹配字符串开始的位置（从0开始）和原始字符串。

<script>

var matches = "cat, bat, sat, fat".match("at");

document.write(matches);

document.write(matches.index);

document.write(matches.input);

</script>

search方法

search方法的用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。

<script>

var matches = "cat, bat, sat, fat".search("at");

document.write(matches);

</script>

replace方法

replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。

<script>

var matches = "cat, bat, sat, fat".replace("at","liuyao");

document.write(matches);

</script>

split方法

split方法按照给定规则分割字符串，返回一个由分割出来的各部分组成的新数组。

<script>

var matches = "cat|bat,|sat|fat".split("|");

document.write(matches);

</script>

Date对象

提供的日期和时间的操作接口。它有多种用法。

Date对象可以直接调用，返回一个当前日期和时间的字符串

<script>

 document.write(Date());

</script>

等待更新。。。

JSON

JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON中，一共就这么几种数据类型：

number： 和JavaScript的number完全一致；

boolean：就是JavaScript的true或false；

string：就是JavaScript的string；

null：  就是JavaScript的null；

array： 就是JavaScript的Array表示方式——[]；

object：就是JavaScript的{ ... }表示方式。

1.序列化

<script>

    var info = {

    name: '刘耀',

    age: 18,

    gender: true,

    height: 1.65,

    grade: null,

    'middle-school': 'IT',

    skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

    document.write(JSON.stringify(info));

</script>

结果：

{"name":"刘耀","age":18,"gender":true,"height":1.65,"grade":null,"middle-school":"IT","skills":["JavaScript","Java","Python","Lisp"]}

2.反序列化

JSON.parse('[1,2,3,true]');

JSON.parse('{"name":"刘耀","age":18}');

JSON.parse('true');

JSON.parse('123.45');

8.面向对象编程

面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但 JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。

基于Object对象

<script>

var person = new Object();

person.name = 'liuyao';

person.age = 18;

person.getName = function(){

    return this.name;

};

var x = person.name;

alert(x);

</script>

1.工厂模式创建

<script>

function createPerson(name, age, job) {

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.getName = function () {

        return this.name;

    };

    return o;//使用return返回生成的对象实例

}

var x = createPerson('liuyao','18','IT'); #实例化

alert(x.name);

</script>

注：创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，
因为创建对象都是使用Object的原生构造函数来完成的。

2、构造函数模式

<script>

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = function () {

        return this.name;

    }

}

obj = new Person('liuyao','age','job');

document.write(obj.name+'</br>');

document.write(obj.age+'</br>');

document.write(obj.job+'</br>');

</script>

用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

创建一个对象

将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）

执行构造函数的代码

返回该对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .modal{

            /*display: none;*/

            width:400px;

            height:400px;

            background-color:gainsboro;

            position: fixed;

            top:50%;

            left: 50%;

            margin-left:-200px;

            margin-top:-200px;

        }

        .shadow{

            /*display: none;*/

            background-color:black;

            position: fixed;

            top:0;

            right:0;

            bottom:0;

            left:0;

            opacity:0.6;

        }

    </style>

</head>

<body>

    <input  onclick="preview()" type="button" value="添加" />

    <div id="a1" class="shadow" style="display: none;"></div>

    <div id="a2" class="modal" style="display: none;">

        <input type="text" />

        <input type="text" />

        <input type="text" />

        <input type="text" />

        <input type="submit" value="确定" />

        <input type="button" onclick="qx()" value="取消" />

    </div>

    <script>

        function preview(){

            if(document.getElementById("a1").style.display=='none')

                { document.getElementById("a1").style.display='';

                document.getElementById("a2").style.display='';}

            }

        function qx(){

            if (document.getElementById("a1").style.display=='')

            {document.getElementById("a1").style.display='none';

            document.getElementById("a2").style.display='none';}

        }

    </script>

</body>

</html>

对话框