JavaScript

JavaScript

1.基本语法

//1.定义变量   变量类型  变量名 = 变量值；
 var num = 1;
 alert(num)
//2.条件控制
var score = 81;
if (score>60 && score<70){
    alert("及格")
}else if (score>70 && score<80){
    alert("良好")
}else {
    alert("other")
}
//console.log(score) 在浏览器的控制台打印变量！

2.数据类型

• number :
  javaScript不区分小数和整数
  整数 浮点数 科学计数法 负数 NaN(not a number) Infinity(表示无限大)
• 字符串:
  ​ " " ’ ’
• 布尔值

​ true false

• 逻辑运算

​ && ==》两个都为真，结果为真

​ | | ==》一个为真，结果为真

​ ！ ==》 真即假，假即真

• 比较运算符

=    赋值        
==   等于 (类型不一样，值不一样，也会判断为true)   
===  绝对等于 (类型一样，值一样，结果为true)
注意：
NaN===NaN,这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是 NaN

• 浮点数问题

尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001;

• null 和 undefined

​ null (空) undefined（未定义）

• 数组

​ Java数组必须是相同类型的对象，JavaScript中不需要

//保证代码的可读性 尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true]
//取数组下标：如果越界就会显示undefined

• 对象

​ 对象是大括号，数组是中括号；每个属性之间使用逗号隔开，最后一个不要添加

