JavaScript–js基础(详细 全面)目录前言:JavaScript 是什么JavaScript 简介1.JavaScript历史2.JavaScript 具有以下特点第一个JavaScript程序1.在脚本文件中编写JavaScript代码2.JavaScript代码执行顺序基本语法1.变量2.数据类型3.算术运算符4.赋值运算5.字符串运算符6.自增,自减运算符7.比较运算符8.逻辑运算符9.条件运算符10.控制语句选择结构程序控制结构是循环结构函数1.定义函数2.函数调用3.全局函数事件内置对象1.String字符串2.Array数组3.Date4.MathHtml DOM1.查找元素2.改变HTML3.改变 CSS计时前言:JavaScript是一种广泛应用于网页开发的脚本语言它能够使网页变得更加动态和交互性。作为一种客户端脚本语言JavaScript可以被嵌入到HTML中并且可以被所有现代的网页浏览器支持。JavaScript的强大之处在于它能够让开发者们通过编写一些简单的代码就能够实现许多复杂的功能。无论是实现页面元素的动态变化响应用户的交互操作还是处理表单提交数据JavaScript都能够胜任。本文旨在介绍和学习JavaScript的基础知识。通过本文的阅读读者将能够了解JavaScript在网页开发中的重要性和作用掌握其基础语法和概念。不论是初学者还是有一定经验的开发者都可以通过本文来加深对JavaScript的理解并提升自己的开发能力。希望读者能够从中获得有益的知识为日后的学习和实践打下坚实基础。愿读者在学习JavaScript的过程中不断成长探索更多可能性作者建议:学习知识在于深度理解多动手、多动脑总能更快地领悟。不要仅仅停留在阅读代码的层面亲自动手敲打一遍会带来更丰富的收获。通过实践我们能够更深入地理解知识掌握技能并且在解决问题时更加得心应手。相信自己的能力坚持不懈地实践你将会取得更大的进步和成就。让学习成为一种习惯让动手实践成为你提升的捷径加油你是最棒的!JavaScript 是什么JavaScript 简介JavaScript(简称Js)是当前最流行,应用最广泛的客户端(网页)脚本语言,用来在网页中添加动态效果与交互功能,在web开发中拥有举足轻重的地位.JavaScript,HTML,CSS共同构成网页**HTML:**用来定义网页内容,例如:标题,正文,图像等(HTML是网页制作的基础语言----跳转学习:HTML);CSS:用来修饰网页组件得外观,例如:颜色,大小,位置,背景等等(CSS是网页制作的修饰语言—跳转学习:CSS)JavaScript:用来实时更新网页内容,例如:从服务器中获取数据并更新到网页中,修改某些标签的样式内容,可以让网页变得生动.1.JavaScript历史JavaScript原名:LiveScript是由美国网景(Netscape Communications Corporation)开发的一种用于对网页操作的脚本语言,LiveScript也是面向对象的.后来sun公司与网景合作更名为JavaScript.脚本语言:无需编译,可以由某种解释器直接执行 (sql python html css JavaScript) 直接由某种解释器(引擎)解释执行,逐行从上到下解释执行.JavaScript和java完全是二种不同的语言区别JavaScript是嵌入在网页中,对网页进行各种操作的,是一种脚本语言java是一种后端的高级语言,是需要编译的2.JavaScript 具有以下特点解释型脚本语言JavaScript 是一种解释型脚本语言与 C、C 等语言需要先编译再运行不同使用 JavaScript 编写的代码不需要编译可以直接运行。面向对象JavaScript 是一种面向对象语言使用 JavaScript 不仅可以创建对象也能操作使用已有的对象。弱类型JavaScript 是一种弱类型的编程语言对使用的数据类型没有严格的要求例如您可以将一个变量初始化为任意类型也可以随时改变这个变量的类型。动态性JavaScript 是一种采用事件驱动的脚本语言它不需要借助 Web 服务器就可以对用户的输入做出响应例如我们在访问一个网页时通过鼠标在网页中进行点击或滚动窗口时通过 JavaScript 可以直接对这些事件做出响应。跨平台JavaScript 不依赖操作系统在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行只需要系统上的浏览器支持 JavaScript 即可。第一个JavaScript程序JavaScript程序不能独立运行,只能在宿主环境中执行.一般情况下可以吧JavaScript代码放在网页中,借助浏览器环境来运行.在HTML文档嵌入JavaScript代码在HTML页面中嵌入JavaScript脚本需要使用**新建HTML文档(一般都直接使用编译工具直接生成HTML文档—推荐使用:HBuilderX文档)在标签或者标签中插入!DOCTYPE html html head meta charsetutf-8 title/title script // JavaScript代码写的地方 alert(你好 JavaScript) /script /head body /body /html注:alert(‘welcome!’); 提示对话框效果图:1.在脚本文件中编写JavaScript代码JavaScript代码不仅可以放在HTML文档中也可以放在JavaScript脚本文件中.JavaScript脚本文件,扩展名是.js,使用任何文本编辑器都可以编辑(本博客以HBuilderX文档为示例)具体步骤如下:1.新建.js文本.2.打开文本编写JavaScript文本alert(“你好”);3.保存JavaScript文件,并连接HTML文档script typetext/javascript srctest.js/script4.运行HTML文档注:定义 src 属性的2.JavaScript代码执行顺序JavaScript代码可以写在HTML文档标签与标签中,写在不同标签中的执行顺序不同示例!DOCTYPE html html head meta charsetutf-8 title/title script alert(写在head标签中); /script /head body script alert(写在body标签中); /script /body /html效果图由效果图我们就可以看出,在HTML文档中先执行在标签中的JavaScript代码后执行标签中的代码基本语法1.变量声明变量用var关键字var name;声明变量的同时对其赋值var name “小明”;2.数据类型数值型(number):其中包括整型数和浮点型数.布尔型(boolean):逻辑值,true或false字符串型:有单个或者多个字符组成的.字符串使用单引号或者双引号来说明的.undefined类型:变量没用赋值的情况下默认类型,值为undefined.Object类型3.算术运算符算数运算符用来执行常见的数学运算例如加法、减法、乘法、除法等下表中列举了 JavaScript 中支持的算术运算符:var x 10; var y 4; console.log(x y , x y); // 输出x y 14 console.log(x - y , x - y); // 输出x - y 6 console.log(x * y , x * y); // 输出x * y 40 console.log(x / y , x / y); // 输出x / y 2.5 console.log(x % y , x % y); // 输出x % y 2注:在JavaScript中的不同var a 10; var b 5; var c 10; var d a; // 字符串连接 加法运算 // alert(c-b); 减法 // alert(a-b); // 5 字符串(数字) - 数值 数值 会把表达式中的数字 字符串尝试类型转换 // alert(d-c); // NaN 字符串不能转换为数值返回NaN // alert(ac); ture 只比较值是否相等 // alert(ac); false 全等 比较值和类型4.赋值运算赋值运算符用来为变量赋值下表中列举了 JavaScript 中支持的赋值运算符代码示例:var x 10; x 20; console.log(x); // 输出30 var x 12, y 7; x - y; console.log(x); // 输出5 x 5; x * 25; console.log(x); // 输出125 x 50; x / 10; console.log(x); // 输出5 x 100; x % 15; console.log(x); // 输出105.字符串运算符JavaScript 中的和运算符除了可以进行数学运算外还可以用来拼接字符串其中运算符表示将运算符左右两侧的字符串拼接到一起;运算符表示将字符串进行拼接,并重写赋值var x Hello ; var y World!; var z x y; console.log(z); // 输出Hello World![图片](x) y; console.log(x); // 输出Hello World!6.自增,自减运算符自增、自减运算符用来对变量的值进行自增1、自减-1操作代码示例:var x; x 10; console.log(x); // 输出11 console.log(x); // 输出11 x 10; console.log(x); // 输出10 console.log(x); // 输出11 x 10; console.log(--x); // 输出9 console.log(x); // 输出9 x 10; console.log(x--); // 输出10 console.log(x); // 输出97.比较运算符比较运算符会比较左右两侧的数据,最后返回一个布尔值(true或者false)代码示例var x 25; var y 35; var z 25; console.log(x z); // 输出 true console.log(x z); // 输出 false console.log(x ! y); // 输出 true console.log(x ! z); // 输出 true console.log(x y); // 输出 true console.log(x y); // 输出 false console.log(x y); // 输出 true console.log(x y); // 输出 false8.逻辑运算符逻辑运算符通常来组合多个表达式,逻辑运算符的运算是一个布尔值(true/false)代码示例:var year 2021; // 闰年可以被 400 整除也可以被 4 整除但不能被 100 整除 if((year % 400 0) || ((year % 100 ! 0) (year % 4 0))){ console.log(year 年是闰年。); } else{ console.log(year 年是平年。); }9.条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符语法var result (条件表达式)?结果1:结果2当条件成立返回?后的内容否则返回:后的内容代码示例:var c 1; var b 2; var a c b ? c : b; // a b;10.控制语句选择结构1.单一选择结构(if)2.二路选择结构(if/else)3.多路选择结构(switch)程序控制结构是循环结构1.由计数器控制的循环(for)2.在循环的开头测试表达式(while)3.在循环的末尾测试表达式(do/while)4.break continueJavaScript中的选择结构和其他语言是相通的也是一样的.如果你是第一次学习编程语言:学习推荐路径函数1.定义函数函数定义的基本语法:function functionName([arguments]){javascript statements;[return expression]}function: 表示函数定义的关键字;functionName:表示函数名;arguments:表示传递给函数的参数列表各个参数之间用逗号隔开可以为空;statements: 表示实现函数功能的函数体;return expression:表示函数将返回expression的值同样是可选的的语句。代码示例:sayHello----函数名name—参数alert(Hello name);—函数体return 0;----返回值function sayHello(name){ alert(Hello name); return 0; }2.函数调用函数调用:1.在!DOCTYPE html html head meta charsetutf-8 title/title script function test(text){ alert(text); } test(函数在script标签中调用); function a(){ test(函数在其他函数中调用); } a(); /script /head body input typebutton value测试 onclicktest(组件调用函数)/ /body /html效果演示:3.全局函数1.parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串, 则字符串开头的数字分被转换成整数,如果以字母开头,则返回 “NaN”2.parseFloat(arg) 把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”3.typeof (arg)返回arg值的数据类型4.eval(arg) 可运算某个字符串5.alert(String) 可以在浏览器中弹出一个提示框,里面的内容是String6.console.log(String)在控制面板上打印String事件JS 事件event是当用户与网页进行交互时发生的事情,例如单击某个链接或按钮,在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时您可以使用 JavaScript 中的事件处理程序也可称为事件监听器来检测并执行某些特定的程序常用事件:onclick()鼠标点击时onblur()标签失去焦点onfocus()标签获得焦点onmouseover()鼠标被移到某标签之上onmouseout鼠标从某标签移开onload()是在网页加载完毕后触发相应的的事件处理程序onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序代码:!DOCTYPE html html head meta charsetutf-8 title/title /head body div iddiv style !-- 点击事件 -- onclick:input typebutton valueonclick onclicktest(pink) / br / !-- onblur()标签失去焦点 -- onblur:input typetext onblurtest(red) / br / !-- onfocus()标签获得焦点-- onfocus:input typetext onfocustest(blue)/ br / !-- onmouseover()鼠标被移到某标签之上 -- onmouseover:input typetext onmouseover test(black)/ br / !-- onmouseout鼠标从某标签移开-- onmouseout:input typetext onmouseout test(aqua)/ br / !-- onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序 -- onchange:input typetext onchange test(yellow)/ /div script var obj document.getElementById(div); function test(color) { obj.style.backgroundColor color; } /script /body /html效果显示:内置对象1.String字符串属性length 用法返回该字符串的长度.方法charAt(n)返回该字符串位于第n位的单个字符.indexOf(char)返回指定char首次出现的位置.lastIndexOf(char) 跟 indexOf() 相似不过是从后边开始找.substring(start,end) 返回原字符串的子字符串该字符串是原字符串从start位 置到end位置的前一位置的一段.substr(start,length) 返回原字符串的子字符串该字符串是原字符串从start位 置开始长度为length的一段.split(分隔符字符) 返回一个数组该数组是从字符串对象中分离开来的决定了分离的地方它本身不会包含在所返回的数组中。var string new String(String字符串r2323); console.log(string.charAt(2)); // 打印结果是e console.log(string.indexOf(r));//打印结果是3 console.log(string.lastIndexOf(r)); //打印结果是9 console.log(string.substring(2,5)); // 打印结果是:rin console.log(string.substr(2,3));//打印结果是:rin console.log(string.split(r));//打印结果是:一个数组:st ing字符串 23232.Array数组数组是值的有序集合数组中的每个值称为一个元素每个元素在数组中都有一个数字位置称为索引索引从 0 开始依次递增。在 JavaScript 中您可以使用 Array 对象定义数组此外Array 对象中还提供了各种有关数组的属性和方法。创建 Array 对象的语法格式如下:var new Array();这样就定义了一个空数组。以后要添加数组元素就用[下标] 值;如果想在定义数组的时候直接初始化数据请用var new Array(, , …);还可以 var [, , …];var a new Array(); a[0] 1; a[1] aaa; a[5] true; var b new Array(1,2,3,4,5); var a [1,2,3,4,5]; a[5] 3;属性length 数组的长度即数组里有多少个元素.方法join() 返回一个字符串该字符串把数组中的各个元素串起来用置于元素与元素之间。reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1].sort() 使数组中的元素按照一定的顺序排列.如果不指定,则按字母顺序排列.对数字排序需要调用排序函数。 function sortNumber(a,b){ return a - b; }代码演示:var arr [1, 11, 12, 55, 66, 8, 7, 9]; console.log(arr.join()); //打印结果:1,5,8,10,2,6 var str Hello World; var reversedStr str.split().reverse().join(); console.log(reversedStr); // Output: dlroW olleH console.log(arr.sort()); // Output: [1,11,12,55,66,7,8,9] 这里是根据字符计算的 arr.sort(function(a, b) { return a - b; }); console.log(arr); // Output: [1, 7, 8, 9, 11, 12, 55, 66] //反序排列 arr.sort(function(a, b) { return b - a; }); console.log(arr); // Output: [66, 55, 12, 11, 9, 8, 7, 1]3.Date获取日期new Date() 返回当日的日期和时间getFullYear() 返回四位数字年份getDate() 返回一个月中的某一天 (1 ~ 31)getMonth() 返回月份 (0 ~ 11)getDay() 返回一周中的某一天 (0 ~ 6)getHours() 返回 Date 对象的小时 (0 ~ 23)getMinutes() 返回 Date 对象的分钟 (0 ~ 59)getSeconds() 返回 Date 对象的秒数 (0 ~ 59))代码演示:下代码是一个简单时间表的制作!DOCTYPE html html head title/title script function addTextToDiv() { var myDiv document.getElementById(myDiv); var currentDate new Date(); var year currentDate.getFullYear(); var month currentDate.getMonth() 1; var day currentDate.getDate(); var hour currentDate.getHours(); var minutes currentDate.getMinutes(); var seconds currentDate.getSeconds(); myDiv.innerHTML year 年 month 月 day 日 hour : minutes : seconds; } setInterval(addTextToDiv(),1000); /script /head body onloadaddTextToDiv() div idmyDiv/div /body /html4.MathMath 对象提供对数据的数学计算。属性 PI 返回π3.1415926535…)。方法 Math.abs(x) 绝对值计算Math.pow(x,y) 数的幂x的y次幂 Math.sqrt(x) 计算平方根Math.ceil(x) 对一个数进行上舍入Math.floor(x) 对一个数进行下舍入Math.round(x) 把一个数四舍五入为最接近的整数Math.random() 返回 0 ~ 1 之间的随机数Math.max(x,y) 返回 x 和 y 中的最大值Math.min(x,y) 返回 x 和 y 中的最小值Html DOM● DOM是Document Object Model文档对象网页中的标签模型的缩写.● 通过html dom可用javaScript操作html文档的所有标签1.查找元素如果我们想对标签进行操作,我们就得找到他们,那我们怎么找到他们呢?有四种方法可以找到他们通过 id 找到 HTML 标签document.getElementById(“id);通过标签名找到 HTML 标签document.getElementsByTagName(“p”);通过类名找到 HTML 标签document.getElementsByClassName(“p”);通过name找到 HTML 标签document.getElementsByName(“name);2.改变HTMLHtml dom允许javaScript改变html标签的内容.改变 HTML 标签的属性document.getElementById(“username).value“new value;代码演示: 演示代码就让通过js修改按钮的value值**,让按钮的value值从测试变到按钮**!DOCTYPE html html head meta charsetutf-8 title/title script function test(){ document.getElementById(button).value 按钮; } /script /head body input typebutton value测试 idbutton onclicktest()/ /body /html代码演示:修改图片document.getElementById(“image”).src“new.jpg;!DOCTYPE html html head meta charsetutf-8 title/title script function test(){ document.getElementById(img).src img/3.jpg; } /script /head body input typebutton value测试 idbutton onclicktest()/ img srcimg/1.jpg idimg/ /body /html效果演示:修改 HTML 内容的最简单的方法时使用 innerHTML 属性 document.getElementById(“div”).innerHTMLnew HTML代码演示:!DOCTYPE html html head meta charsetutf-8 title/title script function test(){ document.getElementById(div).innerHTML 加油胜利就在前方; } /script /head body input typebutton value测试 idbutton onclicktest()/ div stylefont-size: 50px; iddiv你好,登山者/div /body /html效果演示:这里只是举例说明了这几个,我们还有更多的操作,自己动动手,去发现更多吧,加油登山者3.改变 CSShtml dom允许 javaScript改变html标签的样式这里演示上面的文案修改颜色代码演示:!DOCTYPE html html head meta charsetutf-8 title/title script function test(){ document.getElementById(div).innerHTML 加油胜利就在前方; } function color(){ document.getElementById(div).style.color pink; } /script /head body input typebutton value测试 idbutton onclicktest()/ div stylefont-size: 50px; iddiv你好,登山者/div input typebutton value修改颜色 onclickcolor()/ /body /html效果演示:这里用一个实例:使一个div的背景颜色修改并且循环效果:代码:!DOCTYPE html html head meta charsetutf-8 title/title script var color [red,green,blue]; var i 0; function test(){ var obj1 document.getElementById(text); var obj2 document.getElementById(button); obj1.style.backgroundColor color[i]; i; if(icolor.length){ i0; } obj2.value color[i]; } /script /head body div stylewidth: 300px; height: 300px; idtext/div input typebutton valuered onclicktest() idbutton/ /body /html计时通过使用 JavaScript我们有能力做到在一个设定的时间间隔之后来执 行代码而不是在函数被调用后立即执行。我们称之为计时事件。方法:setTimeout(“函数”,”时间”)未来的某时执行代码!DOCTYPE html html head meta charsetutf-8 titlesetTimeout 示例/title script function showMessage() { alert(这是一个 setTimeout 示例); } // 调用 showMessage 函数在 3 秒后显示消息 setTimeout(showMessage(), 3000); /script /head body h1setTimeout 示例/h1 p页面加载后将在 3 秒后显示一条消息。/p /body /html效果:clearTimeout()取消setTimeout()效果:代码演示:!DOCTYPE html html head meta charsetutf-8 titlesetTimeout 和 clearTimeout 示例/title script var timeoutID; function showMessage() { alert(这是一个 setTimeout 示例); } function setupTimeout() { timeoutID setTimeout(showMessage, 3000); } function cancelTimeout() { clearTimeout(timeoutID); alert(定时器已取消); } /script /head body h1setTimeout 和 clearTimeout 示例/h1 p页面加载后将在 3 秒后显示一条消息。/p button onclicksetupTimeout()设置定时器/button button onclickcancelTimeout()取消定时器/button /body /htmlsetInterval(“函数”,”时间”)每隔指定时间重复调用clearInterval()取消setInterval()clearInterval()------是清除了一个计时器效果:代码:!DOCTYPE html html head meta charsetutf-8 title/title /head body input typetext idtext/ br / br / input typebutton value开始 onclickstartTime()/ input typebutton value停止 onclickstopTime()/ input typebutton value复位 onclickfuwei()/ script var num 0; var textobj document.getElementById(text); textobj.value 0; var index; function jishi(){ num; textobj.value num; } function startTime(){ index setInterval(jishi(),1000); } function stopTime(){ clearInterval(index); } function fuwei(){ num 0; textobj.value 0; } /script /body /html《网络安全从零到精通全套学习大礼包》96节从入门到精通的全套视频教程免费领取如果你也想通过学网络安全技术去帮助就业和转行我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取b728b215f939a9ed28e.gif)网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取