Web开发之JavaScript知识点总结

JavaScript(JS)是web上的脚本语言，JavaScrip和Java的关系就好比雷峰塔和雷锋之间的关系，哈哈。JS主要用于控制页面的特效展示，JS可以对HTML进行动态控制，可以对表单进行校验，也可以控制CSS样式。JS是脚本语言，不需要编译，浏览器直接解析就可以，JS必须嵌入到其它语言中，无法独立执行，JS的执行过程是从上到下依次执行的。JS主要包括三部分：ECMAScript规定了JS的语法和基本对象；DOM对象用于处理网页内容的方法和接口；BOM对象用于处理与浏览器交互的方法和接口。

1、JS基本数据类型

2、JS的运算符

3、JS中的正则对象

1、JS基本数据类型

5种基本数据类型，分别为number,string,boolean,null,undefined类型。引用数据类型如下：


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的基本数据类型title>
    <script>
        var s1 = "a" ;
        var s2 = 'a' ;
        var flag1 = true ;
        var flag2 = false ;
        var num1 = 1 ;
        var num2 = -1.5 ;
        var obj = null ;
        var u = undefined ;
        var str = new String() ;
        var str1 = new String ;
        
    script>
head>
<body>
 
body>
html>

2、JS的运算符

JS的运算包括算术运算符和逻辑运算符，和常规的JAVA运算符基本差不多，稍有一些区别。


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的基本数据类型title>
    <script>
       var a = 1 ;
       var b = '1' ;
       alert(a==b) ;
       alert(a===b) ; //全等,值和类型都要相等
       alert(a!=b) //不相等
       var c = true ;
       var d = false ;
       //逻辑运算符
       alert(c && d) ;
       alert(c || d) ;
       alert(!c)
 
    script>
head>
<body>
 
body>
html>

3、JS中的正则对象

JS的中的正则对象以^开始，以$结束，一般使用正则对象.test(String)方法校验字符串是否匹配正则对象。


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的正则对象title>
    <script>
        var reg = /^\s*$/ //表示0个至多个空格组成
        var flag = reg.test("   ") ;
        var flag1 = reg.test("  a  ") ;
        alert(flag) ;
        alert(flag1) ;
 
    script>
head>
<body>
 
body>
html>

4、JS中数组对象的相关操作

包含数组的创建，以及数组中的常用方法的操作，具体如下：


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的数组对象title>
    <script>
     //JS中数组对象的四种创建方式
        var arr1 = [1,2,3] ;//数组中包含三个元素
        var arr2 = new Array() ;//数组空间为0
        var arr3 = new Array(4) ;//数组空间为4
        var arr4 = new Array(1,2,3,'a',true) ; //数组元素为1，2，3，a，true
 
        var len = arr1.length ;
        var res1 = arr1.join("-") ;//将数组元素放入字符串,并用-分离
        var res2 = arr1.reverse() ; //颠倒数组元素的顺序
        var res3 = arr1.pop() ; //删除并返回数组的最后一个元素
        var res4 = arr1.push("a") ; //向数组末尾添加一个元素,并返回新的长度
        
 
    script>
head>
<body>
 
body>
html>

5、全局函数和自定义函数


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的函数title>
    <script>
        //计算JS的字符串,并当作脚本来执行
        eval("var a = 2 ;") ;
        alert(a) ;
        var b = "3.7" ;
        //解析一个字符串并返回整数和浮点数
        alert(parseInt(b));
        alert(parseFloat(b)) ;
 
        //JS中没有方法重载之说,重名的函数只会覆盖点原来的
        //自定义a和b的求和函数
        function getSum(a, b) {
            return a + b ;
        }
        
    script>
head>
<body>
 
body>
html>

6、自定义对象

