JavaScript编程语言

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

代码存在形式以及放置的位置

JavaScript存在的形式

<!-- 方式一文件引入 -->

<script src="JS文件"></script>

<!-- 方式二页面中直接写 -->

<script>

    Js代码内容

</script>

JavaScript放置的位置

HTML的head中
HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

建议：非影响整个页面布局的js可以放在body中的最下位置；

例通过输入内容弹出alert框

<script>

    function GetData() {

        var i = document.getElementById("user")

        alert(i.value);

    }

</script>

<body>

    <input type="text" id="user" />

    <input type="button" value="点我" onclick="GetData();">

    <script>

        function GetData() {

            var i = document.getElementById("user")

            alert(i.value);

        }

    </script>

</body>

javascrip变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script>

    name = 'seven';         // 全局变量

    function func(){

        var name = "lin";   // var 局部变量

    }

</script>

在JavaScript中的注释：

单行 //

多行 /*包过内容*/

基本数据类型

原始类型
- 数字
- 字符串
- 布尔值
对象类型
- "列表"数组
- "字典"
- ....

数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

将其他值转换为数字

parseInt(..)将某值转换成数字，不成功则NaN。

parseFloat(..)将某值转换成浮点数，不成功则NaN。

<script>

    age = "18";           //定义一个变量的字符串 age = "18"

    i = parseInt(age);    //将字符串转化为数字

    z = parseFloat(age);  //将字符串转换为小数类型Float

</script>

特殊值:

NaN,非数字.可使用 isNaN(num) 来判断。

Infinity，无穷大.可使用 isFinite(num) 来判断。

字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

1.定义字符串并通过下标取出相应的值

a="zhangsan"

"zhangsan"

a.charAt(0)

"z"

a.charAt(1)

"h"

a.charAt(2)

"a"

2.字符串下标的截取(顾头不顾尾)

a="zhangsan"

a.substring(0,5)

"zhang"

a.substring(0,3)

"zha"

3.获取字符串的总长度;

a="zhangsan"

a.length

8

4.根据指定的字符串(空格),对内容切割为列表split;

a="zhang san li si"

"zhang san li si"

a.split(" ")

(4) ["zhang", "san", "li", "si"]

// 获取切割的前2个值

a.split(" ",2)

(2) ["zhang", "san"]

字符串其他常见方法:

obj.length                           长度

obj.trim()                           移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n)                        返回字符串中的第n个字符

obj.concat(value, ...)               拼接 和 "+" 一样效果

obj.indexOf(substring,start)         子序列位置(从前往后)

obj.lastIndexOf(substring,start)     子序列位置(从后往前)

obj.substring(from, to)              根据索引获取子序列

obj.slice(start, end)                切片

obj.toLowerCase()                    大写

obj.toUpperCase()                    小写

obj.split(delimiter, limit)          分割

obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)

obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本；

                                     $'：位于匹配子串右侧的文本

                                     $$：直接量$符号

布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写

a=true

true

a=false

false

布尔类型判断的符号

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

数组

JavaScript中的数组类似于Python中的列表

1.定义数组

a = [11,222,333,444]

(4) [11, 222, 333, 444]

2.获取数组的长度length

a = [11,222,333,444]

a.length

4

3.插入、删除或替换数组的元素splice

a = [11,222,333,444]

(4) [11, 222, 333, 444]

// a.splice(起始位置,删除1个数,要插入的值)

a.splice(1,1,99)

[222]

a

(4) [11, 99, 333, 444]

// a.splice(起始位置,删除0个数,要插入的值)在指定的位置增加值

a.splice(1,0,888)

[]

a

(5) [11, 888, 99, 333, 444]

// a.splice(起始位置,删除1个数)只指定删除个数,不指定增加值

a.splice(1,1)

[888]

a

(4) [11, 99, 333, 444]

4.切片(顾头不顾尾)

a

(4) [11, 99, 333, 444]

a.slice(1,3)

(2) [99, 333]

