JavaScript学习

JavaScript

1、简介

JavaScript 是脚本语言

ECMAScript 可以理解为JavaScript的一个标准

2、入门

2.1、引入

内部标签
<script>
	//....    
</script>

外部引入
<script src="...">   
</script>

script标签必须成对出现

2.2、基本语法

与Java语法相同

JavaScript严格区分大小写

定义数据类型不区分浮点数和整数

在浏览器控制台打印变量console.log()

3、数据类型

控制台输出NaN(not a number)

控制台输出Infinity(无穷大)

== 等于(类型不一样，数值一样，输出true)

=== 绝对等于(类型一样，数值一样，输出true)

3.1、变量

let i = 1;
//局部变量建议使用let定义

3.2、严格检查模式

'use strict'
//预防Javascript的随意性产生一些问题

3.3、数组

//数组中数值类型可以不同
var Arrary = [1,2,3,4,'hello',null,true];


var arr = [1,3,5,2,6,'a','b']
//截取Arrary的一部分，返回一个新的数组
slice()
arr.slice()

//在数组尾部压入元素
push()

//在数组尾部弹出元素
pop()

//在数组头部压入元素
unshift()

//在数组尾部弹出元素
shift()

//数组排序
sort()

//元素反转
reverse()

//拼接两数组
arr = [1,2,3]
arr.concat(["a","b"])
arr = [1,2,3,"a","b"]
//concat()并没有修改数组，只会返回一个新的数组

//连接数组
arr=["c","b","a"]
arr.join('-')
"c-b-a"

3.4、字符串

//多行字符串
var msg =
    `hello
	world`;

//大小写转化
*.toUpperCase()

//获取下标
*.indexOf('');

//截取指定字符串
*.substring(1,3)//[ , )

3.5、对象

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

若干个键值对

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


//动态的删减属性
delete 对象名.属性名

//判断属性值是否在这个对象中
'属性名' in 对象名

//判断一个属性是否是这个对象自身拥有的
对象名.hasOwnPreperty('toString')

3.4、流程控制

for…in循环

//for(var index in object){}

age = [12,3,5,54,6,21,132]
for(var num in age){
    console.log(age[num])//取出下标
}

for…of循环

age = [12,3,5,54,6,21,132]
for(var num of age){
    console.log(num)
}

forEach循环

var age = [1,23,151,231,51,5]age.forEach(function(value){    console.log(value)})

3.5、Map和Set

ES6的新特性

Set:无序不重复的集合

var set = new set([3,1,1,1,1])//set 可以去重set.add(2);set.delete(1);set.has();//判断是否包元素

Map:

var map = new Map(['tom',90],['jeck',90],['black',80]);var name = map.get('tom');map.set('admin',12345);//添加map.delete('tom');

3.6、iterator

ES 标准虽然没有直接支持 Iterator API，但它通过了内建迭代器的方案。就是使用 Symbol.iterator，这是 ES6 引入的。我们可以用他来遍历String，Array，Map，Set。

var arr = ['a', 'b', 'c', 'd', 'e'];var eArr = arr[Symbol.iterator]();console.log(eArr.next().value); // aconsole.log(eArr.next().value); // bconsole.log(eArr.next().value); // cconsole.log(eArr.next().value); // dconsole.log(eArr.next().value); // e// Mapconst map1 = new Map();map1.set('0', 'foo');map1.set(1, 'bar');const iterator1 = map1[Symbol.iterator]();for (let item of iterator1) {  console.log(item);}

4、函数及面向对象

4.1、函数的定义

方式一

 function abs(x){     if(x<0){         return -x;     }else{         return x;     } }//一旦执行到return代表函数结束//若传入多个参数，只返回第一个的值//若不传入参数，返回NaN,此时需要手动抛出异常 function abs(x){     if(typeof x !== 'number'){         throw 'Not a Number';     }     if(x<0){         return -x;     }else{         return x;     } }

利用arguments可以拿到传递进来的所有参数，是一个数组

function a(x){    for(var i = 0;i<arguments.length;i++){        console.log(atguments[i]);    }}a(5,6,7,8);5 6 7 8

rest可以拿到定义之外的所有参数，ES6新特性

function a(a,b,...rest){    console.log(a);    console.log(b);    console.log(rest);}a(5,6,7,8)5 6 [7,8]

方式二

var abs = function(x){    if(x<0){         return -x;      }else{         return x;     }}//匿名函数

4.2、变量的作用域

内部函数可以访问外部函数的成员，反之则不行