JS中的对象创建方式和Java中对象创建方式很像，只不过Java是new的方式，而JS是用functon。另外JS也可以使用直接量的方式创建对象。


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的自定义对象title>
    <script>
        function Person() {
            this.name = "张三";
            this.age = 18 ;
        }
 
        var p = new Person() ;
        alert(p.name) ;
        alert(p.age) ;
 
        function Person1(name, age) {
            this.name = name ;
            this.age = age ;
        }
        var p1 = new Person1("李四", 19) ;
        alert(p1.name)
        p1.name = "王五" ;
 
        //直接量方式创建对象
        var p2 = {name : "张三", age : 19} ;
        alert(p2.name) ;
        alert(p2.age) ;
        
 
    script>
head>
<body>
 
body>
html>

7、BOM对象的使用

BOM对象是浏览器对象莫模型，用来执行浏览器的相关操作，例如：浏览器的消息弹出等。wndow代表了BOM对象，window是JS的内置对象，使用的时候一般可以省略window.


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的BOM对象title>
    <script>
 
        function run1() {
            alert("run1") ;
            clearInterval(id) ; //取消循环定时器,只执行一次
        }
        function run2() {
            alert("run2")
        }
 
        var a = 1 ;
        //弹出的提示框
        alert(a) ;
        //y有返回值的确认框
        var falg =confirm("是否确认删除？")  ;
 
        var id = setInterval("run1()",2000) ; //每隔2秒执行一次run1()方法
 
        setTimeout("run2()", 1000) ; //一次性定时器，1s后执行一次
 
        var url = location.href ; //当前的url
        
    script>
head>
<body>
 
body>
html>

8、DOM对象的使用

DOM是文档对象模型，DOM将标记型文档的所有内容都标记为对象，通过操作对象的属性和方法，来达到操作或改变HTML展示效果的目的。HTML的每个标签都会被加载到DOM树的一个元素对象。一个HTML文档加载到内存中就会行成一个DOM对象。

DOM对象通过四种方式获取元素对象，具体如下：


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的DOM对象title>
 
head>
<body>
<input type="text" id = "id1"/>
<input type="checkbox" name="hobby" value="basketball"/> 篮球
<input type="checkbox" name="hobby" value="volleyball"/> 排球
<input type="checkbox" name="hobby" value="football"/>足球
 
<ul>
    <li>选项1li>
    <li>选项2li>
    <li>选项3li>
    <li>选项4li>
ul>
 
<input type="radio" name="sex" value="man" class="h1"/>男
<input type="radio" name="sex" value="woman" class="h1"/>女
 
<script>
    //获取元素对象的四种方式
    //1.通过id获取元素对象
    var t1 = document.getElementById("id1") ;
    //2.通过name属性获取所有满足要求的对象
    var t2 = document.getElementsByName("hobby") ;
    //3.通过标签名获取所有的元素对象
    var t3 = document.getElementsByTagName("li") ;
    //4.通过class属性获取元素对象
    var t4 = document.getElementsByClassName("h1") ;
    alert(t1) ;
    alert(t2.length) ;
    alert(t3.length) ;
    alert(t4.length) ;
script>
body>
html>

DOM对象中元素对象的常见属性如下：包括修改value，className，默认选中，以及内容体等属性，具体如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的DOM对象title>
    <style>
        .y1{
            color: red;
        }
        .y2{
            color: blue;
        }
    style>
 
head>
<body>
<input type="text" id = "id1" name="input" value="你好"/>
<span id = "id2" class="y1">Java之父span>
<input type="checkbox" id="hobby">
<span id = "span1">这是内容体span>
 
<script>
    //更改value属性
    var t1 = document.getElementById("id1") ;
    t1.value = "我很好" ;
    alert(t1.value) ;
    //更改class属性
    var t2 = document.getElementById("id2") ;
    t2.className = "y2" ;
    //设置默认选中
    var t3 = document.getElementById("hobby") ;
    alert(t3.checked)
    t3.checked = true ;
    //获取内容体与修改内容体
    var t3 = document.getElementById("span1")  ;
    alert(t3.innerHTML) ; //获取对象的内容体
    t3.innerHTML = "今天下雨了" ;
    t3.innerHTML += ",今天很冷" ;
    alert(t3.innerHTML)
