JavaScript初识

一段脚本，可以在网页上执行。

JavaScript是一门最流行的脚本语言。

一、hello world

让网页弹出hello world
方式一：
在html的script标签中写alert('hello wrld');运行即可

<!--方式二：引入js代码-->
    <script src="qj.js"></script>

alert('hello world');

效果同上。

二、语法

1.定义变量 ：

变量类型 变量名 = 变量名；

var num = 1;

所有变量都用var + 变量名 = 变量值 的格式。

2.条件控制

if(2>1)
{
	alert("true");
}
else if(...)
{
	...;
}
else
{
	...;
}

与： &&
或：||

3.关于debug

在开发者工具中使用console可以直接输入js代码运行
sources中可以进行debug调试：

点一下即可设置断点，然后按F5就开始调试了
效果如下：

network是请求到的网络流

application是存到浏览器里面的一些数据比如cookies等

4.数据类型

所有的变量都要用var关键字来定义。

数值、文本、图形、音频、视频…

• number
  不区分小数和整数

123 // 整数
123.1 // 浮点数
1.12e3 // 科学计数法
-99 // 负数
NaN // not a number 不是一个数
Infinity // 表示无穷打

• 字符串

'abc'

• 布尔值

true
false

• 数组
  一系列相同类型的对象?，JavaScript可没有要求。

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

• 对象是一个大括号，数组是中括号

var person = {
	name = "zhuang",
	age = 6,
	sex = man
};
// 每个属性之间使用逗号隔开，最后一个不用
// person.name就可以取属性

4.0数据类型详看

4.1字符串

html:

    <script>
        'use strict';
        console.log("a");
        console.log("\'\'");//正常字符串使用单引号或者双引号包裹，想要输出一些特殊，或则输出单引号或双引号就使用转义字符
    </script>

\ue2d \u####Unicode字符
\x41 ascii字符
``之间(tab上面的“飘”号)可以使用多行字符串

模板字符串：

let name = 'xiaohong';
let msg = `你好呀,${name}`;

字符串长度str.length
字符串具有不可变性
字符串大小写转换

    <script>
        'use strict';

        var student = "xiao_hong"
        console.log("a");
        console.log("\'\'");//正常字符串使用单引号或者双引号包裹，想要输出一些特殊，或则输出单引号或双引号就使用转义字符
        console.log(student.toUpperCase())
        student.toLowerCase()
        console.log(student)
    </script>

控制台输出的结果：

返回某个字符在字符串中的index：stduent.indexOf('x')
就表示’x’在名字为student的字符串中的index

.substring:

student.substring(1,3)//从字符串第一个字符截取到第二个字符

4.2数组

var arr = [1,2,3,4,5] ; // array可以包含任意的数据类型

1.长度

arr.length

给其赋值，会使数组大小变化

2.indexOf通过元素获得下标索引值

arr.indexOf("2");得到的就是元素"2"在arr中的下标

3.slice()截取数组的一部分，返回一个新数组。

var arr = ["a","b","c","d","e","f"];
arr.slice(3); // 的结果是["d","e","f"]
arr.slice(1,3);// 的结果是["b","c"] 截取原则左闭右开

4.push pop—尾部

arr.push("a","b"); // 向arr的尾部压入a b
arr.pop; // 从arr的尾部弹出最尾部的元素

5.unshift() shift()

unshift():压入到头部
shift():从头部删除一个元素

6.排序

arr.sort()

7.元素反转

arr.reverse()

8.拼接

arr.concat([1,2,3]); // 将1,2,3拼接到arr数组的尾部返回一个新数组，而原arr数组并没有变化！

9.连接符join

打印出拼接数组，使用特定的字符连接
var arr = [1,2,3];
arr.join("-");// 会返回 "1-2-3"

10.多维数组

5.一些逻辑运算：

• 与或非

&&

||

! // 非

• 比较运算

= 赋值符号
== 等于符号（类型不同，但是值相同也会判定为true）
=== 绝对等于（要求类型和值都一样）

注意：

NaN === NaN  这个结果为false
isNaN(NaN)  这个结果为true

1/3 的结果为0.3333333 / 是真除 (c语言中是整除)
极限的运算会有精度的损失：
1/3 不等于 1 - 1/3

null 空
undefined 未定义

6.严格检查模式strict

i = 1;JavaScript中是不能这样去定义变量的
但是有的时候并不会报错，这就很危险。

'use strict';// 写上这句话并且要写在JavaScript的第一行,就会 对i = 1;这样不严谨的代码报错
let i = 1;// 局部变量建议使用let去定义

三、对象

1.对象：若干个键值对

JavaScript中所有的键都是字符串，值可以是任意对象