//Person person = new Person(1,2,3,4);
var person = {
      name:"nihao";
      age: 2;
      tage:['js','java','web','....'];
 //取对象的值
   person.name 
   person.age
   person.tage

严格检查模式

<!--'use strict';  严格审查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！
局部变量建议都使用let去定义-->
<script>
  'user strict';
  //全局变量
    i=1; //Es6 let   
</script>

数据类型

字符串

• 正常的字符串我们使用 ，单引号，双引号包裹

• 注意转义字符 \

\*
\n
\t
\u####  unicode字符
\x34   Ascll字符

• 多行字符串编写

//tab 上面   esc键下面
var msg =   ` word `

• 模版字符串

let name ="你好";
let age = 3;
let msg = `你好，${name}`

• 字符串长度

str.lenght大小写转换

• 大小写转换

//注意：这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

//获取指定的下标
student.indexOf("t")//2
//截取第几个到第几个之间的
student.substring(1,3)  //截取第1个到第3个之间的

数组 存储数据(如何存，如何取)

Array可以包含任意的数据类型

var arr = [1,2,3,4]  //通过下标取值和赋值
arr[0]
arr[0]= 1

• 长度

arr.length
//注意： 假如给arr.length赋值，数组大小就会发生变化;如果赋值过小，元素就会消失

• indexOf: 通过元素 获得下标索引

arr.indexOf(2)
1
//字符串的"1" 和数字的1是不同的

• slice()
  截取Array的一部分，返回一个新数组，类似于String中的substring

• push() ,pop()

push: 压入到尾部
pop: 弹出尾部的一个元素

• unshift() , shift() 头部

unshift: 压入到头部
shift： 弹出头部的一个元素

• 排序

arr.short()
/*
(3) ["[b]","[c]","[a]"]
arr.short()
(3) ["[a]","[b]","[c]"]    
*/

• 元素反转

arr.reverse()
/*
(3) ["[a]","[b]","[c]"] 
arr.reverse()
(3) ["[c]","[b]","[a]"]    
*/

• concat()

arr.concat()
/*
(3) ["[c]","[b]","[a]"] 
arr.concat([1,2,3])
(6) ["[c]","[b]","[a]",1,2,3] 
(3) ["[c]","[b]","[a]"]    
*/
// 注意： concat() 并没有修改数组，只是会返回一个新数组

• 连接符 join

arr.join(‘-’)
/(3) [“[c]”,“[b]”,“[a]”]
arr.join(‘-’)
“c-b-a”/
//打印拼接数组，使用特定的字符串连接

- 多维数组

```javascript
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

对象

若干个键值对

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

//定义了一个person对象，有四个属性！
var person = {
    name:"nihao",
    age:3,
    email:"21334444@qq.com",
    score: 0
}
//注意: JavaScript中对象，{....}表示一个对象，键值描述属性xxxx: xxx,  多属性之间使用逗号隔开，最后一个属性不加逗号！
//JavaScript中的所有的键都是字符串，值是任意对象！

• 对象赋值

person.name = "nihao"

• 使用一个不存在的对象属性，不会报错！ undefined

person.haa
undefined

• 动态的删减属性

//通过delete删除对象属性
delete person.name
ture
person

• 动态的添加

//直接给新的属性添加值即可
person.haha = "haha"
"haha"
person

• 判断属性值是否在这个对象中！ xxxx in xxxx

`age` in person
 trun
 //继承
 `toString` in person
  turn  

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

person.hasOwnProperty(`toString`)
flase
person.hasOwnProperty(`age`)
ture

流程控制

• if 判断

var age = 3;
if (age>2){//第一个判断
    alert("haah");
}else if(age<5){//第二个判断
    alert("wawa");
}else{  //否则..
    alert("qwe");
}

• while循环 避免程序死循环

var age = 3;
while(age<100){
      age = age +1;
    console.log(age)
}

//do..while
do{
    age = age +1;
    console.log(age)
}while(age<100)

• for循环

var age = 3;
for(let i =0; i<100,i++){
    console.log(i)
}

• forEach数组循环

var age = [1,2,3,3,4,5]
//函数
age.forEach(founction (value)){
    console.log(value)
})

• for…in 循环

//for(var index in object){}
var age = [1,2,3,3,4,5]

for(var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

Map 和 Set

• Map

var map = new Map([['tom',99],['jack',80],['haha',20]]);
var name = map.get('tom');//通过key 获得value
map.set('admin',123456);//新增
map.delete('tom');//删除

• Set : 无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素！

iterator

• 遍历数组

//通过for  of 实现
var arr = [3,4,5]
for (var x of arr){
    console.log(x)
}

• 遍历map

var map = new Map([["tom",100],["jack",80],["ahha",70]]);
for (let x of map){
    console.log(x)
}

• 遍历set

var set = new Set([1,2,3,4]);
for (let x of set){
    console.log(x)
}

函数

• 定义函数

定义方式一

绝对值函数

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

//注意：
//一旦执行了return代表函数结束，返回结果!
//如果没有执行return ，函数执行完也会返回结果，结果就是undefined

定义二

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
//注意：
//function(x){...}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数

调用函数

abs(10) //10
abs(-10)  //10

参数问题：JavaScript可以传任意个参数，也可以不传递参数

假设参数不存在，如何规避？

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x!= 'number'){
        throw 'Not a Number';
    }
     if(x>=0){
        return x;
    }else{
        return -x;
    }   
}

arguments

代表传递进来的所有参数，是一个数组

var abs = function(x){
    console.log("x=>"+x);
    
    for(var i = 0; i<arguments.length;i++){
        console.log(argument[i]);
    }
         if(x>=0){
        return x;
    }else{
        return -x;
    } 
}
//注意：
//arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数 

rest

function aaa(a,b, ...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console,log(rest);
}
//注意：
//Es6新特性，获取除了已经定义的参数之外的所有参数
//rest参数只能写在最后面，必须用...标识

• 变量的作用域

在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用

function qj(){
    var x = 1;
    x = x + 1;
}
x = x +2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
    var x = 1;
    x = x + 1;
}
function qj2(){
    var x = 'a';
    x = x + 1;
}

如果函数可以访问外部函数成员

function qj(){
    var x = 1;

  //内部函数可以访问外部函数成员，反之则不行
function qj2(){
    var y = x + 1;
}
    var z = y + 1; //Uncaught ReferenceError: x is not defined
}    

假设，内部函数变量和外部函数的变量，重名！

function qj(){
    var x = 1;

function qj2(){
    var x = 'a';
    console.log('inner'+x); //outer1
}
     console.log('outer'+x); //innera
    qj2()
}  
qj()

假设在JavaScript中 函数查找变量从自身函数开始。有”内“向”外“查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果：xundefined

说明：JavaScript执行引擎，自动提升了y 的声明，但不会提升变量y的赋值

function qj2(){
    var y;
    var x = "x" + y;
    console.log(x);
    y = 'y';
}

z这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数头部，不要乱放，便于代码维护

function qj2(){
    var x = 1;
    y = x + 1;
   z,i,a;//undefined 
   //之后随意用
}

全局函数

//全局变量
 var x =1;
 function f(){
    console.log(x);
}
f()
console.log(x);

全局对象 window

var x = 'xxxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在 window对象下

alert() 这个函数本身也是一个window变量

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;
//old_alert

window.alert = funtion (){
    
};

//发现alert() 失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定在我们的window 上。如果不同的JavaScript文件，使用了相同的全局变量，冲突

//唯一全局变量
var hiApp = {};

//定义全局变量
hiApp.name = 'nihao';
hiApp.add = function (a,b){
    return a + b;
}
//把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 set

function aaa(){
    for(var i = 0; i<100;i++){
        console.log(i)
    }
    console.log(i+1);//问题 i出了这个作用域还可以使用
}

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

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

常量 const

const PI = '3.14';//只读变量
console.log(PI);
PI = '123';//TypeError: Assignment to constant variable
console.log(PI);

• 方法

定义方法

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

var nihao = {
    name : 'nihao',
    birth: 2000,
    //方法
    age: function(){
      // 今年 - 出生年
        var now = new Date().getFullYear();
        retrun now-this.birth;
    }
}
//属性
nihao.name
//方法,一定要带 ()
nihao.age()

this.代表什么？拆开上面代码

function getAge(){
      // 今年 - 出生年
        var now = new Date().getFullYear();
        retrun now-this.birth;
    }
    var nihao = {
    name : 'nihao',
    birth: 2000,
    age: getAge    
}
// nihao.age()   ok
//getAge()  NAN window

​ this是无法指向的，是默认调用他的那个对象

apply

​ 在JavaScript可以控制this指向

function getAge(){
      // 今年 - 出生年
        var now = new Date().getFullYear();
        retrun now-this.birth;
    }
    var nihao = {
    name : 'nihao',
    birth: 2000,
    age: getAge    
};
// nihao.age()   ok

getAge.apply(nihao.[]);//this. 指向了nihao ,参数为空

内部对象

标准对象

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

• Date

基本使用

var now = new Date();//当前时间
now.getFullYear();//年
now.getDate();//日
now.getMonth();//月
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
console.log(new Date());//时间戳转时间

• JSON

1. 在JavaScript 一切皆为对象，任何js支持的类型都可以用JSON来表示；number，string…

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

3. JSON字符串 和 JS对象的转化

var user ={
    name:"nihao",
    age:3,
    aex:'男',
}
//对象转化为JSON字符串  {"name":"nihao", "age": "3", ""sex"": "男"}
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象 参数为JSON 字符串
var obj = JSON.parse('{"name":"nihao", "age": "3", ""sex"": "男"}');

4. JSON 和 JS 对象的区别

var obj = {a: 'hello',b:'hellob'};
var jsonUser ='{"a": "hello","b":"hellob"}'     

面向对象编程

• 原型对象

​ 类：模版 原型对象

​ 对象：具体的实例

var Student ={
    name:"nihao",
    age:3,
    run function(){
    console.log(this.name+"run...");
}
};

var xiaoming = {
    name:"xaioming"
};
//原型对象
xiaoming._proto_=Student;

var Bird = {
    fiy: function(){
      console.log(this.name+"fly...");
    }
};
//小明的原型 是 Student
xiaoming._proto_=Bird ;

• class继承

1. 定义一个类，属性 方法

//定义一个学生类
Class Student{
  constructor(name){
      this.name = name;
  }
    hello(){
        alert('hello')
    }
}
var xaioming = new Student("xaioming");
var xaiohong = new Student("xaiohong");
xaioming.hello()

2. 继承

//定义一个学生类
Class Student{
  constructor(name){
      this.name = name;
  }
    hello(){
        alert('hello')
    }
}

class xaioStudent extends Student {
    constructor(name.grade){
        super(name);
        this.grade = grade;
  }  
    myGrade(){
        alert('小学生')
    }
}
var xaioming = new Student("xaioming");
var xaiohong = new xaioStudent("xaiohong"，1);

操作BOM对象

BOM: 浏览器对象模型

• window

​ window 代表 浏览器窗口

window.alert(1)
undefined
window.innerHeight
720
window.innerWidth
164
window.outerHeight
806
window.outerWidth
652
//window 打印  外宽高 内宽高

• Navigator

​ Navigator，封装了浏览器信息

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

//注意：
//大多数时候，不会使用**navigator**对象，因为会被人为修改
//不建议使用这些属性来判断和编写代码

• screen

//代表屏幕的尺寸
screen.height

screen.width

• loction

​ location 代表当前页面的URL信息

host: "www.baidu.com"  //主机
href: "https://www.baidu.com/" //当前页面位置
protocol: "https:"  //协议
reload: ƒ reload()  //刷新网页
//设置新的地址
location.assign('https://www.bilibili.com/')

• document

1. document 代表当前的页面，HTML DOM文档树

document.title
'哔哩哔哩 (゜-゜)つロ 干杯~-bilibili'
document.title='hahaha'
'hahaha'

2. 获取具体的文档树节点

<di id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
     <dd>javaSE</dd>
</di>
<script>
 var d1 = document.getElementById('app');
</script>

3. 获取cookie

document.cookie
''

• history

​ history 代表浏览器的历史信息

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

操作DOM对象

核心

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

• 更新： 更新Dom节点
• 遍历dom节点： 得到Dom节
• 删除： 删除一个dom节点
• 添加： 添加一个新的节点

要操作一个Dom节点，就必须先获得这个Dom节点

获得Dome节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childerns = father.children;//获取父节点下的所有子节点

更新节点

<div id="id1">

</div>
<script>
  var d1 = document.getElementById('id1');
</script>

• 操作文本

id.innerText='456'   修改文本额值
id1.innerHTML='<strong>123</strong>'  可以解析HTML文本标签 

• 操作JS

id1.style.color = 'yellow ';//属性使用字符串 包裹
id1.style.fonSize = '20px';
id1.style.padding = '2em';

删除节点

步骤： 先获取父节点，在通过父节点删除子节点

<div id="father">
  <h1>b标签一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>
  var self = document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self)
   
    //删除是一个动态的过程；删除多个节点时候，Children是时刻变化的，删除节点的时候一定要注意！
  father.removeChild(father.Children[0]); 
</script>

插入节点

• 获得某个Dom节点时，假设这个Dom节点是空的，通过innerHTML 就可以增加一个元素，但是这个Dom节点已经存在元素，我们不能这么干！会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
   var js = document.getElementById('js');
   var list = document.getElementById('list');
   list.appendChild(js) //追加到后面
</script>       

操作表单（验证）

表单是什么 form DOM 树

• 文本框 text 下拉框 单选框 radio

• 多选框CheckBox 隐藏域 hidden 密码框 password

• …

  表单的目的：提交信息

获得要提交的信息

<form action="post">
  <p>
    <span>用户名:</span> <input type="text" id="username">
  </p>
  <!--多选框的值，就是定义好的value -->
  <p>
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy"> 男
    <input type="radio" name="sex" value="woman" id="girl"> 女
  </p>
</form>
<script>
  var input_text =document.getElementById('username');
  var boy_radio =document.getElementById('boy');
  var girl_radio =document.getElementById('girl');
  //得到输入框的值
  input_text.value
  //修改输入框的值
  input_text.value = '123'

  //对于单选框，多选框，等等固定的值，boy_radio.value只能取得当前的值
  boy_radio.checked;//查看返回的结果是否为true， 如果为true则被选中
  girl_radio.checked = true; //赋值
</script>

提交表单 md5 加密密码 ，表单优化

<!--MD5 工具类-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数， true，  false
将这个结果返回给表单，使用 onsubmit 接收
οnsubmit=“return aaa()”
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
  <p>
    <span>用户名:</span> <input type="text" id="username" name="username">
  </p>
  <p>
    <button type="submit">提交</button>
    <span>密码:</span> <input type="password" id="input-password" >
  </p>

  <input type="hidden"id="md5-password" name="password">
<!--绑定事件 onclick 被点击-->
</form>
  <script>
    function aaa(){
      alert(1);
     var uname = document.getElementById('username');
     var pwd = document.getElementById('password');
     var md5= document.getElementById('md5-password');
    //pwd.value = md5(pwd.value);
     md5pwd.value = md5(pwd.value);
    //可以校验判断表单，true就是通过提交 ，false则是阻止提交
     return true;
    }
  </script>

jQuery

JavaScript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
<a href="" id="test-jquery"> 点我</a>

<!--
公式 $(selector).action()
-->
<script>
  //选择器就是cs的选择器
  $('test-jquery').click(function () {
    alert('hello,jquery');
  })
</script>
</html>

选择器

<script>
  //原生js, 选择器少，麻烦不好记
  //标签
  document.getElementsByTagName()
  //id
  document.getElementById()
  //类
  document.getElementsByClassName()

  //jQuery css中的选择器全部都能用
  $('p').click() //标签选择器
  $('#id1').click() //id选择器
  $('.class1').click() //class选择器
</script>

文档工具站： jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

鼠标事件 键盘事件 其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <style>
    #divMove{
      width: 500px;
      height: 500px;
      border: 1px solid #ed0303;
    }
  </style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>

<script>
  //当网页元素加载完毕之后，响应事件
  $(function () {
     $('#divMove').mousemove(function (e){
       $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
     })
  });
</script>
</body>
</html>

操作DOM

节点文本操作

$('#text-ul li[name=python]').text();//获得值
$('#text-ul li[name=python]').text('设置值');//设置值
$('#text-ul').html;//获得值
$('#text-ul').html('<strong>123</strong>');//设置值

css的操作

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

元素的显示和隐藏： 本质：display : none;

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