JavaScript2.0

2018-08-21 本文已影响0人蘑菇plus

JavaScript发展历程

网景公司，第一款浏览器，倒闭了
mozilla基金会，火狐浏览器
哥们：发明了一门语言 js 非常随意无可取代
javascript java 很多语法非常的灵活随意
微软（ie）
兼容性问题。js、html、css浏览器翻译
浏览器分为高级、低级浏览器
高级：火狐、谷歌、ie8以后
低级：ie8以下的浏览器

web方向：php、java、python，服务端的语言
客户端===服务端

0、js引入方式和打印方式

四种引入方式
（1）<a href="javascript:alert('集合，准备团战')">百度一下</a>
（2）<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我，马上到')"></div>
（3）在html页面的任何位置加入 <script>js代码</script>
（4）在html页面的任何位置加入 <script src='js.js'></script>
三种打印方式
（1）alert弹窗打印
（2）console.log('打印的内容') 结合浏览器控制台查看
（3）document.write('打印的内容') 往html文档中写内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="js.js"></script> -->
</head>
<body>
    <a href="javascript:alert('集合，准备团战')">百度一下</a>
    <div style="width:200px; height:200px; background-color:red" onclick="alert('等等我，马上到')"></div>
</body>
</html>
<script>
    // alert('猥琐发育，别浪')
    // document.write('<b>注意，我来抓人了</b>')
</script>

1、函数

全局变量和局部变量
全局变量：直接定义的变量，全局有效
加var和不加var都一样
局部变量：函数体内定义的变量，只在函数体内有效
如果局部前面有var，该变量真是一个局部变量
如果局部前面没有var，该变量其实是一个全局变量，在函数调用之后，该变量即可随便使用
上面知道即可，一般情况定义变量都加var
如果局部和全局同名，优先使用局部变量
匿名函数
没有函数名的函数，需要将其赋给一个变量，然后变量按照函数的形式进行调用即可
封闭空间
将匿名函数用小括号括起来，然后在后面再加一个小括号调用这个匿名函数，称之为封闭空间

全局变量和局部变量

<script>
    // var a = '李白'
    // b = '杜甫'
    // // alert(b)
    // function demo() {
    //     c = '白居易'
    //     alert(c)
    //     // alert(b)
    // }
    // demo()
    // alert(c)

    var m = 100
    var n = 200

    function demo() {
        // var m
        // var n
        var m = 300
        var n = 400
        console.log(m, n)
    }

    demo()
    console.log(m, n)
</script>

封闭函数

<script>
    // var a = function () {
    //     alert('天青色等烟雨，而我在等你')
    // }
    // a()

    // var a = function () {
    //     alert('这是一个函数')
    // }
    // a()
    // var b = a
    // b()

    // function demo() {
    //     alert('哈哈哈')
    // }
    // var a = demo
    // a()

    function add(m, n) {
        return m + n
    }
    function sub(m, n) {
        return m - n
    }

    function cacl(m, n, fn) {
        return fn(m, n)
    }

    // alert(cacl(100, 200, sub))
    alert(cacl(100, 200, function (m, n) {
        return m * n
    }))

    // (function (m, n) {
    //     alert('炊烟袅袅升起,隔江千万里===' + m + n)
    // })('周杰伦', '双节棍')
</script>

2、数组

定义：array
遍历:
数组定义通过索引进行访问，索引从0开始
但是数组也可以通过属性值追加属性和值，但是一般不这么使用
遍历的时候，通过for进行遍历只能遍历索引数组，通过forin进行遍历，既可以遍历索引，又可以遍历属性
字符串遍历
通过索引进行遍历，索引从0开始

<script>
var arr1 = [1, '周杰伦', 2, '王力宏']
arr1['name'] = '狗蛋'
arr1['height'] = 180
// var arr = []
// var arr2 = new Array()

// 通过下标进行访问，下标从0开始
// alert(arr1[1])
// alert(arr1)
// alert(arr1['name'])
// console.log(arr1[4])
// 遍历数组
// for (var i = 0; i < arr1.length; i++) {
//     console.log(arr1[i])
// }

// for (var i in arr1) {
//     console.log(arr1[i])
// }

string1 = '12345,上山打老虎'
for (var i = 0; i < string1.length; i++) {
    console.log(string1[i])
}
</script>

3、对象

三种方式：
（1）构造方法
（2）通过官方创建
（3）直接写一个对象即可
obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}
属性的引号可以添加也可以不添加，一般就不加了
使用时候
obj['name'] 或者 obj.name
在js中json格式字符串和js对象相互转化的函数
将js对象转化为json字符串
string = JSON.stringify(obj)
json字符串转化为js对象
obj = JSON.parse(string)
obj = eval('(' + string + ')')

