javascript 复习总结

最新推荐文章于 2024-03-30 05:42:47 发布
最新推荐文章于 2024-03-30 05:42:47 发布
阅读量1k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： css html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50360143/article/details/121377972
版权

javascript和html代码结合的方式

1.使用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.标签引入

/1.js

alert("hello javaScript!");

<!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>
</head>
<body>
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i = 12;
        // typeof()取变量的数据类型返回
        alert( typeof(i) ); // number

        var j = "abc";
        alert( typeof(j) ); // String

        var a = 12;
        var b = "abc";
        alert( a * b ); // NaN是非数字，非数值
    </script>
</head>
<body>
</body>
</html>

运算

关系运算

== 等于：字面上的比较

=== 全等于：除了字面上的比较，还比较数据类型

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

逻辑运算

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

数组

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

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

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

        // 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>

函数的定义

1.用function 关键字来定义函数

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

函数重载

Java中函数允许重载，JavaScript直接覆盖，不允许重载

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


        function fun(a,b) {
            alert("有参函数fun(a,b)");
        }

        function fun() {
            alert("无参函数fun()");
        }

        fun(1,"ad");
//运行结果为：无参函数fun()
    </script>
</head>
<body>

</body>
</html>

函数的arguments隐形参数（只在function函数内）：就是不需要定义，却可以直接获取所有参数的变量

function fun() {
            alert("无参函数fun()");
        }
	    
        fun(1,"ad");
//运行结果为：无参函数fun()

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

对象

object 形式的自定义对象

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

花括号形式的自定义对象

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

js中的事件

常用的事件：

-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 事件，所有代码'); 
        }
        </script> 
        </head> <!--静态注册 onload 事件 onload 事件是浏览器解析完页面之后就会自动触发的事件--> 
                <body onload="onloadFun();"> 

                </body> 
</html>
动态注册
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> // onload 事件的方法 
        
    // onload 事件动态注册。是固定写法 
    window.onload = function () {                                                                                                                                                                                                     
        alert("动态注册的 onload 事件"); 
        } 
        </script> 
    </head>
    <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 事件"); 
        }
        window.onload = function () {
            var btnObj = document.getElementById("btn01");
            btnObj.onclick = function () { 
                alert("动态注册的 onclick 事件"); 
                } 
            }
</script>
</head>
<body>
    <!--静态注册 onClick 事件-->
    <button onclick="onclickFun();">按钮 1</button>
    <!--动态注册 onClick 事件-->
    <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>