script>
body>
html>

9、常见的JS事件

通过鼠标或热键的动作我们称之为事件，通过JS事件，我们可以完成页面的指定特效。

JS事件驱动机制包含三部分：事件源，事件，监听器；

下面的是点击事件：


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
            alert("你点击了按钮") ;
        }
    script>
head>
<body>
<input type="button" name="button1" value="点击我" onclick="run1()"/>
 
body>
html>

如下是焦点事件，分为获取焦点和失去焦点两种，具体如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
            alert("你获取了焦点") ;
        }
        function run2() {
            alert("你失去了焦点") ;
        }
    script>
head>
<body>
<input type="text"  onfocus="run1()" />
<input type="text" onblur="run2()">
 
body>
html>

域内容改变事件，只要域内容改变就会触发相应的方法，具体如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
            alert("域内容改变事件") ;
        }
    script>
head>
<body>
<select onchange="run1()">
    <option value="beijing"> 北京 option>
    <option value="shanghai"> 上海 option>
    <option value="nanjing"> 南京 option>
select>
 
body>
html>

页面加载完毕事件如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
            alert("页面加载完毕") ;
        }
    script>
head>
<body onload="run1()">
body>
html>

表单提交事件，可以用于表单的校验：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
            alert("表单按钮被点击了") ;
            //表单校验
            return false ;
        }
    script>
head>
<body >
<form onsubmit="return run1()">
    <input type="text" name="username"/><br/>
    <input type="submit" value="提交">
form>
body>
html>

键位弹起事件和鼠标移入事件，具体如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常见事件title>
    <script>
        function run1() {
           alert("触发了键位弹起事件") ;
        }
        function run2() {
            alert("触发了鼠标移入事件") ;
        }
    script>
head>
<body >
<input type="text" onkeyup="run1()"/>
<input type="text" onmousemove="run2()">
body>
html>

10、JS事件的两种绑定方式

第一种方式：元素事件句柄绑定，开发快捷，传参方便，可以绑定多个函数，不过该方法使得JS和HTML代码糅合在一起，不利于分开开发，具体如下：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的事件的两种绑定方式title>
    <script>
        function run1() { //绑定无参的
           alert("run1") ;
        }
        function run2(str) { //绑定带参的
            alert(str) ;
        }
        function run3(obj) { //绑定元素对象
            alert(obj.value)
        }
    script>
head>
<body >
<input type="text" value="1111" onclick="run1()"/>
<input type="text" value="2222" onclick="run2('hello')">
<input type="text" value="3333" onclick="run3(this)">
<input type="text" value="4444" onclick="run1(),run2('java'),run3(this)"/>
body>
html>

第二种方式：使用DOM属性的方式绑定，可以使得HTML代码和JS代码份力，并且使用匿名函数的方式可以传参和一个事件可以绑定多个函数，具体如下：


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的事件的两种绑定方式title>
    <script>
        function run1() {
           alert("run1") ;
        }
        function run2() {
            alert("run2") ;
        }
        //当页面加载完毕,为对象t绑定两个事件
        window.onload = function () {
            var t = document.getElementById("id1") ;
            t.onclick = function () {
                run1() ;
                run2() ;
            }
        }
 
 
    script>
head>
<body >
<input type="text" id="id1"/>
 
 
body>
html>

相关阅读:
Footprint Analytics 与 GalaChain 达成战略合作
 Numpy入门[14]——二元运算
 Rabbitmq 常见问题处理
 Vue3+Element Plus实现el-table跨行显示（非脚手架）
Flink的三种执行模式STREAMING和BATCH和AUTOMATIC
沉浸式推理乐趣：体验线上剧本杀小程序的魅力
 Acwing 1927 自动补全（知识点：hash,二分，排序）
springboot健身房管理系统毕业设计源码031807
web开发模式——一般两种
 SQL server中内连接和外连接的区别、表达（表的连接）
原文地址：https://blog.csdn.net/nuist_NJUPT/article/details/126368682