一、JavaScript简介
1、JS介绍
JavaScript，简称JSJS是由网景公司提供的一门语言JS是一门嵌入在浏览器中执行的脚本语言（一段小程序）次要作用：用于实现网页中的动画成果和实现表单验证JS能够运行在服务器端（Node.js）2、JS的特点
JS是一门直译式的语言（JS不须要编译,执行的就是源代码）JS是一门基于对象的语言（JS能够通过某些机制模仿面向对象）JS是一门弱类型的语言（Java是强类型） Java: int number = 100; boolean flag = true; String str = "abc"; JS: var x; //undefined，undefined x = 100; //number x = "abc"; //string x = true; //boolean x = []; //object 3、JS的劣势
JS具备良好的交互性(提出初衷,嵌入在浏览器中,可能进步用户体验)JS具备肯定的安全性(运行在浏览器外部,比方,不能拜访硬盘)JS具备跨平台性 JS语言具备跨平台性,是因为有浏览器 4、如何在HTML中引入JS？
4.1.形式一: 在head或者body外部能够增加一个script标签
在script标签外部能够间接书写JS代码<!-- 形式一: 在script标签外部间接书写JS代码 type:能够省略,指定语言类型是JS --><script type="text/javascript"> // alert("Hello JS...111"); //弹出一个正告框 console.log("Hello JS...111"); //输入内容到浏览器的控制台</script>4.2.形式二: 在head或者body外部能够增加一个script标签
在script标签通过src属性,能够引入内部的JS文件<!-- 形式二: 引入内部的JS文件 --><script src="js/demo.js"></script>须要留神的是,第二种形式script标签外部不要写JS代码,写了也不会执行!<script src="js/demo.js"> console.log("Hello JS...333");//不会执行!</script>4.3.形式三:将JS代码写在标签上
<!-- 形式三: 将JS代码写在html中的标签上 --><input type="button" value="别点我~~~" onclick="alert('不让你点,你非要点~~~')" />二、JS的语法
1、JS的正文
// 单行正文/* 多行正文 */2、JS数据类型
2.1.根本数据类型
1)数值类型(number) 在JS的底层,所有的数值都是浮点型 但在解决和显示的过程中,如果能够显示为整型,会主动的在整型和浮点型之间进行转换 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 undefined: 示意申明了变量,然而没有为变量赋值,该变量的值就是undefined undefined 不能调用属性或者办法,否则会抛出异样! 5)null类型 null类型的值也只有一个,就是null。 null: 示意空值,能够作为函数的返回值,示意函数返回的是一个空的对象 null不能调用属性或者办法,否则会抛出异样!2.2.简单数据类型
对象,数组,函数3、JS的变量申明
JS中是通过var关键字申明变量,通过var申明的变量不辨别类型,能够指向任意的数据 var s1 = "Hello World"; s1 = 123; s1 = false; s1 = []; s1 = function(){}JS中有主动断句性能,即便一行前面不加分号,也能够失常执行,然而倡议加上分号;JS中如果反复申明变量,也不会报错, 因为JS中申明一个已存在的变量不会失效; var x = "abc"; //var x; x = "abc"; var x = 123; //var x; x = 123; alert(x); 4、JS的运算符
算术运算符: +，-，*，/，%，++，--赋值运算符: =，+=，-=，*=，/=，%=比拟运算符: ==，!=，>，>=，<，<=位运算符: & ， |逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )前置逻辑运算符: ! (not)三元运算符: 表达式 ? 表达式1 : 表达式2。。。5、JS的语句
5.1.if分支
if(){...}if(){...}else{...}if(){...}else if(){...}else{...}5.2.switch分支
switch(x){ case opt1: 代码块; break; case opt2: 代码块; break; ... default: 代码块; }5.3.循环构造
for(){}while(){}do..while(){}6、JS数组
JS的数组申明形式: //申明一个空数组,长度为零 var arr1 = []; //java中: int[] numbers = {10,8,45,99}; //申明一个具备初始值的数组 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); var arr3 = new Array("abc");JS数组的特点: 1) JS中的数组能够存储任意类型的数据 2) JS数组的长度能够被任意扭转 7、JS函数
JS的函数相当于Java中的办法就是一个具备性能的代码块,通过函数名能够重复执行!申明形式1: function 函数名([参数列表]){ 函数体... } 申明形式2: var 变量/函数名 = function([参数列表]){ 函数体... }如果是只须要执行一次的函数，能够申明为匿名函数(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 -- 获取元素的所有内容, 或者设置元素的内容(原内容会被笼罩)6) ele.value -- 获取或设置表单项元素的value值2、增删改查元素
1)创立一个html元素document.createElement(元素名/标签名);-- 创立一个指定名称的元素,返回值就是这个创立的元素所对应的JS对象2)增加子元素parentEle.appendChild( childEle );-- 父元素调用办法增加一个子元素到父元素外部3)删除子元素parentEle.removeChild( childEle )-- 父元素调用办法删除外部的子元素