JavaScript基础

-----JS

JS介绍

由NetScape(网景)公司提供，嵌入在浏览器中执行的脚本语言，负责实现网页中的动画效果，或者是实现表单校验等功能。

JS特点和优势

1、特点：
(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)
java--> 编写时 xx.java --->编译成 xx.class --> 运行class文件
js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型的语言(Java:强类型)

//在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
//在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc"; //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型)

2、优势：
(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS 浏览器)
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

在HTML书写JS的方式

1、在script标签内部可以书写JS代码：
在head或者body标签内部可以添加一个script标签，在script标签内部可以直接书
写JS代码！

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
//JS的单行注释
/* JS的多行注释 */
alert( "在html中引入JS的第一种方式..." );
</script>

2、通过script标签引入外部的JS文件
可以通过script标签引入外部的JS文件。

<script src="demo.js"></script>

(1)在引入js文件的script标签内部不要书写JS代码

<script src="demo.js">
alert( 111 ); //这里的代码不会执行
</script>

(2)不要将引入JS文件的script标签自闭，因为可能会导致文件引入失败:

<script src="demo.js" />

可以直接在元素上书写JS代码:

<!-- 直接在元素上书写JS代码：
onclick属性用于给当前元素绑定点击事件：点击元素就会触发事件，执行相应函数
-->
<input type="button" value="点我~" onclick="alert('Hello!!!')"/>
<input type="button" value="别点我" onclick="console.log( new
Date() )"/>

JavaScript语法

JS的注释符号和Java的注释符号相同

// 单行注释内容
/* 多行注释内容 */

数据类型
1、基本数据类型
(1)数值类型(number)
在JS中，所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和
整型进行转换。

例如：2.4+3.6=6
特殊值：Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(string)
在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双
引号引起来。
JS中字符串类型有对应的包装对象（String），在需要时会自动的和包装
对象进行转换。

var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用
valueOf函数
console.log( s2.valueOf() );

(3)布尔类型(boolean)
布尔类型的值有两个，分别为true和false。
(4)undefined类型
undefined类型的值只有一个，就是undefined，表示变量未定义(但不是指变量没
有声明)。
指声明了变量，但没有为变量赋值，该变量的值就是undefined。

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null类型
null类型的值也只有一个，就是null，表示空值。
可以作为函数的返回值，表示函数返回的是一个空的对象。
注意：null和undefined类型的变量是不能调用函数或属性的，会抛异常！
2、复杂数据类型
主要指对象(JS的内置对象、自定义的对象、函数、数组)
变量声明
JS中是通过 var 关键字声明变量，声明的变量是不区分类型，可以指向任意的
数据。

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

JS中多次声明同名的变量不会出现语法错误,后声明的变量值会覆盖前一个的值。

/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123

JS运算符

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。

JS语句
1、if分支结构

if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}

2、switch语句

switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}

3、for循环语句 -- 循环代码块一定的次数

for (语句 1; 语句 2; 语句 3){
被执行的代码块
}

4、while循环,do while循环 -- 在指定条件为真时循环执行代码块

while (条件){
需要执行的代码
}
do{要执行的代码}
while(条件){要执行的代码}

JS数组
JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

1）JS中的数组可以存储任意类型的数据
2）JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数
JS中声明函数的方式:

function 函数名称([参数列表]){
函数体
}
or
var 变量名/函数名 = function([参数列表]){
函数体
}

DOM操作

DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素
提供的一套API。
dom中的常用API

function testDOM(){
//1)getElementById(id)：通过id获取元素,返回值是一个JS对象
var div = document.getElementById("div1");
console.log(div);
//2)getElementsByTagName(tagName)：获取所有名称为div的元素,返回值是
一个数组
var divArr = document.getElementsByTagName("div");
console.log( divArr[0] );
//3)parentNode: 获取div2元素的父元素
var parent = div.parentNode;
console.log( parent );
//4)createElement(tagName)：创建一个新元素,并将新元素添加到body内部
var newDiv = document.createElement("div");
newDiv.innerHTML = "这是一个测试div05";
document.body.appendChild(newDiv);
//5)removeChild(child)：删除id为div2的元素
var div2 = document.getElementById("div2");
div2.parentNode.removeChild( div2 );
//6)innerHTML：获取div1中的原内容，同时为div1设置新内容
var div1 = document.getElementById("div1");
console.log( div1.innerHTML );
div1.innerHTML = "原内容已被覆盖，这是新的内容！";
//7)value：获取用户名输入框中的值，同时为用户名输入框设置新的值
var userInput = document.getElementById("user");
console.log("用户名: "+ userInput.value );
userInput.value = "我姓智！"
}

总结：JS中如何获取元素
document 是一个js对象，用于表示当前html网页。当浏览器加载完整个html网
页后，会用document对象表示整个html网页！
document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返
回的是表示该元素的js对象。

<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素

document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文
档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。

document.body -- 获取当前文档中的body元素

element.parentNode -- 获取当前元素的父元素。element表示当前元素
总结:JS如何增删改元素
document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元
素，返回的表示新元素的js对象

parent.appendChild( child ) -- 通过父元素添加子元素，其中parent表示
父元素，child表示子元素

parent.removeChild( child ) -- 通过父元素删除子元素，其中parent表示
父元素，child表示子元素

element.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间
的所有内容)，或者设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内
容)

<div id="div1">
这是一个div元素...
<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容

element.value -- 获取表单项元素的 value内容，或者设置表单项元素的value
值（如果元素有value值，原值会被覆盖）

JS中的常用事件
事件 描述

onchang 在绑定的元素发生变化时，立即触发执行onchang指定的函数
onmouseover 当鼠标移入到元素上时，立即触发onmouseover指定的函数
onmouseout 当鼠标从元素上移开时，立即触发onmouseover指定的函数
ondblclick 在绑定的元素被双击后，立即触发执行ondblclick指定的函数
onload
在浏览器加载完页面中的所有元素后，立即执行onload指定的
函数