是柒浔啊
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript复习资料
10-15
免费下载！JavaScript复习资料中包含JavaScript的各种用法，有助于我们更好的学习。不管对学生还是其他行业的人都是有一定的帮助。
JavaScript1小时快速上手笔记快速复习
11-21
根据JavaScript资料整理的快速上手资料,分成21大条知识,适合有其他语言基础的同学快速上手入门,复习,快速复习纸需要大概30分钟不到.推荐阅读.
javascript总复习
cywwen的博客
12-11 1628
第一章、Javascript简介 JavaScript 是一种基于对象和事件驱动并具有安全性能的脚本语言。 一种计算机客户端脚本语言，主要在 Web 浏览器解释执行。 （不需要进行编译） 特点 : 动态类型，弱类型，简单性，跨平台性，必要性，兼容性差， JavaScript 优缺点和用法 是一种解释性脚本语言（代码不进行预编译）。 主要用来向 HTML 页面添加交互行为。 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下
JavaScript总结复习
GWHMYS的博客
08-01 138
JavaScript总结复习——基础、提升、进阶三章巩固
JavaScript常用工具类整理（总结版），分享复习经验和后台开发面经
最新发布
AUZKAY的博客
03-30 1014
if (!return “”;res += “*”;res += “*”;return res;
JavaScript基础知识复习
weixin_41886421的博客
03-08 296
JavaScript复习数据类型基本类型复杂类型存储类型null和undefined的异同判断类型的方法typeofinstanceofconstructorapply或calllet、var和const的区别作用域和作用域链作用域作用域链合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javaScript语法总结
10-21
本篇文章主要是对javascript语法进行总结，相信对大家的学习和复习都会有所帮助，需要的朋友可以过来看一下
JavaScript正则表达式(总结篇）
10-22
本文是小编参考其他有关js正则表达式资料整理的，主要目的有两个：一：自我复习归纳总结。二：共享方便大家搜索。js正则表达式感兴趣的朋友可以一起学习
Web前端HTML+CSS+JavaScript基础知识总结.xmind
07-27
本思维导图涵盖HTML、CSS所需掌握的主要应用知识，及JavaScript基础语法，是本人2020年暑假学习笔记，总计...体系清晰，逻辑分明，适合已学习人群对基础知识的复习，初学者也可以以此为基础进行自己的知识体系创建。
javaScript.xmind
08-21
该文件主要整理了对JavaScript的基础理论的总结，并以思维导图的方式复习加强学习，内容为ECMAScript
复习javaScript（一）
Chen_Wei_Sheng的博客
09-04 287
堆栈空间分配：栈：由操作系统自动分配释放的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放在栈内存中。堆：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂类型的数据存放在堆内存中。注意：JavaScript本身没有堆栈的概念，所谓堆栈只是通过其他语言来更好的来理解JavaScript的存储机制。主要是让JS工程化，构建化新增了如下：变量箭头函数新增了数组的方法，比如map、filter等解构赋值函数默认值和rest参数对象的简洁表示法快速深复制数组
JavaScript复习
qq_44916654的博客
04-24 288
JavaScript 一、基本认识  JavaScript是一门弱类型脚本语言，其源代码在发往客户端之前不需要经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。  原生JS开发，即指按照标准的开发方式ES，ES5全浏览器支持，常用ES6。  TypeScript是JavaScript的超集，纳入了许多新特性，需要编译成JS才能被浏览器执行。  JavaScript框架：   1.JQuery：简化了dom操作，但影响前端性能，使用较少   2.Angular：Google收购的前端框架，将后台
js复习
qq_41478318的博客
04-11 569
第一章： 定义变量：var undefinednull true undefined=null false parseInt(“1231231dsfsdfsdfsdf11111”)=1231231 isNaN()判断是否是数字 false是数字 true不是 定义函数的关键字是：function js事件基本全带on 如：onchange onclick等等 jquery事件：chang...
JavaScript复习笔记（一）变量、数据类型和运算符
kun的博客
11-13 2330
1、JavaScript用来做什么 HTML：专门编写网页内容的语言 CSS：专门美化网页内容样式的语言 JavaScript：专门编写交互程序的语言 JavaScript包含三个方面：ECMAScript标准+DOM标准+BOM 2、常用语句 在控制台中输出一段话    console.log(“Hellow World”);     在当前网页中输出一段话  document.w...
【总结】javascript复习1
没有途径，只有努力
12-28 543
JavaScript复习 JS-打印语句、注释 JS-数据类型 JS-数组 JS-DOM节点 打印语句、注释 示例 <!-- 网页的注释 --> <script> /* 多行注释 */ window.onload=function(){ //控制台 console.log("测试控制台"); document.write("<h1>出现在网页上</h1>"); alert("弹窗");
JavaScript知识点复习--（一）基础总结
pakerder的博客
08-01 187
拼凑断开的知识点，复习之前匆匆学过的js，我打算用思维导图的方式进行复习；我觉得这样对我来说可以把好多复杂的知识、混乱的关系理清，也方便之后进行复习回忆了。但其实感觉好多好多知识点，有点迷。先把之前记的一些笔记加上，然后再网上冲浪，对思维导图进行不断的完善吧。JS高级分为四块基础总结、函数高级、面向对象高级、线程机制与事件机制。...
JavaScript复习之JavaScript基本语法
Java学习之乐的博客
05-13 366
今日目录        1、JavaScript 引入方式        2、JavaScript 注释        3、JavaScript 变量        4、JavaScript 基本数据类型        5、JavaScript 运算符        6、JavaScript 选择与循环语句        7、JavaScript 函数        8、Break VS Cont...
JS自我复习指南
MartinTeoZhang的博客
09-07 161
this的指向问题： es6箭头函数解决了this造成的一些问题 1.全局环境下，this 始终指向全局对象（window）, 无论是否严格模式； 2.函数直接调用this (1)非严格模式下，this 默认指向全局对象window (2)严格模式下，this 默认为undefined 3.es6箭头函数里的this指的是定义这个函数时外层代码的this，这句话可以从两个方面理解：（ es6箭头函数没有自己的this es6箭头函数里的this是外层代码（定义时，非执行时）this的引用 ）
JavaScript 60道面试题及答案.docx
07-07
JavaScript 60道面试题及答案.docx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

是柒浔啊

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值