web6(EcmaScript)

最新推荐文章于 2022-05-25 23:17:59 发布

蒙蒙小公举

最新推荐文章于 2022-05-25 23:17:59 发布

阅读量397

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_44102678/article/details/104452030

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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>

截图效果
在这里插入图片描述

蒙蒙小公举

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web6(EcmaScript)

EcmaScriptes介绍拥有内核的浏览器:ie 火狐 chrome 苹果欧鹏世界上第一个商业化浏览器是网景（netscape）navigater （导航者）ie 探索者，微软将ie深度集成到windows操作系统中。微软和网景之间的官司网景最早在navigater加入了程序，liveScript。微软仿照网景，也在ie中加入了程序，JScript。网景找到java...
复制链接

扫一扫

专栏目录