EcmaScript
es介绍
拥有内核的浏览器:ie 火狐 chrome 苹果 欧鹏
世界上第一个商业化浏览器是 网景(netscape)navigater (导航者)
ie 探索者 ,微软将ie深度集成到windows操作系统中。
微软和网景之间的官司
网景最早在navigater加入了程序,liveScript。
微软仿照网景,也在ie中加入了程序,JScript。
网景找到java,java授权网景可以在自己的产品中使用java的商标。
于是网景 liveScript --> JavaScript。
网景在倒闭之前 将JavaScript代码公开,提交到 ecma(欧洲计算机制造商协会)类似w3c,ecma262标准。
es 1 2 3 5 6 7 8
es5普遍受支持,es6 ie678不支持。
2.数据类型
从核心结构上划分,es5的数据分为6大类型
值类型:字符串、数字、布尔、空、未定义、(es6新增 不确定(独一无二)类型)
引用类型:对象
es内置的对象类型:
object、日期时间、数组、算数对象、正则表达式
es没有任何输入输出语句,es是一个寄生虫语言,es程序要执行必须依靠宿主。
宿主(浏览器、nodejs)
宿主也会带给es一些对象类型
元素、文本
3.引入方式
外部、内部、行内
优先外部,其次内部,不推荐行内
<div onclick='alert(222)'>123123123</div>
<script src='js/demo1.js'></script>
<script>
alert(456);
</script>
"use strict";//使用es5的严格模式
变量或常量的命名规则:
1、不能和系统关键字或保留字一致。
2、可以使用大小写的字母、数字、下划线、$。
3、数字不能放在首位。
// es5没有常量,只有变量
var abc = '123';
var a,b = 1,c;
abc = true;
var bbb;
bbb = 123;
// es6标准
// let用来定义变量
let abc = 123;
// const用来定义常量
const d = [1,2,3];
d[0] = 123;
4.字符串
字符串类型是es的核心类型,es是弱类型,es把所有非字符串类型
都当作字符串来存储(任何类型都能转化为字符串)。
字符串类型的属性:
length 返回数字类型,表示字符串的长度,只读。
var str = new String(123);
var str = String(123);
var str = '123';
console.log(str.length)
charAt(index) 通过索引值返回字符串中的一个字符
charCodeAt(index) 通过索引值返回字符串中一个字符的uni编码值
String.fromCharCode(unicode) 通过uni编码还原一个字符串
indexOf(searchStr,posIndex)
lastIndexOf(searchStr,posIndex)
查找searchStr在字符串中首次出现的位置,找不到返回-1
字符串的截取:
substr(num,length)
substring(startIndex,endIndex)
slice(startNum,endNum)
5.数字类型,布尔,空,未定义
// NaN 是数字,但表示的含义是非数字
任何类型都可以转化为布尔值,
空字符串为假,非空字符串为真
0和NaN是假,其他数字为真。
null、undefined 为假
所有的对象类型都为真
null 有值,值为空
undefined 值未定义
6.运算符
1、算数运算符
+ - * / % ++ –
2、赋值运算符
= += -= *= /= %=
3、逻辑运算符
&& || !
4、比较运算符
< >= <= == === != !==
7.日期和时间
时间的方法在get/set 后面跟UTC表示设置或获取的时间是世界标准时间
var date = new Date();
var txt = '';
txt += date.getFullYear() + '年';
txt += (date.getMonth()+1) + '月';
txt += date.getDate() + '日';
txt += '星期' + date.getDay();
txt += ' ' + date.getHours();
txt += ':' + date.getMinutes();
txt += ':' + date.getSeconds();
txt += ' ' + date.getMilliseconds();
txt += ' 时间戳' + date.getTime();
8.数组
var arr = new Array(1,2,3);
var arr = [1,2,3];
当参数只有一个且是数字的时候,
标准写法代表开5个房间,房间为空
简写代表开一个房间,里面住着数字5
var arr = new Array(5);
var arr = [5];
console.log(arr)
length 返回数组的长度(可读可写)
方法:
concat(item1,....itemN)
连接多个数组或内容,返回新的数组。
字符串和数组的相互转化
数组.join(分隔符) 将数组转化为字符串
字符串.split(分隔符) 将字符串转化为数组
数组的操作:
unshift push()
数组(splice)
shift pop()
凡是新增的方法,都返回新增后数组新的长度
凡是删除的,都返回被删除的元素
splice返回被删除的元素
数组的截取
slice(startNum,endNum)
reverse()反转
sort()排序
正则表达式
正则表达式的方法
exec(string) 检索字符串中指定的值。返回找到的值
test(string) 检索字符串中指定的值。返回 true 或 false。
支持正则表达式参数的字符串方法
search(正则表达式/string) 查找字符串是否包含指定的字符串或排列规则,
找到了返回index,找不到返回-1.
match(正则表达式/string) 找字符串是否包含指定的字符串或排列规则,
返回数组包含所有匹配到的内容。
replace(正则表达式/string,string) 字符串的替换
split(正则表达式/string) 字符串转数组
匹配规则(部分)
[abc] [a-z] [0-9] [a-z0-9A-Z]
匹配中括号内包含字符中的任意一个字符。
[^abc]
匹配除了中括号内包含字符以外的任意一个字符。
(red|blue|green)
匹配red或者blue或者green中的任意一组字符。
/^$/
^放在正则的第一位时,匹配字符串的开始位置
$放在正则的最后一位时,匹配字符串的结束位置。
\ 叫转义字符,按照一定的规则,将普通字符转化为特殊字符,
将特殊字符转义为普通字符。
例如:[0-9] [0\-9]
[\\]
a+ 匹配a出现至少一次 a{1,}
a* 匹配a出现0次或多次 a{0,}
a? 匹配a出现0次或一次 a{0,1}
a{3} 匹配a出现3次
a{3,} 匹配a出现至少3次
a{3,5} 匹配a出现至少3次最多5次
例子
// email验证
// 前端所做的表单验证
// 是防止好人写错
// 不是防止坏人搞破坏
var txt = '2575057@qq.com.cn';
var reg = /^.+@.+(\.\w+)+$/
if(reg.test(txt)){
document.write('正确')
}else{
document.write('错误')
}
10.实例
1.电子时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子时钟</title>
</head>
<body>
<h1 id='clock'></h1>
<script>
var h1 = document.getElementById('clock');
setInterval(doit,13);
function doit() {
var txt = '';
var date = new Date();
txt += date.getFullYear() + '年';
txt += (date.getMonth()+1) + '月';
txt += date.getDate() + '日';
txt += '星期' + date.getDay();
txt += ' ' + date.getHours();
txt += ':' + date.getMinutes();
txt += ':' + date.getSeconds();
txt += ' ' + date.getMilliseconds();
h1.innerHTML = txt;
}
</script>
</body>
</html>
效果图
2.随机选餐系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机选餐系统</title>
<style>
h1,div,h2{
text-align: center;
}
</style>
</head>
<body>
<h1>随机选餐系统1.0</h1>
<div>
<button id='btn'>开始</button>
</div>
<h2 id='txt'></h2>
<script>
// 备菜
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var lunbo;
var foods = [];
foods.push('凉皮');
foods.push('猫耳朵');
foods.push('米饭炒菜');
foods.push('面');
btn.onclick = doit;
function doit() {
if(btn.innerHTML == '开始'){
btn.innerHTML = '停止';
lunbo = setInterval(change,20)
}else{
btn.innerHTML = '开始';
clearInterval(lunbo);
}
}
function change() {
var n = Math.floor(Math.random()*foods.length);
txt.innerHTML = foods[n]
}
</script>
</body>
</html>
截图效果