JS 基础

HTML中的三把利器的JS 又称为JavaScript,跟java一点关系都没有，javascript 和我们学习的Python，c++等都是一门独立的语言，python的解释器有python2.7   python3.x  浏览器就是javascript的解释器。

引入javascript

<script src = 'aaa.js'> </script>

既可以在header中引入js也可以在body中引入js， 但是如果在head中引入js，影响页面的打开速度，风险很大；

所以通常在body的最下面引入js ，这样页面可以先展示html和css等最后再加载js。

js变量

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

js中用var来声明局部变量

name = 'dgl'   //这是全局变量

var tmp = document.getElementBy('id')//声明局部变量

字符串

//定义字符串

var str = '你说了什么'

//字符串操作

var  string_name = str+'今天去钓鱼'   //拼接字符串

str.concat('钓了很多余')  //拼接字符串

str.charAt(1)根据下标获取字符串中的一个字符

str.substring(1,3)根绝下标获取字符串的子串，前取后不取

str.length  获取字符串的长度

str.indexof('钓鱼')   获取子串的下标

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

str.toLowerCase()  小写

str.toUpperCase()  大写

str.split('钓鱼',1)   切片返回数组，第二个参数取分割后数组的前几个元素

 javascript只有一种数字类型。数字类型可以带小数点也可以不带

var num = 1;

var score = 188.333

javascript 可以在字符和数字类型之间转换

var n = parseInt(num)  //字符串转数字

var f =  parseFloat(num) //转成小数

//布尔类型（true  or  false）  必须是小写

字典类型（对象类型）

var tmp ={'dg':'benz','rb'：'丰田'，'mg':'凯迪拉克'}

var  shengyou = tmp.rb

var shufu =tmp.dg

delete tmp['rb']  删除元素

delete tmp.mg  删除元素 

数组类型

数组类型的创建

1、var  list1 = ['魔术'，骑士'];

2、var list2 = new Array();

lis2[0]='小猫';

list2[1]='阿狗';

3、 var list3 = new Arrray('校花','小青')

数组操作：

list.length   数组的长度

list.push('nicai')  在数组的末尾添加参数

list.pop()获取末尾最后一个元素并删除该元素

list.shift()  从头部获取一个元素并删该元素

list.unshift('开始')从头部插入一个元素

list.splice(start,deletcount,value) //第一个参数代表起始坐标；第二个代表替换或者删除的数量；最后一个代表替换或者添加值

list.splice(0,0,tmp)   在坐标0处添加tmp  

list.splice(0,1,tmp)  在表做0处替换成tmp
list.splice(0,1) 删除0坐标的原色

list.slice(1,2)切片

list.sort()排序

list.reverse()反转

list.concat(['iii'])拼接数组

 

javascript条件判断和循环语句

js有两种条件判断语句  if和switch

if格式：

if (1==2){

　　alert('hehe')

}else if(1==1){

　　alert('enen')

}else if (1=1 and 2==2){       //and 和&表示并且

　　alert('yes')

}else if (3==4 or 5==6 ){    //or  和 ||代表或者

　　alert('5678')

}

 eg:

//        var tmp = document.getElementById('i2').value
//            if (tmp==1){
//                alert("tmp==1")
//
//            }else if (tmp==2){
//                alert('tmp==2')
//            }else{
//                alert('none')
//            }

switch是强类型判断，必须保证类型和值同时相同
eg:

//    function switch_demo(){
//        var tmp = document.getElementById('i2').value
//        switch (tmp){
//            case '1'://类型和值必须同时都一致才往下走
//                alert(1);
//                break;
//            case '2':
//                alert(2);
//                break;
//            default:
//                alert(3)
//
//        }

循环语句：

for循环和while循环

1、     for (var i in tmp){console.log(tmp[i])};//支持字典和数组
2、        for (var i=0;i<tmp.length;i++){console.log(tmp[i]) ;   //不支持字典
3、while(1==1){
　　console.log(true)
}

函数操作
1、普通函数
function 函数名(形参, 形参, 形参) {

    执行代码块

}

eg:

function demo(name,age){
    console.log(name,age);
    return '返回值' ;         //返回值
}
2、匿名函数

//     var target = document.getElementById('i1');// 必须有分号
//     target.onclick=function () {
//       console.log(11111)
//         confirm(111)
3、自执行函数，且自动执行

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

(function (name) {

    console.log(name)

})('ddl');

 

函数的作用域：

js是以代码块{} 作为作用域的

 

1、JavaScript是以函数作为作用域

function tmp() {

    var name = 'dgl';

    console.log(name)

}

tmp();

console.log(name);     结果dgl    

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

var name = 'nhy';

function a() {

    var name='dgl';

    function b() {

        console.log(name);

    }

    return b

}

 

var c = a();

c();        结果dgl

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

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

function outer() {

    name = 'nn';

    function inner() {

        var name = 'ii'

        console.log('in', name)

    }

 

    console.log('out', name);

    inner()

}

outer();   结果  out  nn    in  ii

函数不调用时，只生成作用域，当调用时遵循作用域链执行，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();     结果什么也没有

 

面向对象

js作为一种高级语言当然是面向对象的，区别方式为是否有this，如果有就可以当做是类来用
var obj = new Foo('dsx');

console.log(obj.name);

 

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

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

function Foo1(name) {

    this.name = name;

    this.say = function () {

        console.log(this.name)

    }

}

var obj1 = new Foo1('dsx_obj1');

obj1.say();

// 完善类的定义

function Foo2(name) {

    this.name = name

}

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

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

Foo2.prototype = {

    say: function () {

        console.log(this.name)

    }

};

var obj2 = new Foo2('dsx_obj2');

obj2.say();

<input type="button" value="弹出弹框" id="i3"  onclick="switch_demo1(this)">   this代表当前标签
<input type="text" id="i2" placeholder="switch">

<script>

function switch_demo1(ths){
    console.log(ths.nextElementSibling.value);
}

</script>


序列化：
json.stringfy(obj)  序列化相当于python中json.dumps
json.parse(str)    反序列化  相当于啊python中的json.loads

转义：

转义url和特殊字符

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

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

encodeURI(url) URI中的转义字符

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

 

字符串转义

var name='大师兄'

escape(name) 对字符串转义

unescape(name) 转义字符串解码