大家好，欢迎来到IT知识分享网。
JavaScript简介 1、JS介绍 全称：JavaScript，简称JS JS是由NetScape(网景)提供的一门嵌入在浏览器中执行的脚本语言（一段小程序） 主要作用：用于实现网页中的动画效果和实现表单验证 JS可以运行在服务器端（Node.js） 2、JS的特点 JS是一门直译式的语言（JS不需要编译,执行的就是源代码） JS是一门基于对象的语言（JS可以通过某些机制模拟面向对象） JS是一门弱类型的语言（Java是强类型） Java: String str = "Hello World"; int number = 100; JS: var str = "Hellow World"; alert(str); str = 100; alert(str); str = true; alert(str); str = [88,123,111]; alert(str); 3、JS的优势 JS具有良好的交互性 JS具有一定的安全性(运行在浏览器内部) JS具有跨平台性 Java语言具有跨平台性,是因为有JVM,JVM跨平台吗? JVM不跨平台 JS语言具有跨平台性,是因为有浏览器,浏览器跨平台吗? 浏览器不跨平台! 4、如何在HTML中引入JS？ 4.1.方式一: 在head或者body内部可以添加一个script标签 在script标签内部可以直接书写JS代码 <!-- 方式一: 在script标签内部直接书写JS代码 type:可以省略,指定语言类型是JS --> <script type="text/javascript"> console.log("引入JS的方式一!!"); //alert("引入JS的方式一!!"); document.write("引入JS的方式一!!!<br/>"); </script> 4.2.方式二: 在head或者body内部可以添加一个script标签 在script标签上通过src属性,可以引入外部的JS文件 <!-- 方式二: 引入外部的JS文件 --> <script src="demo.js"></script> 需要注意的是,第二种方式script标签内部不要写JS代码,写了也不会执行! <script src="js/demo.js"> console.log("Hello JS...333");//不会执行! </script> 4.3.方式三:将JS代码写在标签上 <!-- 方式三: 直接在标签上书写JS代码 --> <button onclick="console.log('引入JS的方式三...')"> 别点我! </button> <input ondblclick="console.log('引入JS的方式三===')" type="button" value="也别点我!"/> 4.4.onclick、ondblclick事件 onclick是点击事件,在被绑定了该事件的元素上点击后,会立即触发事件,执行所指向的函数 ondblclick是点击事件,区别是需要双击才可以触发事件,执行所指向的函数
二、JS的语法 1、JS的注释 // 单行注释 /* 多行注释 */ 2、JS数据类型 2.1.基本数据类型 1)数值类型(number) 在JS的底层,所有的数值都是浮点型 但在处理和显示的过程中,如果可以显示为整型,会自动的在整型和浮点型之间进行转换 2.4+3.6=6 Infinity(正无穷大) -Infinity(负无穷大) NaN(Not a Number)非数值 2)字符串类型(string) JS中的字符串类型是基本数据类型,字符串可以使用双引号或者单引号引起来 例如: var str1 = "Hello JS"; var str2 = 'Hello JS'; console.log( typeof str1 ); // string console.log( typeof str2 ); // string JS中提供了字符串的包装对象--String var str3 = new String("Hello JS"); console.log( typeof str3 ); // object str1和str2也可以当做对象使用,在使用时,和str3没有什么区别 3)布尔类型(boolean) 布尔类型值: true 和 false 4)undefined类型 undefined: 表示声明了变量,但是没有为变量赋值,该变量的值就是undefined var x; alert(x); //undefined 5)null类型 null: 表示空值,可以作为函数的返回值,表示函数返回的是一个空的对象 undefined和null都不能调用属性或方法,否则就会抛异常! 2.2.复杂数据类型 对象,数组,函数 3、JS的变量声明 JS中是通过var关键字声明变量,通过var声明的变量不区分类型,可以指向任意的数据 var s1 = "Hello World"; s1 = 123; s1 = false; s1 = []; s1 = function(){alert("s1方法执行了...")} JS中有自动断句功能,即使一行后面不加分号,也可以正常执行,但是建议加上分号; JS中如果重复声明变量,也不会报错, 因为JS中声明一个已存在的变量不会生效; var x = "abc"; //var x; x = "abc"; var x = 123; //var x; x = 123; alert(x); JS在书写时,是严格区分大小写的! 4、JS的运算符 JS中的运算符和Java中的运算符大致相同 算术运算符: +，-，*，/，%，++，-- 赋值运算符: =，+=，-=，*=，/=，%= 比较运算符: ==，!=，>，>=，<，<= 位运算符: & ， | 逻辑运算符: && ，|| ( false && 表达式, true || 表达式 ) 前置逻辑运算符: ! (not) 三元运算符: 表达式 ? 表达式1 : 表达式2 。。。
5、JS的语句 5.1.if分支 if(){...} if(){...}else{...} if(){...}else if{...}else{...} 5.2.switch分支 switch(变量/表达式){ case opt1: 代码块; break; case opt2: 代码块; break; ... default: 代码块; } 5.3.循环结构 for(){} while(){} do while(){} 6、JS数组 JS的数组声明方式: //声明一个空数组,长度为零 var arr1 = []; //声明一个具有初始值的数组 var arr2 = [100,"abc",false,new Date()]; //声明一个空数组,长度为零 var arr3 = new Array(); //声明一个具有初始值的数组 var arr4 = new Array(100,"abc",false,new Date()); //指定长度的数组(只有一个参数并且是数值,这个数值是长度) var arr3 = new Array(10); JS数组的特点: 1) JS中的数组可以存储任意类型的数据 2) JS数组的长度可以被任意改变 7、JS函数 JS的函数相当于Java中的方法 就是一个具有功能的代码块,通过函数名可以反复执行! 声明方式1: function 函数名([参数列表]){ 函数体... } 声明方式2: var 变量/函数名 = function([参数列表]){ 函数体... } 声明方式3: (function([参数列表]){ 函数体... })([参数列表]); 三、JS的DOM操作 DOM: Document Object Model,文档对象模型 其实就是JS专门为操作html元素所提供的一套API。 1、获取html元素 1) document.getElementById(id值); -- 通过元素的id属性值获取一个html元素，返回值就是这个元素所对应的JS对象 2) document.getElementsByTagName(标签名); -- 通过元素名称,获取该名称对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。 3) document.getElementsByClassName(class值); -- 通过元素的class属性值,获取该class值对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。 4) ele.parentNode -- 获取当前元素的上级元素(父元素) 5) ele.innerHTML -- 获取元素的所有内容, 或者设置元素的内容(原内容会被覆盖) <div>这是一个测试的div</div> ele.innerHTML = "xxx" 6) ele.value -- 获取或设置表单项元素的value值 2、增删改查元素 1)创建一个html元素 document.createElement(元素名/标签名); -- 创建一个指定名称的元素,返回值就是这个创建的元素所对应的JS对象 2)添加子元素 parentEle.appendChild( childEle ); -- 父元素调用方法添加一个子元素到父元素内部 3)删除子元素 parentEle.removeChild( childEle ) -- 父元素调用方法删除内部的子元素
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/27999.html
