Html基础之js

HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。

在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。

引入JavaScript代码，类似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 //  多行通过 /* */

 

1.js变量

es5

name = 'dsx'; // 默认全局变量

function func() {

    var name = 'niulaoshi'; // 局部变量

}

 

es6

// let 定义的变量没有 预解析

alert(num1);

let num1 = 1;

alert(num1);

//    const 也没有变量预解析 const 定义的程序不可以修改 常量

const num2 = 2;

alert(num2);

num2 = 3

 

2.基本数据类型

a.字符串

//定义字符串

var str = '你开心就好！';

var name = 'yy';

// 字符串的拼接

var name_str = name+str;  

//字符串操作

str = '大师兄'

str.charAt(0) 根据角标获取字符串中的某一个字符  char字符

str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y

str.length 获取字符串长度

str.concat('牛教授')  拼接字符串

str.indexOf('大师') 获取子序列的位置

str.slice(0,1)  切片 start end

str.toLowerCase()  变更为小写

str.toUpperCase() 变更大写

str.split('师',1) 切片 返回数组 参数2 为取分割后数组的前x个元素

b.数字类型

数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）

 

var age = 18;

var score = 89.22;

number = '18';

// 字符串转数字

var n = parseInt(number);

// 转换成小数

f =parseFloat(number)

//数字转字符串

age=18

age.toString()或 age+'' 

c.布尔类型

布尔类型（true 或 false）

var t = true; var f = false;

d.数组类型

// 第一种创建方式 var list = new Array();

list[0] = '应用兄';

list[1] = '牛教授';

 

// 第二种创建方式

var list2 = new Array('应用兄','牛教授');

 

// 第三种创建方式

var list3 = ['应用兄','牛教授'];

 

数组操作

var list3 = ['应用兄','牛教授'];

 

list3.length 数组的长度

 

list3.push('dsx') 尾部追啊参数

 

list3.shift() 头部获取一个元素 并删除该元素

 

list3.pop() 尾部获取一个元素 并删除该元素

 

list3.unshift('dsx') 头部插入一个数据

 

list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素

 

list3.splice(n,0,val) 指定位置插入元素

 

list3.splice(n,1,val) 指定位置替换元素

 

list3.splice(n,1) 指定位置删除元素

 

list3.slice(1,2) 切片;

 

list3.reverse() 反转

 

list3.join('-') 将数组根据分割符拼接成字符串

 

list3.concat(['abc']) 数组与数组拼接

 

list3.sort() 排序

 

e.对象类型

var dict = {name:'dsx',age:18,sex:'男' };

var age = dict.age;

var name = dict['name'];

delete dict['name'] 删除

delete dict.age 删除

 

3.条件判断语句：两个等号只判断值相同，三个等号判断类型和值都相同

if(条件){

    执行代码块

}elseif(条件){

    执行代码块

}else{

    执行代码块

};

 

 

switch(a){

    case1:

        console.log(111);

        break;

    case2:

        console.log(222);

        break;

    default:

        console.log(333)

}

4.序列化

var obj=["a","b","c"]

var str=JSON.stringify(obj)序列化,数组转换成字符串

JSON.parse(str)反序列化，字符串转成对象

5.循环语句

第一种循环

循环的是角标

tmp=['宝马','奔驰','尼桑'];

tmp='宝马奔驰尼桑';

tmp={'宝马':'BMW','奔驰':'BC'};

for(variintmp){

    console.log(tmp[i])

}

第二种循环

不支持字典的循环

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

    console.log(tmp[i])

}

第三种循环

while(1==1){

    console.log(111)

}

6.函数

1、普通函数

function函数名(形参,形参,形参){

    执行代码块

}

函数名(形参,形参,形参);

 

2、匿名函数匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递

setInterval(function(){

    console.log(11)

},5000);

3、自执行函数创建函数并且自动执行

当引入多个js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突

(function(name){

    console.log(name)

})('dsx');

 

作用域

Python的作用域是以函数作为作用域的，其他语言以代码块（{}）作为作用域的。

JavaScript是以函数作为作用域

function tmp(){

    var name='dsx';

    console.log(name)

}

tmp();

console.log(name);

2、函数作用域在函数未被调用之前，已经创建

var name='nhy';

functiona(){

    var name='dsx';

    functionb(){

        console.log(name);

    }

    returnb

}

 

varc=a();

c();

3、函数的作用域存在作用域链（代码不执行时，先生成作用域链）

当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则

function outer(){

    name='nn';

    function inner(){

        var name='ii'

        console.log('in',name)

    }

 

    console.log('out',name);

    inner()

}

outer();

函数不调用时，只生成作用域，当调用时遵循作用域链执行，name都为hhh

function outer(){

    var name='nn';

    function inner(){

        console.log('in',name)

    }

 

    var name='hhh';

    console.log('out',name);

    inner()

}

outer();

4、函数内,局部变量提前声明JavaScript的函数在运行前会找到函数内的所有局部变量执行

var xxx;

function func(){

    console.log(name);

    var name='dsx';

}

func();

 

ES6

var demo=function(a,b){

    alert(a+b)

};

demo(2,2);

//箭头函数时es6的写法，多个参数括号括起来接一个=>大括号中的写的和其他函数中相同

var rs=(a,b)=>{

    alert(a+b)

};

rs(1,2);

//单个参数可以省略括号但是建议写上

var rs2=(a)=>{

    alert('a')

};

rs2();

//    箭头函数可以解决在vue中写请求时获取不到当前vue实例data数据的问题

 

//ES6对象简写

let name='aa';

let age=12;

var person={

    name:name,

    age:age,

    show:function(){

        

    }

};

person.show();

 

let person={

    name,

    age,

    show(){

        alert(this.age)

    }

};

person.show()

7.面向对象

//在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用

//JavaScript的类默认就拥有了Python的构造函数__init__

function Foo(name){

    this.name=name;

}

//创建对象时JavaScript需要用到new关键字来创建对象

var obj=newFoo('dsx');

console.log(obj.name);

 

//类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源

//创建对象时，say每次创建对象，都会创意一个say的方法。

function Foo1(name){

    this.name=name;

    this.say=function(){

        console.log(this.name)

    }

}

var obj1=newFoo1('dsx_obj1');

obj1.say();

//完善类的定义

function Foo2(name){

    this.name=name

}

//类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时去现在Foo中找，没有找到，会在去原型中找

是否有该方法。有执行，没有就报错

Foo2.prototype={

    say:function(){

        console.log(this.name)

    }

};

var obj2=newFoo2('dsx_obj2');

obj2.say();

8.转义

1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义

2、&代表参数的链接，如果就是想传&给后端那么必须转义

decodeURI(url)URl中未转义的字符

decodeURIComponent(url)URI组件中的未转义字符

encodeURI(url)URI中的转义字符

encodeURIComponent(url)转义URI组件中的字符

 

字符串转义

var name='大师兄'

escape(name)对字符串转义

unescape(name)转义字符串解码

9.ajax

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

if(条件){     执行代码块 }elseif(条件){     执行代码块 }else{     执行代码块 };   if(1==1){     console.log() }elseif(1!=1){     console.log() }elseif(1===1){     console.log() }elseif(1!==1){     console.log() }elseif(1==1&&2==2){//and     console.log() }elseif(1==1||2==2){//or     console.log() }   switch(a){     case1:         console.log(111);         break;     case2:         console.log(222);         break;     default:         console.log(333) }