JavaScript总结

最新推荐文章于 2022-08-18 16:22:30 发布
最新推荐文章于 2022-08-18 16:22:30 发布
阅读量148 收藏
点赞数
分类专栏： JavaScript JavaWeb 文章标签： javascript 按键事件 js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41819988/article/details/105525762
版权

目录

1.JavaScript 和 html 代码的结合方式

1）第一种方式

 2）第二种方式

2.变量

3.关系运算

4.逻辑运算

5.数组

8.函数

1）使用 function 关键字来定义函数

2）函数的定义方式二

3）函数的 arguments 隐形参数（只在 function 函数内）

4）注意

9.自定义对象

1）Object 形式的自定义对象

2）{}花括号形式的自定义对象

10.事件

1.JavaScript 和 html 代码的结合方式

1）第一种方式

只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert是JavaScript语言提供的一个警告框函数。
        // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javaScript!");
    </script>
</head>
<body>

</body>
</html>

 2）第二种方式

使用 script 标签引入 单独的 JavaScript 代码文件

JS文件

alert("1125 hello!");

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        现在需要使用script引入外部的js文件来执行
            src 属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

        script标签可以用来定义js代码，也可以用来引入js文件
        但是，两个功能二选一使用。不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("国哥现在可以帅了");
    </script>
</head>
<body>

</body>
</html>

 

2.变量

JavaScript 的变量类型：

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript 里特殊的值：

undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.

null 空值

NaN 全称是：Not a Number。非数字。非数值。

JS 中的定义变量格式：

var 变量名;

var 变量名 = 值;

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        // alert(i); // undefined
        i = 12;
        // typeof()是JavaScript语言提供的一个函数。
        // alert( typeof(i) ); // number

        i = "abc";
        // 它可以取变量的数据类型返回
        // alert( typeof(i) ); // String

        var a = 12;
        var b = "abc";

        alert( a * b ); // NaN是非数字，非数值。

    </script>
</head>
<body>

</body>
</html>

 

3.关系运算

等于：    ==       等于是简单的做字面值的比较
 
全等于： ===     除了做字面值的比较之外，还会比较两个变量的数据类型

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "12";
        var b = 12;

        alert( a == b ); // true
        alert( a === b ); // false

    </script>
</head>
<body>

</body>
</html>

 

4.逻辑运算

且运算： &&
 
或运算： ||
 
取反运算： !
 

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

0 、null、 undefined、””(空串) 都认为是 false；

 
 
/*

&& 且运算。

有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算 和 ||或运算 有短路。

短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行

*/

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
   /*     在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
        0 、null、 undefined、””(空串) 都认为是 false；*/

        // var a = 0;
        // if (a) {
        //     alert("零为真");
        // } else {
        //     alert("零为假");
        // }

        // var b = null;
        // if (b) {
        //     alert("null为真");
        // } else {
        //     alert("null为假");
        // }

        // var c = undefined;
        // if (c) {
        //     alert("undefined为真");
        // } else {
        //     alert("undefined为假");
        // }

        // var d = "";
        // if (d) {
        //     alert("空串为真");
        // } else {
        //     alert("空串为假");
        // }


