JavaScript

cdmmc3

已于 2022-08-31 21:00:01 修改

阅读量417

点赞数

分类专栏：前端三件套文章标签： javascript 前端 java

于 2022-08-30 19:57:59 首次发布

本文链接：https://blog.csdn.net/cicadaaas/article/details/126610516

版权

前端三件套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

*1、定义：运行在游览器上的脚本语言

1、在HTML中嵌入Js代码第一种方式

<body>
        <!--1、实现功能：用户点击按钮 弹出消息框
            2、JS是一门时间驱动型的编程语言 依靠时间去驱动 然后执行相对应的程序
               在JS中有很多事件
               1）鼠标单击 click
               2)任何事件都会对应一个事件 onclick
               【注意：事件和事件句柄的区别：事件句柄是在事件单词前添加一个on
                 事件句柄是以HTML标签的属性存在的】
            3、onclick="js代码"  -->
        <input type="button" value="Hello" onclick="window.alert('Hello')"/>
        <input type="button" value="Hello" onclick="alert('Hello')"/>
        <input type="button" value="Hello" onclick="alert('Hello')"/>
</body>

3、引入外部js文件 src引入 href 引用

window.alert("hello world!");
<body>
        <!--在需要的位置引入js脚本文件-->
        <script type="text/javascript" src="嵌入3_.js"></script>
</body>

4、js变量

var 变量名；

变量名 = 值；

javascript 是一种弱类型语言没有编译阶段一个变量可以随意赋值

var i =100；

i = "uuu"；

i = new Object()；

*2、函数

1） js 中的函数不需要指定返回值类型

function 函数名(形参列表){

函数体；

}

function sum(a,b)

{ alert(a + b)； }

<body>
<script>
    var i;
    alert("i =" + i);
    function sum(a, b) {
        alert("总和=" + a + b);
    }
</script>
<input type="button" value="计算两数求和" onclick="sum(1,3);"/>
</body>

2）js中同名函数后面的函数会覆盖前面的函数

function uu(a,s){
   alert(a+s);
}
function uu(){
   alert("ioioioio");
}
uu(111111);//ioioioio

*3、全局变量和局部变量

1）全局变量：

声明在函数体外的变量属于全局变量其生命周期是：

游览器打开时声明关闭时销毁较耗费内存空间

<script>
    //全局变量
    var i = 100;
    alert(i);
</script>

2）局部变量：

声明在函数体中的变量包括一个函数的形参都是局部变量其生命周期是：

函数开始执行时开辟局部变量的内存空间函数执行结束后局部变量的内存空间释放生命周期较短

<script>
    //局部变量
    function uu() {
        var i = 400;
        alert("i=" + i)
    }
    uu();
</script>

3）一个变量在声明时没有使用var关键字那么无论这个变量在哪声明的都属于全局变量

<script>
    function yu(){
        name = "daming";
    }
    yu();
    alert(name);//daming
</script>

*4、数据类型

1）原始数据类型：Undefined Number String Boolean Null

2）引用类型：Object 及其子类

3） ES6之后加入 Symbol

4）JS中有一个运算符 typeof 可以在运行阶段动态获取变量的数据类型

<script>
function sum(q,a){
    if (typeof q =="number" && typeof a =="number"){
        return q + a;
    }
    alert("类型不符合条件")
}
var re = sum("qwe",1231);
alert(re);//；类型不符合条件
</script>

5）Number类型：

-1 0 1 2 3.14 100 .............NaN Infinity

整数小数正数负数不是数字无穷大都是Number类型

6）关于isNan函数：is Not a Number

true 表示结果不是一个数字 false表示结果是一个数字

7）parseInt()：可以将字符串自动转成数字向下整数位

8）parsefloat(): 字符串转成数字

9）Math.ceil（）向上取整

10）Boolean类型

11）String类型

<script>
    /*JS中创建字符串的两种方式：*/
    var w = "wqeqw";
    alert(typeof w);//string

    var q = new String("qwe");
    alert(typeof q);//Object

    //获取字符串长度
    alert(w.length);// 5
    alert(q.length);// 3