<script>
/*
function Person(name, age, height, weight) {
    this.name = name
    this.age = age
    this.height = height
    this.weight = weight
    this.say = function () {
        console.log('我的名字叫做' + this.name + '==我的年龄为' + this.age + '==我的身高为' + this.height + '==我的体重为' + this.weight)
    }
}
obj = new Person('黄晓明', 40, 150, 200)
obj.say()
*/

// 创建对象方式2
// obj = new Object()
// obj.name = '黄晓明'
// obj.age = 40
// obj.height = 150
// obj.say = function () {
//     alert('haha')
// }
// console.log(obj)

// 创建对象方式3
// json格式，前后端交互使用的格式，json格式在js里面原生支持
obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}

// 没有这种写一个class，然后里面写属性写方法这种特点了
// console.log(obj.name)
// console.log(obj['name'])
// 将js里面的对象转化为json格式字符串
string = JSON.stringify(obj)
// console.log(typeof(string))
// js如何将json格式字符串转化为js对象
// ming = JSON.parse(string)
ming = eval('(' + string + ')')

console.log(ming)
</script>

4、常用对象和函数

parseInt
将字符串转化为整型，必须以数字开头，只要碰到非数字，转化结束
如果以非数字开头，转化为NaN, 两个NaN不能判断是否相等，判断是不是NaN可以使用 isNaN函数判断是不是NaN，是返回true，不是返回false
parseFloat
将字符串转化为浮点,必须以数字开头，碰到非数字立马结束，小数点不算
如果以非数字开头，转为NaN
Math对象
abs ：绝对值函数
ceil : 向上取整
floor : 向下取整
max : 取最大的值,传递过个参数，找到最大值
min : 传递多个参数，找到最小值
pow : 求幂
random : 随机值只能随机0-1之间的小数，如果需要随机5-10之间的数，自己实现
round ：四舍五入函数
字符串常用函数
indexOf ：字符串查找函数，返回查找到的字符串的第一个字母的下标，如果找不到，返回-1 类似于python里面的find
lastIndexOf ：字符串查找函数，找最后一次出现的位置，找不到返回-1，类似于python里面的rfind
substr : 字符串的提取 substr(start, length) 从start开始提取length个字符
replace : 字符串替换,只能替换第一个 string.replace(old, new)
toLowerCase ：全部转化为小写
toUpperCase : 全部转化为大写
fromCharCode : 所有的大写 65-90 所有的小写 97-122 数字 48-57
split : 按照特定的字符进行切割
数组常用函数
push : 给数组追加一个元素
pop : 弹出最后一个元素,只能这么做
shift : 弹出数组中第一个元素
unshift : 数组最前面添加一个元素
join : 字符串拼接 arr.join('*') 将列表里面所有的字符串按照 * 拼接
reverse : 将数组逆序
slice : slice(start, end) [start, end) 左闭右开
sort : 排序,如果都是数字，默认按照数字的ascii进行排序，如果想按照数字大小排序
arr.sort(function (a, b) {return a > b}) 从小到大排序
日期对象常用函数
getDate : 获得日期
getDay ：获得星期几 0-6 0表示周天
getMonth ： 0-11 当前月份减一
getFullYear : 得到年份
getHours : 得到小时 24小时进制
getMinutes : 得到分钟数
getSeconds : 得到秒数
getTime : 时间戳，毫秒数

    每一个都有对应的设置方法，自己看看
    创建日期对象的方式
    // 创建当前时间的时间对象
    d = new Date()
    // 根据指定的时间戳创建时间对象
    d = new Date(1534750144520)
    // 根据时间字符串创建时间对象
    d = new Date('2018/8/20 15:29:04')
    // 根据年月日时分秒值创建对象
    d = new Date(2018, 7, 20, 15, 29, 4)

<script>
// 将字符串转化为整型
/*
var string = 'a100px'
var string2 = 'b200'
var num1 = parseInt(string)
var num2 = parseInt(string2)
if (num1 == NaN) {
    console.log('相等')
} else {
    console.log('不相等')
} */
// var num = parseInt(string) + 100
// console.log(parseInt(string))
// var num = parseInt(string) + 100
// var string = num + 'px'

// var string = '3..14.15lalala'
// console.log(parseFloat(string))
// console.log(parseInt(string))

// console.log(Math.abs(-200))
// console.log(Math.ceil(3.14))
// console.log(Math.floor(3.14))
// console.log(Math.max(1, 200, 900, 56))
// console.log(Math.pow(2, 3))
// console.log(Math.random())

// console.log(Math.round(3.54))

// string = 'i love you BABY, you love me'

// console.log(string.split(' '))

// console.log(string.charAt(0))
// console.log(string[0])

// console.log(string.indexOf('love'))
// console.log(string.lastIndexOf('love'))
// console.log(string.substr(2, 4))
// console.log(string.replace('love', 'hate'))

// console.log(string.toLowerCase())

// console.log(String.fromCharCode(97))

// var arr = ['柳岩', '高圆圆', '韩红', '赵丽颖', '杨幂']