function outer(){    var x = 1;        function inner(){        var y = x + 1;    }        var z = y + 1;//Uncaught ReferenceError : y is not defined}

内部函数变量和外部函数变量重名，从自身函数开始查找

function outer(){    var x = 1;        function inner(){        var x = 'A';        console.log(x);    }    console.log(x);    inner();}

全局对象 window

var x = 'w';alert(x);alert(window.x);window.alert(x);

javascript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，若在全局作用域也没有找到,报错RefrenceErroe

规范

全局的变量都定义在window下

问题：若不同的js文件，使用了相同的全局变量便会产生冲突

//定义自己的唯一全局变量var sunshine = {};sunshine.name = 'sun';sunshine.add = function (a,b){    return a+b;}

局部作用域 let

function f(){    for(var i = 0;i<100;i++){        console.log(i);    }    console.log(i+1);//输出101 证明i还可以使用}

ES6 使用let关键字，解决局部作用域冲突的问题

function f(){    for(let i = 0;i<100;i++){        console.log(i);    }    console.log(i+1);//Uncaught ReferenceError : y is not defined}

4.3、常量

在早些年，人们以大写字母规定常量

在ES6后，出现关键字const 来定义常量

4.4、方法

将函数放入对象中

var sunshine = {    name:'sunshine',    birth:2020,    age:function(){        var now = new Date().getFullYear();        return now - this.birth;    }}//属性sunshine.name//方法sunshine.age()

this 代表使用它的对象

function getAge(){        var now = new Date().getFullYear();        return now - this.birth;}var sunshine = {    name:'sunshine',    birth:2020,    age:getAge    }}//sunshine.age() 20//getAge() NaN this此时指向window对象

apply

在js中可以控制this的指向

getAge.apply(sunshine,[]);//this指向sunshine对象，参数为空

5、常用对象

5.1、内部对象

标准对象

typeof 123"number"typeof '123'"string"typeof true"boolean"typeof NaN"number"typeof []"object"typeof {}"object"typeof Math.abs"function"typeof undefined"undefined"

5.2、Date

var now = new Date();now.getFullYear();//年now.getMouth();//月 0-11代表月now.getDate();//日now.getDay();//星期now.getHours();//时now.getMinutes();//分now.getSeconds();//秒now.getTime();//时间戳 1970.1.1//转化now.toLocaleString();now.toGMTString();

5.3、JSON

早期所有的数据传输习惯使用XML文件

• JSON是一个轻量级的数据交换格式，提升了网络传输效率

在JavaScript一切皆为对象，任何支持js类型的都可以使用JSON来表示

格式：

• 对象用{}
• 数组都用 []
• 所有的键值对都用 key:value

var user = {    name:"sunshine",    age:3,    sex:'男'}//对象转化为JSON字符串JSON.stringify(user)//JSON字符串解析为对象JSON.parse();

6、面向对象编程

6.1、原型对象

var sunshine =  {    name:"sunshine",    age:18,    run:function(){        console.log(this.name + "run...")    }}var sun = {    name:"sun"}//sun 的原型 指向 sunshine(sun 继承 sunshine)sun.__proto__ = student;

**原型链：**每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。

6.2、class对象

class 继承 (此关键字是ES6之后引入)

function sunshine(name){    this.name = name;}//给sunshine新增一个方法sunshine.prototype.sun = function(){    alert('sun')}//ES6之后class sunshine{    constructor(name){        this.name = name;    }        sun(){        alert('sun');    }}var s = new sunshine("sunshine");//继承class sunshien2 extends sunshine{    constructor(name,grade){        super(name);        this.grade = grade;    }    myGrade(){        alert('sunshine2');    }}

class 对象本质依旧是原型对象

7、操作Bom对象

BOM:浏览器对象模型

window (重要)

window 代表 浏览器窗口

window.alert()window.innnerHeightwindow.innerWidthwindow.outerHeightwindow.outerWidth

Navigator

navigator对象，封装了浏览器的信息

screen

screen 代表屏幕

location (重要)

location 代表当前页面的URL信息

host:"www.baidu.com"href:"https://www.baidu.com/"protocol:"https:"reload:f reload() //刷新网页//设置新的地址location.assign('');

document

decument 代表当前页面，DOM文档树

//获取网页titledecument.title

decument可以具体的获取文档树节点

<dl id="sun">	<dt>Java</dt>	<dt>Javase</dt>	<dt>Javaee</dt></dl><script>	var dl = document.getElementById('sun');</script>

decument可以获取cookie

history

history代表浏览器的历史记录

//后退history.back()//前进history.forward()

8、操作Dom元素

DOM:文档对象模型

浏览器网页就是一个DOM树形结构

//对应css选择器<div id="father">    <h1>标题</h1>    <p id="p1"></p>    <p> classs="92"</p></div><script>    var h1 = document.getElementByTagName('h1');	var p1 = document.getElementById('p1');    var p2 = document.getElementByClassName('p1');    var father = document.getElementById('father');        var childer = father.childer;//获取父节点下的所有子节点    //father.firsChild</script>

这里是原生代码，之后会使用jQuery()

8.1、更新节点

//对应css选择器<div id="id1"></div><script>	var id = document.getElementById('id1');</script>

操作文本

• id.innerText = ’ 456’ 修改文本的值
• id.innerHTML = ‘’ 可以解析HTML文本标签

操作js

id.style.color = 'red'id.style.fontSize = '200px'

8.2、删除节点

只能通过找到父节点，来删除子节点

<div id="father">    <h1>标题</h1>    <p id="p1"></p>    <p> classs="92"</p></div><script>   	var p1 = document.getElementById('p1');    var father = p1.parentElement;    father.removeChild(p1);            //删除是一个动态的过程，下标会随之变化    father.removeChild(father.children[0])</script>

8.3、插入节点

<head>    <tytle></tytle></head><body>    <p id="js">JavaScript</p>    <div id="list">        <p id="me">JavaME</p>        <p id="se">JavaSE</p>        <p id="ee">JavaEE</p>    </div></body><script>	var js = document.getElementById('js');    var list = document.getElementById('list');    //通过JS创建一个新的节点    var newP = document.createElement('p');    newP.id = 'newP';    new.innerText = 'hello,sunshine';    //通过 *.appendChild() 追加子节点    list.appendChild(newP);        //创建一个标签节点    var myScript = document.createElement('script');    myScript = setAttribute('type','text/javascript');        //创建一个Style标签    var myStyle = document.createElement('style');    myStyle.setAttribute('type','text/css')    myStyle.innerHTML = 'body{background-color:red}';    //将myStyle加入    document.getElementByTagName('head')[0].appendChild(myStyle);</script>

将新节点插入到目标节点之前 insertBefore(newNode,targetNode)

9、操作表单

<form action="" method="post">    <p>        <span>用户名：</span><input type="text" id="username">    </p>    <p>        <span>性别：</span>        <input type="radio" name="sex" value="man" id="boy">男        <input type="radio" name="sex" value="women" id="girl">女    </p>        <input type="submit"></form><script>	var input = document.getElementById('username');    var boy = document.getElementById('boy');    var girl = document.getElementById('girl');    //得到输入框的值    input.value    //修改输入框的值    input.value = 123;    //获取单选框，多选框选中的值(查看返回结果是否为true)    boy.checked    </script>

9.1、提交表单

<form action="#" method="post">    <p>        <span>用户名：</span><input type="text" id="username" name="username">    </p>    <p>        <span>密码：</span><input type="password" id="password" name="password">    </p>        <!--点击绑订事件-->    <button type="button" onclick="f()">提交</button></form><script>	function f(){        var username = document.getElementById('username');        var password = document.getElementById('password');                //利用MD5对密码加密(需要导入工具类)        password.value = md5(password);            }    </script>

10、jQuery

需要引入在线的CDN或者自己下载包

公式：$(选择器).事件()

其中选择器为css的选择器

10.1、选择器

<script>	$('p').click()//标签选择器    $('#id').click()//id选择器    $('.class').click//class选择器    //属性选择器等和CSS相同(文档工具站)</script>

10.2、事件

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>    <style>        #divMove{            width: 500px;            height: 500px;            border: 1px solid red;        }    </style></head><body>mouse : <span id="mouseMove"></span><div id="divMove">    在这里移动鼠标</div><script>    //$(document).ready(function(){})    $(function () {        $('#divMove').mousemove(function (e) {            $('#mouseMove').text("x:"+e.pageX+'y:'+e.pageY);        })    });</script></body></html>

10.3、操作DOM

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $('#test-ul li[name=python]').test();
    $('#test-ul').html();
</script>
</body>
</html>

css的操作

$('#test-ul li[name=python]').css("color","red");

元素的显示和隐藏(本质display:none)

    $('#test-ul li[name=python]').show();
    $('#test-ul li[name=python]').hide();