var 对象名 = {
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

// 对象： 若干个键值对
// 以下定义了一个person对象，具有三个属性
var person = {
    name : "xiaoming",
    age : 3,
    emaile : "123.@qq.com"
}

2.使用一个不存在的对象属性，不会报错，只会返回undefined

3.动态添加删减属性

delete person.name; //删除成功后会返回 true
//属性的添加：
person.hello = "world";
//这样就给person添加了一个属性-hello，它的值是world

4.判断属性值是否在这个对象中xxxx in xxxx

'age' in person 会返回 true 但是由于继承问题，你并不知道你要判断的属性值是这个对象本身拥有的还是继承父类而来的

5.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hansOwnPoroerty('age') 即可判断是否为这个对象自身拥有的属性

四、流程控制

1.if else if else

略

2.while循环 for循环 数组循环

while(条件){
...;
}
for(let i = 0; i < 100; i ++){
...;
}

//数组循环 ，使用了forEach循环
var age = [123,23,23,222,23232,11]
age.forEach(function(value)){
	console.log(value)
}

五

1.Map和Set

https://www.cnblogs.com/williamjie/p/9765815.html
Map：
　Map是一组键值对的结构，具有极快的查找速度。
　Map的定义：

//空map设值key-value
var m = new Map();
m.set("XiaoMing",99);
m.set("XiaoHong",66);
//构造参数传key-value
var m = new Map([['XiaoMing', 99], ['XiaoHong', 66]]);

Map的方法：

var m = new Map(); // 空Map
m.set('XiaoMing', 99); // 添加新的key-value
m.has('XiaoMing'); // 是否存在key 'XiaoMing': true
m.get('XiaoMing'); // 99
m.delete('XiaoMing'); // 删除key 'XiaoMing'
m.get('XiaoMing'); // undefined

对于key设置重复的值，后者会将前者覆盖掉。

Set：

Set和Map类似，但set只存储key，且key不重复。
　
　 Set的创建。

var s1 = new Set(); // 空Set
s1.add(1);
s1.add(2);
s1.add(3);

var s2 = new Set([1, 2, 3]); // 含1, 2, 3

插入重复的值，set会将重复的值进行过滤

var s = new Set([1, 2, 3]);
s.add(3);
>>s; // Set{1,2,3}
s.delete(3);
>>s; // Set([1,2]);

2.iterator迭代

        'use strict';
        var arr = [3,4,5];
        // 遍历数组
        for (var x of arr){
            console.log(x)
        }
        var map = new Map([['tom',100],['jack',90]]);
        // 遍历map
        for(let x of map){
            console.log(x)
        }
        var set = new Set([5,6,7]);
        // 遍历set
        for(let x of set){
            console.log(x);
        }
        //遍历数组 set map这样的只能用for of来遍历，for in遍历不出来

结果

六、函数

1.定义一个函数

public 返回值类型 方法名（）{
	return 返回值；
}

绝对值函数

function abs(x)
{
	if(x>=0)
	{
		return x;
	}
	else
	{
		return -x;
	}
}

所有的函数使用function来定义
比如这个函数如果我们没有传入x，传入为空，那么就直接返回结果undefined，如果同时传入多个参数，也不会报错，但是最后的结果仍然只是第一个参数的return值。

关键字atguments：
代表传递进来的所有参数，是一个数组。

rest特性，可以获取出了已经定义了的参数值外的所有参数…

        'use strict';
        function aaa(a,b,...rest)
        {
            console.log(a);
            console.log(b);
            console.log(rest);
        }

2.变量的作用域

var定义的变量是有作用域的
假设在函数体中声明，则在函数体外不可以使用（如果想要实现函数体外使用，可以研究一下闭包 ）

我们在函数中定义函数的时候所有的函数就都定义在函数的头部。（养成一个良好规范）

默认所有的全局变量都会自动板顶在window对象下。
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错RefrenceError

所以我们要养成一个良好规范，由于我们所有的全局变量都会绑定到我们的window对象，如果不同的js文件使用了相同的全局变量，那么就会有冲突，我们如何去解决？：

// 唯一全局变量
var RDS_res = {};
//我们的解决办法是写一个自己的唯一全局变量，把所有的变量都绑定到我们自己唯一的全局变量之中去，不要想window上绑定东西
//定义全局变量
RDS_res.name = "xiaohong";
RDS_res.add = function(a,b)
{
	return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，见底全局命名冲突的问题。

局部作用域let：
首先来看一段代码：

        'use strict';
        function aaa(a,)
        {
            for(var i = 0;i < 100;i ++)
            {
                console.log(i);
            }
            console.log(i+1);
        }

可以看到结果，出问题了！这个i出了for之后应该就没有定义了，但是仍然打印出了101，i出了作用域却仍能使用，这个就会导致风险。

所以就有了let关键字，建议都是用let去定义局部作用域的变量

常量const：
在ES6之前，我们对于常量的定义只用一个规范：对于全部使用大写字母定义的变量都视为常量。（但是实际上仍然是变量，只是一个我们的规范而已）
所以在ES6之后就会引入了常量关键字const，比如const PI = "3.14"

七、方法

方法的定义

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

       var person =
            {
                name:"xiaohong",
                birthday:2002,
                age:function()
                {
                    //今年减去出生年
                    var now = new Date().getFullYear()
                    return now - this.birthday;
                }

            }

调用方法person.age()，此age方法这里面的this 表示该方法所属的对象（指向本对象）。

定义方法还有第二种方法。

在js中，this可以在apply属性中指向其他的对象。

查看某数据是什么对象的方法：

typeof '要判断的数据';

八、Date对象的方法

Date类型：

        // new 一个Date对象
        var now = new Date();
        console.log(now);

        // 查看Date对象的方法属性
        year_ = now.getFullYear();// 年
        mounth_ = now.getMonth();// 月
        day_ = now.getDate();// 日
        hour_ = now.getHours();// 时
        time1_ = now.getTime();// 返回时间戳 -全世界统一，从1970年1月1日0点0分0秒到现在所过的毫秒数

九、json对象

json 是一种轻量级的数据交换格式

简洁清晰的层次结构使得json成为理想的数据交换语言

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中一切皆为对象，任何js支持的类型都可以使用json来表示；

json格式：
对象都用{}
数组都用[]
所有的键值对都是用key:value

        //下面定义了一个对象
        var user =
            {
                name:"xiaohong",
                age:3,
                sex:"women"
            };
        console.log(user);

        //对象转化为json字符串
        var js_user = JSON.stringify(user);
        console.log(js_user);

        //json字符串转化为对象
        var parse_js_user = JSON.parse(js_user)
        console.log(parse_js_user);

结果如下：

第一个第三个是json格式,json对象，可以展开

第二个是(json)字符串,其本质就是字符串

十、面向对象编程

1.什么是面向对象

类： 一个模板
对象：具体的实例（类的具体化实例）

可以这么说，JavaScript中没有类这个概念（网上的说法不一，看代码自己理解吧，这里写的只是我看了网上的资料后的思考），既然说没有类的概念，那么比如我们创建了一个对象：

        var person =
            {
                name:"xiaoming",
                age:12,
                sex:"man",
                speak_:function()
                {
                    console.log(this.name + "is a person!");
                }
            };

你看就这样，如果我们想再去创建一个新的person对象，而又没有类的概念，怎么做？
狂神的视频中是这么说的：让想创建的新的person对象的原型为原person对象
具体代码见下：

        var xiaohong =
            {
                name : "xiaohong"
            };
        xiaohong._proto_ = person;

新建一个对象xiaohong，让他的原型为person就行。(有没有发现其实原型就是父类的概念)

2.面向对象继承、class继承

这篇博客讲的很好
https://www.cnblogs.com/young17/p/14747044.html

        // 通常的定义对象地方方法
        function Car(name,color,price)
        {
            this.name = name;
            this.color = color;
            this.price = price
        }
        Car.prototype.drive = function()
        {
            console.log("I am a car !!");
        }

        let c = new Car("奔驰","黑色",100000);
        c.drive();

然后看看是怎么继承的：

        // 新建一个自行车类，在Bicycle类中调用了Car的构造函数并且使用的apply方法将应用对象绑定到了当前的Bicycle中，这样就实现了继承
        function Bicycle(name,color,price,brand)
        {
            Car.apply(this,[name,color,price]);
            this.brand = brand;
        }
        Bicycle.prototype.getBrand = function()
        {
            console.log(this.brand);
        }
        let b = new Bicycle('山地自行车','浅绿色',3000,'Giant');
        b.getBrand();
        console.log(b.name);

这种继承方法是难以接受的，在ES6中引入了class关键字，我们来定义并实例化一个类对象（我保证看完会舒服很多）

        // 定义一个类：属性、方法
        class student
        {
            // 首先要添加一个自定义的构造器，如果没有添加，构造器将默认为空。----这里就类似在定义属性了
            constructor(name,age,sex)
            {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            // 方法定义
            hello()
            {
                console.log("Hi , I am ",this.name + '.');
            }
        }

        let xiaohong = new student("xiaohong",14,"woman");
        xiaohong.hello();

然后谈谈它的继承，在这种情况下，我们怎么实现继承呢？—extends,使用了extends再加上一点点的小操作就可以实现继承

        // 接下来创建一个新类-big_student 大学生
        class Big_student extends Student
        {
            constructor(name,age,sex,grade) {
                super(name,age,sex); // super关键字能使我们使用父类的构造器，即调用父类的属性
                this.grade = "big";
            }
        }
        let xiaoming = new Big_student("xiaoming",23,"man");
        xiaoming.hello();
        console.log(xiaoming.grade);
        console.log(xiaoming.age)

十一、操作DOM对象

1.什么是dom？

DOM：浏览器窗口

2.window对象

经常用来获取浏览器的一些信息，比如长啊、宽啊什么的
https://www.runoob.com/js/js-window.html

3.navigator对象

window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。
(navigator的对象较少使用)

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

4.screen对象

window.screen对象包含了对于屏幕的一些方法和属性，使用时不写window前缀。

screen.width
screen.height

5.location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
reload:f reload() //刷新页面
location.assign('https://www.baidu.com/')

6.history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

7.DOM对象★★

操作dom对象
获得dom节点
更新dom节点
删除dom节点
创建和插入dom对象
获得和设置表单的值

8、表单的提交以及前端验证

md5加密

四、jQuery

jQuery里面封装了大量的js函数。

https://jquery.com/