/*         && 且运算。
		有两种情况：
		第一种：当表达式全为真的时候。返回最后一个表达式的值。
		第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        // alert( a && b );//true
        // alert( b && a );//true
        // alert( a && d ); // false
        // alert( a && c ); // null

 /*      || 或运算
       第一种情况：当表达式全为假时，返回最后一个表达式的值
       第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
        // alert( d || c ); // null
        // alert( c|| d ); //false

        // alert( a || c ); //abc
        // alert( b || c ); //true

    </script>
</head>
<body>

</body>
</html>

 

5.数组

JS 中 数组的定义

格式：

var 数组名 = []; // 空数组

var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var arr = [true,1]; // 定义一个空数组
        // alert( arr.length ); // 0

        arr[0] = 12;
        // alert( arr[0] );//12
        // alert( arr.length ); // 0

        // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
        arr[2] = "abc";
        alert(arr.length); //3

        // alert(arr[1]);// undefined
        // 数组的遍历
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }

    </script>
</head>
<body>
</body>
</html>

 

8.函数

1）使用 function 关键字来定义函数

使用的格式如下:

function 函数名(形参列表){

           函数体

}

在 JavaScript 语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用 return 语句返回值即可！

代码示例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定义一个无参函数
        function fun(){
            alert("无参函数fun()被调用了");
        }
        // 函数调用===才会执行
        // fun();

        function fun2(a ,b) {
            alert("有参函数fun2()被调用了 a=>" + a + ",b=>"+b);
        }

        // fun2(12,"abc");

        // 定义带有返回值的函数
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }

        alert( sum(100,50) );

    </script>
</head>
<body>

</body>
</html>

2）函数的定义方式二

使用格式如下：

var 函数名 = function(形参列表) { 函数体 }

代码示例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数");
        }
        // fun();

        var fun2 = function (a,b) {
            alert("有参函数a=" + a + ",b=" + b);
        }
        // fun2(1,2);

        var fun3 = function (num1,num2) {
            return num1 + num2;
        }

        alert( fun3(100,200) );
    </script>

</head>
<body>

</body>
</html>

3）函数的 arguments 隐形参数（只在 function 函数内）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像 java 基础的可变长参数一样。

public void fun( Object ... args );

可变长参数其他是一个数组。

那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function fun(a) {
            alert( arguments.length );//可看参数个数

            alert( arguments[0] );
            alert( arguments[1] );
            alert( arguments[2] );

            alert("a = " + a);

            for (var i = 0; i < arguments.length; i++){
                alert( arguments[i] );
            }

            alert("无参函数fun()");
        }
        // fun(1,"ad",true);

        // 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof(arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }

        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );


    </script>
</head>
<body>

</body>
</html>

4）注意

在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义

 

9.自定义对象

1）Object 形式的自定义对象

对象的定义：

var 变量名 = new Object(); // 对象实例（空对象）

变量名.属性名 = 值; // 定义一个属性

变量名.函数名 = function(){} // 定义一个函数

对象的访问：

变量名.属性 / 函数名();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 对象的定义：
        //     var 变量名 = new Object();   // 对象实例（空对象）
        //     变量名.属性名 = 值;		  // 定义一个属性
        //     变量名.函数名 = function(){}  // 定义一个函数
        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年龄：" + this.age);
        }
        // 对象的访问：
        //     变量名.属性 / 函数名();
        // alert( obj.age );
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

2）{}花括号形式的自定义对象

对象的定义：

var 变量名 = { // 空对象

                      属性名：值, // 定义一个属性

                      属性名：值, // 定义一个属性

                      函数名：function(){} // 定义一个函数

};

对象的访问：

变量名.属性 / 函数名();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义：
        // var 变量名 = {			// 空对象
        //     属性名：值,			// 定义一个属性
        //     属性名：值,			// 定义一个属性
        //     函数名：function(){}	// 定义一个函数
        // };
        var obj = {
            name:"国哥",
            age:18,
                fun : function () {
                alert("姓名：" + this.name + " , 年龄：" + this.age);
            }
        };

        // 对象的访问：
        //     变量名.属性 / 函数名();
        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

 

10.事件

常用的事件：

onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件： 常用于按钮的点击响应操作。

onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名 = fucntion(){}

代码示例：

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件，所有代码');
        }

        // onload事件动态注册。是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }

    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
       <body onload="onloadFun();">
-->
<body>

</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }

        // 动态注册onclick事件
        window.onload = function () {
            // 1 获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象（文档）<br/>
            * get           获取
            * Element       元素（就是标签）
            * By            通过。。   由。。经。。。
            * Id            id属性
            *
            * getElementById通过id属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");
            // alert( btnObj );
            // 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }

    </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
            // log() 是打印的方法
            console.log("静态注册失去焦点事件");
        }

        // 动态注册 onblur事件
        window.onload = function () {
            //1 获取标签对象
           var passwordObj = document.getElementById("password");
           // alert(passwordObj);
            //2 通过标签对象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了");
        }

        window.onload = function () {
            //1 获取标签对象
            var selObj = document.getElementById("sel01");
            // alert( selObj );
            //2 通过标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已经改变了");
            }
        }


    </script>
</head>
<body>
    请选择你心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>

    请选择你心中的男神：
    <select id="sel01">
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>富城</option>
    </select>


</body>
</html>

onsubmit事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
            // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");

            return flase;
        }

        window.onload = function () {
            //1 获取标签对象
            var formObj = document.getElementById("form01");
            //2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");

                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false 可以阻止 表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>

</body>
</html>

 

子木_Lee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript详细总结
qq_53124400的博客
01-05 730
概念 javascript 1.它是一门客户端脚本语言 客户端的语言：它是运行在客户端浏览器的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器 解析执行了 javascript功能 可以来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增加用户的体验 javascript发展 JavaScript = ECMASceipt + JavaScript自己特有的（BOM + DOM） 1.1992年，Nombase
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8316
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript学习总结
qq_53069622的博客
07-08 1412
JavaScript学习总结
JavaScript 总结
qqyouhappy的博客
10-20 7914
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 ECMAScript，描述了该语和基本对象。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。  什么是原型？ 原型是一个对象，其他对象可以通过它实现属性继承。 在JavaScript中，当
javascript学习总结
weixin_59049031的博客
07-10 1546
这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 1万+
JavaScript基础入门详细总结
JavaScript 总结（2022）
ximingx
05-27 690
JavaScript [ 1995 Brendan Eich ]
Javascript总结
梦想起飞的地方，必须用心去经营
03-27 1766
JavaScript的学习是在开发项目的过程中开始学习的，在这样一个背景下，我给自己定了一个学习目标。那就是熟悉JavaScript的基本语法，在项目中基本会使用JavaScript，然后遇到问题时再专攻这一点。于是JavaScript的视频就匆匆过了一遍，并没有深入学习。不得不承认，JavaScript是一门比较好上手的语言，尤其是对有其他语言基础的人。在应用JavaScript的过程中，你会逐
前端JavaScript总结
最新发布
06-19
在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript是一种解释型的、弱类型的脚本语言，它基于ECMAScript规范，并在Web浏览器中...
javascript总结
09-06
在“javascript总结”这个主题中，我们将深入探讨JavaScript的基础知识，以及它如何与HTML标签相互作用来增强用户体验。 首先，让我们从HTML标签开始。HTML（超文本标记语言）是网页内容的结构框架，而JavaScript则...
javaScript总结
08-08
javaScript总结
Javascript总结导图
10-08
本篇内容将围绕"JavaScript总结导图"展开，深入探讨JavaScript的基础知识、核心概念以及高级特性。 1. **基础语法** JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、...
javascript总结图
04-23
在本“JavaScript总结图”中，我们可以期待找到一系列的图表，这些图表将帮助我们更好地理解和记忆JavaScript的核心概念、语法结构以及常用功能。 1. **基础语法** - 变量声明：JavaScript支持var、let和const三种...
JAVASCRIPT keycode总结
10-30
JAVASCRIPT中keycode总结，方便需要控制keycode的朋友
JavaScript总结笔记
01-03
JavaScript 概述 JavaScript是基于对象和事件的脚本语言。 特点： 1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。 2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）
JavaScript 总结几个提高性能知识点(推荐)
10-20
下面小编就为大家带来一篇JavaScript 总结几个提高性能知识点(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript技术总结与客户端验证
"web JavaScript" JavaScript 是一种广泛应用于Web开发的脚本语言，它主要负责增强网页的交互性和动态性。这篇资源显然针对JavaScript初学者，提供了丰富的知识点和实用技巧。 在Web开发中，JavaScript通常在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值