</script>

<script>
    /*JS中创建字符串的两种方式：*/
    var w = "wqeqw";
    alert(typeof w);//string

    var q = new String("qwe");
    alert(typeof q);//Object

    //获取字符串长度
    alert(w.length);// 5
    alert(q.length);// 3

    alert("http://oooooppppp".indexOf("http"));//0
    alert("http://oooooppppp".indexOf("https"));//-1  (未出现)

    //判断一个字符串中是否出现某个子字符串
    alert("http://oooooppppp".indexOf("https") >= 0 ? "出现" : "未出现");//不包含

    //replace(注意：只替换第一个)
    alert("name=value%name=value%name=value%name=value".replace("%","与"));
    
</script>

substr 和 substring 去区别

//substr 和 substring的区别
alert("qwertyui".substr(2,4));//  ert
alert("qwertyui".substring(2,4));//  er 不包含endIndex

*5、定义类和创建对象

1）JS中类的定义和构造函数的定义是放在一起的类的定义同时又是一个构造函数的定义

<script>
    /*定义类*/
    function W(){
        alert("qqqq");
    }
    /*调用方法*/
    W();

    /*创建对象*/
    var w = new W();
    alert(w)
</script>

<script>
    function Student(a, c, v) {
        this.name = a;
        this.gender = c;
        this.age = v;
    }

    var s1 = new Student("大明", '男', 12);

    alert(s1.name);
    alert(s1.gender);
    alert(s1.age);
    alert(s1["age"]);
</script>

2）prototype 扩展函数给类添加方法/函数

<script>
    function Product(id,name,size) {
        this.id = id;
        this.name = name;
        this.size = size;
    }

    var pro = new Product(1,"durian",10);

    //可以通过prototype这个属性来给类动态扩展属性及函数
    Product.prototype.getname = function(){
        return this.name;
    }

    //调用后期扩展的getname函数
    var pname = pro.getname();
    alert(pname);
</script>

9、 == 和 ===

*6、事件

1）第一种方式在标签中使用句柄

<body>
<script>
    function run() {
        alert("跑");
    }
</script>
<!--注册事件第一种方式：直接在标签中使用句柄-->
<input type="button" value="点击" οnclick="run()"/>
</body>

2）第二种方式

1、匿名函数

2、一步写完

document.getElementById("注册3").onclick = function() {
    alert("注册3");
}

<body>
<input type="button" value="注册" id="注册"/>
<input type="button" value="注册2" id="注册2"/>
<input type="button" value="注册3" id="注册3"/>

<script>
    function sleep() {
        alert("睡觉")
    }
    /*注册的第二种方式  使用纯JS代码完成事件的注册*/
    /*第一步 获取按钮对象 (document 内置对象 直接使用 代表HTML整个页面)*/
    var button1 = document.getElementById("注册");
    /*第二步 给对象onclick属性赋值*/
    button1.onclick = sleep;//千万不能加小括号

    /*匿名函数*/
    var button2 = document.getElementById("注册2");
    button2.onclick = function() {//这个函数没有名字 叫做匿名函数 同样也是一个回调函数
        alert("...................")
    }

    /*一步写完*/
    document.getElementById("注册3").onclick = function() {
        alert("注册3");
    }
</script>
</body>

1、load (解决顺序问题保证页面加载完成后)

<body>
<script>
    //页面加载过程中 将a函数注册给load事件
    //页面加载完毕后 load事件发生 此时执行回调函数a
    //回调函数a执行过程中 把b函数注册给id = "btn" 的click事件
    //当id = "btn"的节点 发生click事件之后 b函数被调用并被执行
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            alert("hellewwwd");
        }
    }
</script>

<input type="button" value="heh" id="btn"/>
</body>

2、回车 onkeydown

