Web前端-JAVASCRIPT

Javascript

一.helloworld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部标签使用-->
<!--<script>-->
<!--    alert("helloworld！");-->
<!--</script>-->
    <!--外部标签使用-->
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

二.语法入门

// 定义变量
var name=1;
// 条件控制
if(2>1){
alert(true)
}
/*
*多行注释
*/

在浏览器控制台打印变量

console.log(name)；

三.数据类型

数值，文本，图形，音频，视频。。。

1）字符串

正常字符串使用单引号或双引号包裹；转义字符

多行字符串：反引号

var msg=`你好
文化is
和等方式尽快
`

模板字符串${}`：必须使用反引号

var name="dengwenxiong";
var msg=`大家好，我是${name}`

字符串长度

str.length

字符串不可变

截取字符串substring，半闭半开

str.substring(1,3)

2）Number

js不区分小数和整数

NaN//not a Number
Infinity//表示无限大

3）比较运算符

== //等于，类型不一样，值一样也会判断为true
===//绝对等于，类型一样值一样才为true

NaN===NaN，为false，NaN与所有的数值都不相等，包括他自己；只能通过isNaN(NaN)确定

浮点数运算存在精度问题；

null表示为空；

undefined表示未定义；

4）数组

js中的数组的数值可以不是相同类型的对象

var arr=[1,2,4,null,"abc",true];

取数组下标如果越界了就会undefined；

长度:数组大小可以变化，赋值过小元素会丢失

arr.length;

slice()：截取数组的一部分，返回一个新数组，类似substring()

push()：压入到尾部；

pop()：弹出尾部元素

unshift()：压入到头部

shift()：弹出头部元素

sort()：排序

reverse()：元素反转

concat()：合并数组，返回一个新数组

join()：打印拼接数组，使用特定的字符串连接

5）对象：若干个键值对,所有的键都是字符串，值是任意对象

var person={
      name:"dengwenxiong",
      age:13
}

动态的删减属性:使用delete

delete person.name

动态添加属性：直接给新属性赋值

person.sex="  boy"

判断属性是否在对象中：使用in

"name" in person

判断一个属性是否是对象自身拥有的：使用hasOwnProerty()

person.hasOwnProperty("age")

四.严格检查模式

//使用严格检查模式，不许写在JavaScript的第一行
'use strict'
//局部变量建议使用let定义
i=1;

五.数组循环

1.使用forEach

var arr=[1,2,3,4,5];
arr.forEach(function (value){
console.log(value)
})

2.使用for in

var arr=[1,2,3,4,5];
//index是索引
for(index in arr){
console.log(arr[index])
}

3.使用for of

var arr=[1,2,3,4,5];
for(a of arr){
console.log(a)
}

六.Map和Set

var map=new Map([['tom',100],['Aisa',200]]);
var score=map.get('tom');//获取
map.set("Ali",300);//新增或修改
map.delete('tom')
console.log(score);//删除

遍历map也使用for of

set：无序不重复的集合

var set=new Set([1,1,1,1,3,5]);
set.add(9);//增加
set.delete(1)//删除
console.log(set.has(3));//检查是否有3
console.log(set);

遍历set也使用for of

七.函数

1）定义

方式一：

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 abs(x){
if(typeof x !="number"){
 throw 'Not a Number'
}
if(x>=0){
    return x;
}else{
    return -x;
}
}

arguments代表传递进来的所有参数，是一个数组（可以用于隐藏参数）

rest获取除了已定义参数之外的所有参数

function abs(x,...rest){
if(typeof x !="number"){
 throw 'Not a Number'
}
console.log(rest);
if(x>=0){
    return x;
}else{
    return -x;
}
}

rest参数只能写在最后面，并用...标识

2）变量作用域

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

js的执行引擎会自动提升变量的声明，但不会提升变量的赋值

默认所有的全局变量都会自动绑定在window对象下

var x="hhh";
alert(x);
window.alert(window.x);//效果一样

alert()函数本身也是window对象；

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

由于所有的全局变量都会绑定到window上，如果使用不同的js文件，使用了相同的全局变量就会冲突；解决：

var MyApp={};
MyApp.name="dengwenxiong";
MyApp.add=function(a,b){
return a+b;
}

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

3）let

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

function aaa(){
    for (let i=0;i<100;i++){
       console.log(i) ;
    }
    console.log(i+1);//这里使用了let之后就会报错，如果是var，则会输出101；
}

4）const

const关键字，常量

const PI=3.14;
console.log(PI);
PI=1;//报错，只读变量

5）方法

定义：在对象里面定义函数

var person={
    name:"dengwenxiong";
    birth:1998;
    age:function(){
      var now=new Date().getFullYear();
      return now-this.birth;
   }
}

属性调用：person.name;

方法调用：person.age();

this默认指向调用它的方法

使用apply可以指定this的指向

function getAge(){
      var now=new Date().getFullYear();
      return now-this.birth;
}
var person={
    name:"dengwenxiong",
    birth:1998,
    age:getAge
}

getAge.apply(person,[])

八.内部对象

1）Date

var now=new Date();
now.getFullYear();//年
now.getMonth();//月 0-11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一，1970 1.1 00:00:00
console.log(now Date(时间戳))//将时间戳转为时间
now.toLoaclString();//转换为文本

2）JSON

格式：

对象都用{}

数组都用[]

所有的键值对都用key：value

var person={
name:"dengwenxiong",
age:18,
sex:"boy"
}
//将对象转换为Json字符串
var JsonString=JSON.stringify(person);
console.log(JsonString);
//将Json字符串转换为对象
var obj=JSON.parse(JsonString);
console.log(obj);

JSON与JS对象的区别

var obj={a:'helloA',b:'helloB'};//对象
var json='{"a":"helloA","b":"helloB"}';//json,本身就是字符串

九.面向对象编程

1）原型继承

var Student={
  name:"student",
  sex:"boy",
  run:function(){
    console.log(this.name +" is running");
  }
};
var xiaoming={
   name:"xiaoming"
};
xiaoming.__proto__=Student;

2）class继承

//定义一个学生类
class Student{
    //构造器
    constructor(name){
         this.name=name;
    }
    //增加方法
    hello(){
    alert('hello');
    }
}
var xiaoming=new Student("xiaoming");

继承

class littlestudent extends Student{}

十.操作BOM对象

BOM：浏览器对象模型

window：代表浏览器窗口

navigator：封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"
navigator.platform
"Win32"

screen：代表屏幕尺寸

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

location.host
"www.baidu.com"
location.href
"https://www.baidu.com/?tn=78040160_14_pg&ch=16"
location.protocol
"https:"
location.reload()//刷新网页
location.assign("https://www.bilibili.com/")

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

document,cookie//获取网页的cookie

history：

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

十一.操作DOM对象

DOM文档对象模型

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

更新：更新DOM节点
遍历：得到DOM节点
删除：删除DOM节点
添加：添加新的DOM节点

获取节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="father">
<h1>我是谁</h1>
<p id="p1"></p>
<p class="p2"></p>
</div>
<script>
    //标签选择器
    var h1=document.getElementsByTagName('h1');
    //Id选择器
    var p1=document.getElementById('p1');
    //类名选择器
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    //father.children可获得子节点
</script>
</body>
</html>

更新节点：

father.innerText="hhhh"修改文本值
father.innerHTML="<strong>123</strong>"可以解析HTML文本标签
father.style.color="red"更改样式

删除节点：

先获取父节点，再通过父节点删除自己

father.removeChild(p1);

删除节点，children是动态变化的

插入节点：

追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p1">我是哈哈哈</p>
<div id="d1">
</div>
<script>
   var p1=document.getElementById("p1");
   var d1=document.getElementById("d1");
   d1.appendChild(p1);
</script>
</body>
</html>

创建节点并插入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
</div>
<script>
    var newp=document.createElement('p');
    newp.id='p1';//等价于 newp.setAttribute("id","p1")
    newp.innerText="你好啊";
    var d1=document.getElementById("d1");
    d1.appendChild(newp);
</script>
</body>
</html>

十二.操作表单

获取表单的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>
    <span>用户名：</span><input type="text" id="username"/>
    <span>性别：</span>男<input type="radio" name="sex" value="man" id="boy"/>
    女<input type="radio" value="woman" name="sex" id="girl"/>
</div>
<script>
    var input_text=document.getElementById("username");
    //得到输入框的值input_text.value
    var boy_radio=document.getElementById("boy");
    var girl_radio=document.getElementById("girl");
    //判断是否选中，返回（true或false）boy_radio.checked;
</script>
</body>
</html>

十三.JQuery

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="" id="test-jquery">你点我试试</a>
<script>
    $("#test-jquery").click(function(){
       alert("Hello!");
    })
</script>
</body>
</html>

选择器

$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//class选择器

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
        height:800px;
        width:800px;
        background-color:red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="test-ul">
    <li name="js">Javascript</li>
    <li class="python">python</li>
</ul>
<script>
    $('#test-ul li[name=js]').text();//获取值
    $('#test-ul li[name=js]').text("12334");//设置值
    $('#test-ul').html()//获取值
    $('#test-ul').html("<strong>hhh</strong>")//设置值,会覆盖
</script>
</body>
</html>

CSS操作

$('#test-ul').css({"color":"red","font-size":"80px"})

元素的显示和隐藏：本质是disoplay：none；

$('#test-ul li[name=js]').show();//显示
$('#test-ul .python').hide();//隐藏