// console.log(arr.slice(1, 3))
// console.log(arr.reverse())
// console.log(arr.join('*'))
// arr.shift()
// arr.unshift('赵丽颖')


// arr.push('李宇春')

// console.log(arr)
// console.log(arr.pop(2))
// console.log(arr)

// var arr = ['baby', 'curry', 'anglebaby', 'love', 'taikongyi', 'anglebaby']

// var arr = [100, 15, 200, 29, 300, 56]

// console.log(arr.sort(function (a, b) {
//     return a > b
// }))

// 创建当前时间的时间对象
d = new Date()
// 根据指定的时间戳创建时间对象
d = new Date(1534750144520)
// 根据时间字符串创建时间对象
d = new Date('2018/8/20 15:29:04')
// 根据年月日时分秒值创建对象
d = new Date(2018, 7, 20, 15, 29, 4)
// console.log(d)
// console.log(d.getDate())
// console.log(d.getDay())
// console.log(d.getMonth())
// console.log(d.getFullYear())
// console.log(d.getHours())
// console.log(d.getMinutes())
// console.log(d.getSeconds())
// console.log(d.getTime())
</script>

<!-- lt = ['hello', 'baby']

string = '*'.join(lt) -->

5、js简单演示

背景切换
核心：页码中有一个标签，如果想给标签添加点击事件，只需要写onclick，如果想添加其它的，添加对应事件即可。在事件的后面就要写代码，通过js的DOM操作找到指定节点，将节点的属性修改即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <link id="lk" rel="stylesheet" href="yellow.css">
</head>
<body>
    <button onclick="document.getElementById('lk').href = 'red.css'">点我变成红色</button>
    <button onclick="document.getElementById('lk').href = 'yellow.css'">点我变成黄色</button>
</body>
</html>

6、获取对象

DOM操作，document object mxxx, 文档操作，document就是整个文档对象
document.getElementById 得到指定对象
document.getElementsByClassName 得到对象集合，符合类名要求的都可以得到
document.getElementsByName
document.getElementsByTagName 得到对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
</head>
<body>
    <div id="libai">日照香炉生紫烟,遥看瀑布挂前川</div>
    <div class="dufu">会当凌绝顶,一览众山小</div>
    <div class="dufu">安得广厦千万间,大庇天下寒士俱欢颜</div>
</body>
</html>
<script>
    // div1 = document.getElementById('libai')
    // console.log(typeof(div1))
    // div2 = document.getElementsByClassName('dufu')
    div3 = document.getElementsByTagName('div')
    console.log(div3[2])
</script>

7、常用事件

onmouseover ：鼠标移动上去触发
onmouseout : 鼠标离开的时候触发
onmouseup : 鼠标按下松开的时候触发
onmousedown : 鼠标按下的时候触发
onmousemove : 鼠标移动的时候触发
onclick : 点击的时候触发
ondblclick ：双击的时候触发
如下两个用在input框中
onblur : 失去焦点
onfocus : 获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:200px; height:200px; background-color:red" onmouseover="alert('明天我要嫁给你啦')"></div>
    <div style="width:200px; height:200px; background-color:green" onmouseout="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:blue" onmouseup="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:gray" onmousedown="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:pink" onmousemove="console.log('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:purple" onclick="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:orange" ondblclick="alert('后天我们要结婚')"></div>
    <input type="text" onblur="console.log('我失去了焦点，生活没有意义了')" onfocus="console.log('得到焦点，得到了全世界')"/>
</body>
</html>

8、获取、设置属性和内容

获取属性
odiv.id
odiv.className
odiv.style.width
odiv.style.height
odiv.style.backgroundColor
【注】在css中带杠的属性，到js中都修改为小驼峰即可
获取内容
odiv.innerHTML 获取标签里面的所有文本内容，带标签
odiv.innerText 获取标签里面的纯文本内容
点和中括号区别
能使用点的地方肯定能使用中括号，能使用中括号的地方不一定能使用点
点后面只能跟属性名
中括号里面可以写属性名字符串，也可以写变量
显示隐藏图片
this使用
切换背景色
表单内容控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="bai" class="li" name='wang' style="width:200px; height:200px; background-color:gold"><b>李白乘舟将欲行,忽闻岸上踏歌声,桃花潭水深千尺,不及汪伦送我情</b></div>
    <a href="www.baidu.com" id="lala"></a>
</body>
</html>
<script>
var odiv = document.getElementById('bai')
var oa = document.getElementById('lala')
// console.log(odiv.style.height)
// console.log(odiv.style.backgroundColor)

// console.log(odiv.innerHTML)
// console.log(odiv.innerText)
// console.log(odiv.style.width)
// console.log(odiv.style['width'])
// console.log(odiv['style']['width'])

obj = {name: '王宝强', age: 30}
console.log(obj.name, obj['name'])
for (var i in obj) {
    console.log(obj[i])
}
</script>

9、onload函数

在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下：

window.onload = function(){// some thing to do};