5.join在JS中是给数组按照指定的方式拼接(python中是给字符串使用的)

a

(4) [11, 99, 333, 444]

a.join("-")

"11-99-333-444"

6.将2个数组拼接到一起;

a=[11, 99, 333, 444]

(4) [11, 99, 333, 444]

b=["aa","bb","ccc","dddd"]

(4) ["aa", "bb", "ccc", "dddd"]

a.concat(b)

(8) [11, 99, 333, 444, "aa", "bb", "ccc", "dddd"]

常见功能：

obj.length          数组的大小

obj.push(ele)       尾部追加元素

obj.pop()           尾部获取一个元素

obj.unshift(ele)    头部插入元素

obj.shift()         头部移除元素

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

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

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

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

obj.slice( )        切片

obj.reverse( )      反转

obj.join(sep)       将数组元素连接起来以构建一个字符串

obj.concat(val,..)  连接数组

obj.sort( )         对数组元素进行排序

字典

1.定义字典

a={"k1":"v1","k2":"v2","k3":"v3"}

{k1: "v1", k2: "v2", k3: "v3"}

a.k1

"v1"

定时器setInterval

格式

setInterval("执行的代码",间隔时间毫秒)

1.定义一个定时器,每2秒钟弹出一个alert框

<script>

    // setInterval创建一个定时器,多久执行一次

    // 第一个参数是要执行什么;

    // 第二个参数多久执行一次;2000毫秒,2秒钟

    setInterval("alert(123)",2000)

</script>

2.通过定时器中输出console.log信息

<script>

    // function f1()  定义一个函数 f1

    function f1() {

        // 在浏览器Console窗口,打印输出内容一般用于打印招聘信息

        var logs="这里是xxoo招聘,请把简历投放到xxx@ooo.com"

        console.log(logs);

    }

    // setInterval 定时器

    setInterval("f1()",2000)

</script>

通过定时器setInterval实现轮播标签

1.定义一个div,设定一个id=i1

<div id="i1">欢迎大人物莅临指导!</div>

2.通过document.getElementById("i1")获取表情内容

tag = document.getElementById("i1")

<div id=?"i1">?欢迎大人物莅临指导!?</div>?

tag

<div id=?"i1">?欢迎大人物莅临指导!?</div>?

3.通过innerText获取标签内的内容(innerText可以获取内容也可以set内容)

content=tag.innerText

"欢迎大人物莅临指导!"

content

"欢迎大人物莅临指导!"

4.通过下标的截取,从新拼接字符串;将拼接字符串从新赋值给tag.innerText

f=content.charAt(0)

"欢"

l=content.substring(1,content.length)

"迎大人物莅临指导!"

new_content=l+f;

"迎大人物莅临指导!欢"

tag.innerText=new_content

"迎大人物莅临指导!欢"

实现效果(它不动我也挺无奈,这个锅要cnblogs背,放html页面试试吧!!)

欢迎大人物莅临指导!

实现代码

<body>

<div id="i1">欢迎大人物莅临指导!</div>

<script>

    function func() {

        // 获取id为 i1 的标签

        var tag=document.getElementById("i1");

        // 获取标签内部的内容

        var content=tag.innerText;

        // 标签的第一个值

        var f=content.charAt(0);

        // 标签的第一个值后的所有值

        var l=content.substring(1,content.length);

        // 拼接新的字符串

        var new_content = l+f;

        // 将值从新赋给 tag.innerText

        tag.innerText = new_content;

    }

    // 0.5秒执行一次

    setInterval("func()",500)

</script>

</body>

通过定时器，页面显示当前时间

<body>

    <div id="isj"></div>

    <script>

        function currentDate() {

            var da = new Date();

            var year = da.getFullYear();

            var month = da.getMonth()+1;

            var day = da.getDate();

            var hours = da.getHours();

            var minutes = da.getMinutes();

            var seconds = da.getSeconds();

            var txt = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

            document.getElementById("isj").innerHTML = txt;

        }

        setInterval(currentDate,1000)

    </script>

