一、JavaScript 简介
1、JS 介绍
JavaScript，简称 JS
JS 是由网景公司提供的一门语言
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)
-- 父元素调用办法删除外部的子元素