Web开发之JavaScript知识点总结

最新推荐文章于 2024-04-07 09:40:09 发布
最新推荐文章于 2024-04-07 09:40:09 发布
阅读量826 收藏 7
点赞数
分类专栏： Javaweb整理 文章标签： 前端 javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/126368682
版权

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

目录

1、JS基本数据类型

2、JS的运算符

3、JS中的正则对象

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

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

6、自定义对象

7、BOM对象的使用

8、DOM对象的使用

9、常见的JS事件

10、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>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
</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，默认选中，以及内容体等属性，具体如下：

<!DOCTYPE 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>

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

<!DOCTYPE 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>

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

<!DOCTYPE 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>

页面加载完毕事件如下：
 

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

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

<!DOCTYPE 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>

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

<!DOCTYPE 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代码糅合在一起，不利于分开开发，具体如下：
 

<!DOCTYPE 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>
nuist__NJUPT
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web----js定义函数和调用函数
qq_43766304的博客
04-11 500
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
网页设计之JavaScript
qq_53677566的博客
10-05 7326
文章目录JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系二.基本语法1.位置2.变量3.控制语句三.函数，内置对象与事件1.函数基本语法：全局函数：2.内置对象（1）String字符串（2）Aarry数组（3）Date对象（4）Math对象3.事件四.Event对象五.HTML Dom对象1.获得标签的四种方式2.HTML DOM - 改变 HTML内容3.HT
Web前端——JavaScript基础
硝酸童不酸的博客
10-24 967
简要介绍了 JavaScript 的基本语法、BOM 对象及简单的 DOM 操作
Web之JavaScript
TH_guan的博客
07-16 759
本文主要讲述后端开发者需要的基本web知识点，讲述了JavaScript 的一些基本内容。
Web前端开发必看，前端 --- JavaScript 语法基础，web开发什么意思
最新发布
2401_83621603的博客
04-07 273
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
网上整理 Web JS 通用
Tong's blog
01-17 3178
网上整理 Web JS 通用 呵呵[还会陆续添加] 目录： ****************************************************************************** 一、验证类   1、数字验证内     1.1 整数     1.2 大于0的整数 （用于传来的ID的验证)     1.3 负整数的验证     1.4 整数不能大于iMax
2023年web前端开发知识点总结.doc
11-07
Web 前端开发知识点总结 Web 前端开发是指使用 HTML、CSS、JavaScript 等技术来构建网站或应用程序的用户界面和用户体验的过程。以下是 2023 年 Web 前端开发知识点总结： HTML 知识点总结 HTML（HyperText ...
2023年web前端开发知识点总结.docx
11-07
JavaScript知识点总结： 1. JavaScript基础：JavaScript是一种脚本语言，主要用于给网页添加交互性，基础知识包括变量、数据类型、运算符、控制结构、函数等。 2. JavaScript DOM：JavaScript DOM是指JavaScript...
JavaScript入门系列之知识点总结
10-22
本文将总结JavaScript的入门知识点，帮助初学者快速理解和掌握这门语言。 首先，我们了解JavaScript的基本特性。JavaScript是一种动态类型语言，这意味着变量的类型可以在运行时改变。它也是弱类型语言，允许变量在...
JavaScript面试开发常用的知识点总结
10-21
JavaScript是Web开发中不可或缺的一部分，尤其在面试环节，掌握JavaScript的核心知识点至关重要。本文将深入探讨JavaScript面试中常见的语法和类型、数据结构和类型等方面的知识。 首先，我们关注语法和类型。在...
web前端开发知识点总结.pdf
10-03
Web 前端开发知识点总结 Web 前端开发是一个复杂的领域，涉及到多个技术栈和知识点。在本篇中，我们将对 Web 前端开发的关键知识点进行总结和说明。 HTML 知识总结 HTML（HyperText Markup Language）是 Web 前端...
web前端开发知识点总结.docx编程资料
04-06
web前端开发知识点总结.docx
web前端开发基础知识总结
10-28
web前端开发基础知识总结，包括html、css、javascript基础知识点，适合初学者学习
JavaScript语言基础知识点总结十张图
01-10
本文将基于“JavaScript语言基础知识点总结十张图”这一主题，深入探讨JavaScript的基础概念、语法特性以及核心知识点。 1. **变量与数据类型** JavaScript有七种数据类型：Undefined、Null、Boolean、Number、...
web前端总结的一套JavaScript 语言基础知识点总结
12-29
JavaScript，作为全球最广泛使用的编程语言之一，是构建现代Web应用程序的核心工具。它是一种轻量级、解释型的脚本语言，主要用于实现客户端的交互性和动态网页效果。本文将基于一位有着丰富经验的40岁Web前端开发者...
大话WEB开发WEB开发相关经验总结分享
08-10
本文将基于《大话WEB开发》的经验分享，探讨Web开发的相关知识点，特别关注JavaScript开发中的"其它杂项"。 首先，我们要理解Web开发的基础：HTML、CSS与JavaScript。HTML（HyperText Markup Language）是构建网页...
web前端-JS入门
yong_19930826的博客
05-12 1108
web前端-JS入门1.初识JavaScript 1.初识JavaScript
Web开发基础：JavaScript入门，web端开发
mm627mm的博客
03-18 879
alert(“提示内容”);confirm(“提示文字”);返回true代表用户确认返回false代表用户取消prompt(“提示文字”)返回字符串JavaScript的函数类似Java的方法，实现代码的封装和重复调用定义：function 函数名(参数名,参数名…){代码return 值示例：// 求两个数的最大值return n1;//调用alert(“最大值是：”+max(898,99));事件处理。
JS基础知识点有哪些
qf2019的博客
04-09 317
Web前端工程师是当前各大企业都比较稀缺的人才，薪资待遇和就业前景都很不错。不论是专业还是非专业，有基础亦或是无基础，都想通过学习Web前端实现高薪就业。不过，学习要一步一个脚印，不能一口吃一个胖子，所有的实战经验都是基于理论而积累形成，下面就给大家梳理汇总一下JS相关的基础知识点。 1、执行环境：有时也叫环境，是JavaScript中最为重要的一个概念，执行环境定义了变量或函数有权访问的其他数据。 2、变量对象：每一个执行环境都有一个与之关联的变量对象，环境中定义的所有的变量和函数都保存在这个的对象中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nuist__NJUPT

给个鼓励吧，谢谢你

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值