JavaScript基础知识简单版

JavaScript

一、JavaScript简介

1、JS介绍

JS全称JavaScript，是由NetScape（网景）公司提供的一门专门嵌入在浏览器中执行的脚本语言。

主要作用：用于实现网页中的动画效果和实现表单校验。

JS可以运行在服务器端（Node.js）

2、JS的特点

• JS是一门直译式的语言（J边解释边执行，没有编译的过程，执行的就是源代码）

• JS是一门基于对象的语言（JS中没有类的概念，也没有编译的过程，它可以通过某些机制模拟面向对象）

• 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(对象类型)
  
  

3、JS的优势

1. JS具有良好的交互性

2. JS具有一定的安全性（只能在浏览器内部运行，不能访问浏览器以外的资源）

3. JS具有跨平台性

   之所以说JS具有跨平台性，是因为JS是运行在浏览器上的。但是需要注意的是：

   • JS语言具有跨平台性,是因为有浏览器，但是浏览器不跨平台!
   • 同理，ava语言具有跨平台性,是因为有JVM，但是JVM不跨平台

4、在HTML书写JS的方式

方式一：在script标签内部可以书写JS代码：

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

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

方式二：通过script标签引入外部的JS文件

在head或body标签内部，可以通过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('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我"  onclick="console.log( new Date() )"/>

onclick、ondblclick事件
1. onclick是点击事件,在被绑定了该事件的元素上点击后,会立即触发事件,执行所指向的函数
2. ondblclick是点击事件,区别是需要双击才可以触发事件,执行所指向的函数

二、JavaScript语法

1、注释格式

JS的注释符号和Java的注释符号相同，如下：

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

2、数据类型

1、基本数据类型

(1)数值类型(number)

在JS中，所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。

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

(2)字符串类型(string)

在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来。例如：

var s1 = "Hello JS";
var s2 = 'Hello 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的内置对象、自定义的对象、函数、数组)

3、变量声明

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是严格区分大小写的!

4、JS运算符

JS和Java中的运算符大致相同，例如：

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

5、JS语句

JS中的语句和Java中的语句也大致相同

1、if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：

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

2、switch语句

使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：

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

执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。

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

for 循环的语法结构如下：

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

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

JS中while循环也分为while和do/while循环，下面为while循环语法结构:

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

while 循环会在指定条件为真时循环执行代码块。

案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级

80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误

代码实现如下：

propmt( 参数1, 参数2 )函数：在页面上弹出一个消息输入框，接收的参数1是在弹框中显示的提示内容，用户输入的内容，会作为函数的返回值直接返回。

参数2, 是输入框中的默认值, 可以修改

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
	alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
	alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
	alert("您的成绩属于: 不及格!");
}else{
	alert("您的输入有误, 请重新输入!");
}

prompt(*msg,defaultText*)

参数	描述
msg	可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText	可选。默认的输入文本。

案例2：switch语句案例—实现一个简易的计算器：

可以接收用户输入的两个数值和一个运算符(+、-、*、/)，根据运算符号的不同，对两个数值执行不同的运算。

代码实现如下：

//1.接收用户输入的数值和运算符, 中间用空格分隔

var str = prompt("请输入数值1、运算符、数值2，中间用空格分隔："); //"10 + 5"

//2.对用户输入的内容进行切割(以空格作为分隔符切割)

var arr = str.split(" "); // ["10", "+", "5"]

var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
	case "+":
		alert( "两个数的和为: "+( num1+num2 ) );
		break;
	case "-":
		alert( "两个数的差为: "+( num1-num2 ) );
		break;
	case "*":
		alert( "两个数的乘积为: "+( num1*num2 ) );
		break;
	case "/":
		alert( "两个数的商为: "+( num1/num2 ) );
		break;
	default:
		alert( "您输入的运算符有误, 请重新输入!" );
}

案例3：for循环语句案例

遍历1~100之间的所有整数，求1~100之间所有整数的和，并输出到控制台;

代码实现如下：

//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
    sum += i;
    i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
	sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------

案例4：while循环语句案例

遍历下面数组中的元素，将元素输出到控制台。

var arr = [123, "abc", false, new Object() ];

代码实现如下：

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
	console.log( arr[index] );
	index++;
}
for( var i=0; i<arr.length; i++ ){
	console.log( arr[i] );
}

6、JS数组

Array 对象用于在单个的变量中存储多个值。

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

7、JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){
	函数体
}

或者：

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

调用函数: 函数名称([参数列表]);

综合练习

(自己完成)声明一个函数fn，在函数中实现：遍历指定的两个数值(例如1和100)之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。

1、声明fn函数