<body>
<script>
    /*回车 */
    window.onload = function(){
        var name = document.getElementById("name");
        name.onkeydown = function(event){
            if (event.keyCode === 13){
                alert("正在进行验证...")
            }
        }
    }
</script>
<input type="text" id="name"/>
</body>

3、void运算符

4、获取文本框的value

<body>
<script>
    //页面加载
    window.onload = function () {
    //匹配按钮
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            //获取文本框内输入的内容
            var usernameelt = document.getElementById("username");
            var username = usernameelt.value;
            alert(username);
        }
    }
</script>
<input type="text" id="username"/>
<input type="button" id="btn" value="获取name"/>
</body>

5、innerHTML

<head>
    <meta charset="UTF-8">
    <title>操作div和span</title>
    <style type="text/css">
        #div1{
            background-color: red;
            width:200px;
            height:200px;
            border:1px solid black;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<script>
    //1、页面加载完毕 执行回调函数
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                //2、设置div内容
                //3、获取div对象
                var divElt = document.getElementById("div1");
                //4、使用innerHTML属性来设置元素内部的内容
                divElt.innerHTML="qdwdqwuo";
            }
        }
</script>
<input type="button" value="设置div中的内容" id="btn"/>
        <div id="div1"></div>
</body>

*7、正则表达式

1、正则表达式：Regular Expression 主要用在字符串格式匹配上

2、常见的正则表达式符号

1、正则表达式验证注册邮箱

<body>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function() {
                    var email = document.getElementById("email").value;
                    var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = emailReg.test(email);
                    if (ok){
                        document.getElementById("emailError").innerText = "合法";
                    }else {
                        document.getElementById("emailError").innerText = "不合法";
                    }

                }
            }
        </script>
<input type="text" id="email"/>
<span id="emailError" style="color:red"></span>
<br/>
<input type="button" id="btn" value="验证"/>
</body>

8、表单注册

1、用户名不能为空 2、用户名必须在6-14位之间 3、用户名只能有数字和字母组成，不能含有其它符号（正则表达式)密码和确认密码一致,邮箱地址合法。 4、统一失去焦点验证 5、错误提示信息统一在span标签中提示，并且要求字体12号，红色。 6、文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value最终表单中所有项均合法方可提交

9、系统时间

1、获取系统当前时间

<script type="text/javascript">
    /*关于JS中内置的支持类： Date 可以用来获取时间/日期*/
    /*1、获取系统当前时间*/
    var nowTime = new Date();
    /*转换成具有本语言环境的日期格式*/
    nowTime = nowTime.toLocaleString();
    /*输出*/
    document.write(nowTime);
    document.write("<br>")
    document.write("<br>")

    /*2、定制获取年月日信息*/
    var t = new Date();
    var year = t.getFullYear();//返回年信息 以全格式返回
    var month = t.getMonth();//月份是：0-11
    var day = t.getDay();//获取一周中的第几天
    document.write(year);
    document.write(month);
    document.write(day);

    document.write("<br>")
    document.write("<br>")
    /*3、获取日信息*/
    var day1 = t.getDate();
    document.write(day1);
</script>

2、显示实时当前时间

<body>
<script type="text/javascript">
    function displayTime() {
        var time = new Date();
        var strTime = time.toLocaleString();
        document.getElementById("timeDiv").innerHTML = strTime;
    }

    /*每隔1秒 调用一次displayTime()函数*/
    function startTime() {
        v = window.setInterval("displayTime()", 1000);
    }

    function stopTime() {
        window.clearInterval(v);
    }

</script>
<input type="button" value="显示系统时间" onclick="startTime();"/>
<br>
<br>
<input type="button" value="系统时间停止" onclick="stopTime();"/>
<div id="timeDiv"></div>
</body>

10、内置对象Array