</body>

语句和异常

for循环语句

1.默认循环列表时获取的为下标;

b = ["aa", "bb", "ccc", "dddd"]

        // var 定义的为局部变量

        for(var i in b){

            console.log(i)

        }

0

1

2

3

2.通过下标值获取相应的值;

b = ["aa", "bb", "ccc", "dddd"]

        // var 定义的为局部变量

        for(var i in b){

            // 通过下标获取值

            console.log(b[i])

        }

aa

bb

ccc

dddd

3.默认循环字典获取的是key值:

a = {k1: "v1", k2: "v2", k3: "v3"}

        for(var i in a){

            console.log(i)

        }

k1

k2

k3

4.通过key获取相应的值:

a = {k1: "v1", k2: "v2", k3: "v3"}

        for(var i in a){

            console.log(a[i])

        }

v1

v2

v3

5.通过表达式形式写for循环

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

}

if条件语句

单条件语法:

if(条件){

}else{

}

多条件语法:

if(条件){

}else if(条件){

}else if(条件){

}else{

}

函数

基础函数

JavaScript中函数基本上可以分为一下三类：

1.普通函数

// 普通函数 function 函数名(形参){语句}

function func(arg){

    return true;

}

2.匿名函数,没有名字的函数

setInterval(function(){

    console.log(123);

},5000)

3.自执行函数，从上往下解释时候，自动执行

格式：

    (function(形参){

        console.log(形参);

    })(实参)

示例：

(function(arg){

    console.log(arg);

})('123')

序列化

常用于用户向后台发送数据的时候，返回的值都为字符串，拿到字符串后需要反序列化将字符串转换为列表进行循环操作；

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

1.将列表序列化为字符串

li=[11,22,222,333,444,555]

(6) [11, 22, 222, 333, 444, 555]

str_li=JSON.stringify(li)

"[11,22,222,333,444,555]"

2.将字符串反序列化为列表

new_li = JSON.parse(str_li)

(6) [11, 22, 222, 333, 444, 555]

new_li

(6) [11, 22, 222, 333, 444, 555]

转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

1.将URL中的中文转换为%字符串

url="https://www.sogou.com/web?query=叨客厨子"

"https://www.sogou.com/web?query=叨客厨子"

new_url = encodeURI(url)

"https://www.sogou.com/web?query=%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"

2.将%号字符串，转换为中文

decodeURI(new_url)

"https://www.sogou.com/web?query=叨客厨子"

3.将URL中的//也转换为%字符

a = encodeURIComponent(url)

"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"

4.将%字符串转换回中文

decodeURIComponent(a)

"https://www.sogou.com/web?query=叨客厨子"

Date时间对象

获取日期和时间

getDate()                 获取日

getDay ()                 获取星期

getMonth ()               获取月（0-11）

getFullYear ()            获取完整年份

getYear ()                获取年

getHours ()               获取小时

getMinutes ()             获取分钟

getSeconds ()             获取秒

getMilliseconds ()        获取毫秒

getTime ()                返回累计毫秒数(从1970/1/1午夜)

时间常见的格式

var D = new Date()

Mon Oct 16 2017 00:05:15 GMT+0800 (中国标准时间)

D.toISOString();

"2017-10-15T16:05:15.267Z"

D.toJSON()

"2017-10-15T16:05:15.267Z"

D.toLocaleDateString()

"2017/10/16"

D.toLocaleString()

"2017/10/16 上午12:05:15"

D.toTimeString()

"00:05:15 GMT+0800 (中国标准时间)"

D.getFullYear()+"-"+(D.getMonth()+1)+"-"+(D.getDate())

"2017-10-16"

作用域

JavaScript以函数作为作用域；
函数的作用域在函数未被调用之前，已经创建；
函数的作用域存在作用域链，并且也是在被调用之前就创建；
函数内局部变量，会提前声明，但不会提前赋值；