//声明一个fn函数,接收两个参数
function fn(x,y){
    //声明一个数组,用于存储是3的倍数的数值
    var arr = [];
    //循环x到y之间的所有整数
    for(var i=x,j=0;i<y;i++){
        //判断i(当前正在遍历的整数)是否为3的倍数
        if(i%3==0){
        	arr[j] = i; //如果是,则将i存入arr数组中
        	j++; //j自增
    	}
    }
    return arr; //返回arr数组
}

2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组

var arr = fn(1,100);

3、遍历数组中的元素, 输出在网页上(提示: document.write(“输出的内容”) )

for(var i=0;i<arr.length;i++){
	document.write(arr[i]+" ");
}

三、DOM操作

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

http://www.phpx.com/man/dhtmlcn/objects/obj_document.html

属性： title ; bgColor ; url; ( 使用： document.title)

方法：

focus	使得元素得到焦点并执行由 *onfocus *事件指定的代码。
getElementById	获取对 *ID *标签属性为指定值的第一个对象的引用。
getElementsByName	根据 *NAME *标签属性的值获取对象的集合。
getElementsByTagName	获取基于指定元素名称的对象集合。

document.getElementById定义和用法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法

document.getElementById(id)

说明

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

实例

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

案例一:电灯开关

点击电灯可以实现开/关灯，代码实现如下：

var flag = "off"; //标记灯的状态, off表示灯是关闭的!
function changeImg(){
	//获取img元素,返回的是一个JS对象
	var oImg = document.getElementById("img1");
	if( flag == "off" ){ //表示灯之前是关闭状态,点击之后则需要打开
		oImg.src = "imgs/on.gif"; //灯打开了
		flag = "on"; //更新灯的状态为on,表示灯打开了
	}else{ //on,表示灯之前是打开状态,点击之后则需要关闭
		oImg.src = "imgs/off.gif"; //灯关闭了
		flag = "off"; //更新灯的状态为off,表示灯关闭了
	}
}

案例二:二级联动下拉框

var data = {
  "北京市": ["海淀区","朝阳区","丰台区"],
  "河北省": ["石家庄","唐山","秦皇岛"],
  "辽宁省": ["沈阳","大连","鞍山"],
  "山东省": ["青岛","济南","烟台"]
}
/* 练习2: 实现二级联动下拉框 */
function selectCity(thisobj){
	//1.获取用户选中的省份
	var prov = thisobj.value;
	//2.根据省份获取该省份下所有的城市列表 北京市
	var arrCity = data[prov];
	//console.log(arrCity);
	
	//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
	//>>获取第二个select
	var oCity = document.getElementById("city");
	
	//>>先清空上个省份对应的城市列表
	//方式一
	//oCity.innerHTML = "<option>--选择城市--</option>";
	
	//方式二 JS中的数组的特点
	var opts = oCity.getElementsByTagName("option");
	//循环遍历, 挨个删除每一个option
	var len = opts.length;
	for(var i=0; i<len-1; i++){
		oCity.removeChild(opts[1]);
	}
	
	//海淀区 --> <option>海淀区</option>
	for(var i = 0; i<arrCity.length; i++){
		var oOpt = document.createElement("option");
		oOpt.innerHTML = arrCity[i];
		oCity.appendChild(oOpt);
	}
}

案例三:表格隔行换色

练习1：点击按钮让表格行隔行换色

/* 练习1：点击按钮让表格行隔行换色 */
function changColor(){
	//获取所有tr元素组成的数组
	var aTr = document.getElementsByTagName("tr");
	//循环遍历tr数组中的每一个tr元素
	for(var i=1; i<aTr.length; i++){
		if(i%2 == 0){//奇(偶)数行,设置为one
			aTr[i].className = "one";
		}else{//偶(奇)数行,设置为one
			aTr[i].className = "two";
		}
	}
}

练习2：当鼠标悬停在表格行元素上时，让当前行变色；当鼠标移开元素，恢复默认样式

/* 练习2：当鼠标悬停在表格行元素上时，让当前行变色；当鼠标移开元素，恢复默认样式
   onload：当页面加载完所有的html元素后，立即执行function  */
window.onload = function(){
	//获取所有tr元素组成的数组
	var aTr = document.getElementsByTagName("tr");
	for(var i=1; i<aTr.length; i++){
		var classNameTemp;
		//当光标移入元素时
		aTr[i].onmouseover = function(){
			classNameTemp = this.className;//记住改变之前的class
			this.className = "hover";
		}
		//当光标移出元素时
		aTr[i].onmouseout = function(){
			this.className = classNameTemp;
		}
	}
}

总结: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中的常用事件

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