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