<body>
    <script>
        /*创建数组 数据类型任意*/
        var arr = [];
        alert(arr.length);

        var arr2 = [1,2,3,4,"das",2.333];
        alert(arr2.length);

        /*数组不会越界 数组会自动扩容*/
        arr[7] = "qwe";
        for(var i = 0; i < arr.length; i++){
            document.writeln(arr2[i]);
        }

        /*方法：*/
        var a = [1,2,3,"we"]
        //将数组中每个元素用这个连接上
        var str = a.join("----");//1----2----3----we
        alert(str);

        /*push压栈  在数组末尾添加一个元素*/
        a.push(19)

        /*pop弹栈  将数组末尾的元素弹出*/
        var w = a.pop()
        alert(w)

        /*反转数组*/
        a.reverse()
    </script>
</body>

11、JSON （轻量级的数据交换格式）

1、eval函数 : 将字符串当做一段代码进行执行

<body>
<script>
    /*eval函数：将字符串当做一段JS代码解释并执行*/
    window.eval("var i = 10");
    alert("i" + i);

    /*java连接数据库 查询数据后 将数据在java程序中拼接成JSON格式的“字符串” 将JSON格式的字符串响应到游览器
    * 也是就是说java响应到游览器上的仅仅是JSON格式的字符串 不是JSON对象
    * 于是需要使用eval函数将JSON格式的字符串转换成JSON对象*/

    /*这是java程序发过来的json格式的字符串*/
    var fromJava = "{\"name\":\"张三\",\"password\":\"123\"}";
    /*将以上json格式的字符串转换成json对象*/
    window.eval("var Obj = " + fromJava)

    /*访问json对象*/
    alert(Obj.name + "," + Obj.password);//在前端取数据
</script>
</body>

<body>
        <!--JSON 轻量级的数据交换格式-->
<script>
    /*JSON数组*/
    var students = [
        {"sno":"001","sname":"张三","sex":"男"},
        {"sno":"002","sname":"李四","sex":"男"},
        {"sno":"003","sname":"王五","sex":"男"}
    ]
    /*遍历*/
    for (var i = 0; i < students.length; i++) {
        var stuObj = students[i];
        alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex)
    }
</script>
</body>

<body>
<script>
    var user = {
        "usercode": 1,
        "username": "张三",
        "sex": "男",
        "address": {
            "city": "北京",
            "street": "大兴区"
        },
        "hobby": ["a", "b", "c"]
    };

    /*访问人名及居住的城市*/
    alert(user.username + "居住在" + user.address.city);

    /*请自行设计JSON数据的格式  这个JSON格式的数据可以描述整个班级中每一个学生的信息及总人数的信息*/
    var students = {
        "total": 3,
        "students": [
            {"sname": "张三", "birth": "10", "sex": "男"},
            {"sname": "李四", "birth": "10", "sex": "男"},
            {"sname": "王五", "birth": "10", "sex": "男"}
        ]
    };

</script>
</body>

<body>
<script type="text/javascript">
    var data = {
        "total": 4,
        "emps": [
            {"empno": 1010, "ename": "大", "sal": 300000},
            {"empno": 1020, "ename": "小", "sal": 200000},
            {"empno": 1030, "ename": "大1", "sal": 100000},
            {"empno": 1040, "ename": "洋2", "sal": 500000}
        ]
    };

    window.onload = function () {
        var displayBtnElt = document.getElementById("displayBtn");
        displayBtnElt.onclick = function () {
            /*解析上面的数据 然后放到下面的table中*/
            var emps = data.emps;
            var html = "";
            for (var i = 0; i < emps.length; i++) {
                var emp = emps[i];
                html += "<tr>";
                html += "<td>" + emp.empno + "</td>";
                html += "<td>" + emp.ename + "</td>";
                html += "<td>" + emp.sal + "</td>";
                html += "</tr>";
            }
            document.getElementById("tbody").innerHTML = html;
            document.getElementById("count").innerHTML = data.total;
        }
    }
    /*把数据展示到table中*/
</script>
<input type="button" value="显示员工信息列表" id="displayBtn"/>
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工薪资</th>
    </tr>
    <tbody id="tbody">

    </tbody>
</table>
总共<span id="count">0</span>条数据
</body>