day03_JavaScript基础

一、JavaScript语言介绍

1、JavaScript简介

JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性.
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等.
不同于服务器端脚本语言，例如PHP、ASP(.net)和JSP(Java)，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持

2、JavaScript 语言的特点

(1) 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2) 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3) 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求.
(4) 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对在用户的输入做出响应。访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作,JavaScript都可直接对这些事件给出相应的响应。
(5) 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

3、JavaScript语言的组成

JavaScript由三部分组成: 
    1. 核心(ECMAScript)
    2. 浏览器对象模型(BOM)
    3. 文档对象模型(DOM)

ECMAScript：是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等

BOM： Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API), 开发人员使用BOM可以控制浏览器显示页面以外的部分.

DOM： Document Object Model,文档对象模型，提供访问和操作网页HTML内容的方法和接口

4、编写第一个JS程序

4.1 在Html文件中写

1. 导入JavaScript标签:

2. 在标签中间写js代码

3. script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在之间; 另外,同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下，谁在前就谁先执行, 谁在后就后执行.

4. JavaScript的注释
   单行注释: //, 多行注释 /* */

<script type=“text/javascript”>
	alert(“hello world!”) ; 
    document.write(“亲，我在页面上，跟alert不一样噢！”);
    console.log(“我是在控制台打印的, 以后常用我！”);
</script>

4.2 外部JS文件引入

<script type="text/javascript" src="demo1.js" ></script>

注意：
1. 不可以使用单标, 以下是不正确的写法
     <script type="text/javascript" src="demo1.js“/ >
2. 在引入了外部文件的标签中写代码会无效, 下面的alert()不会执行
     <script src=“demo1.js”>alert(‘xxxx’)</script>

二、JS基础语法

1、JS变量

1.1 JS变量的定义

<script type=“text/javascript”>
		// 定义的同时赋值：
       var age=20；
       // 可以一次定义多个变量：
       var name=“zhangsan", age=18，weight=108;
</script>

1.2 JS变量的命名规范

1. 变量名可以是数字,字母,下划线_和美元符$组成;
2. 第一个字符不能为数字
3. 不能使用关键字或保留字
4. 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
5. 变量命名尽量遵守驼峰原则: myStudentScore

2、变量的数据类型

JS数据类型一般可以分为: 
      Boolean: 布尔类型
      Number：数字（整数int，浮点数float）
      String：字符串
      Array：数组 
      Object：对象
特殊数据类型 Null、Undefined
使用 typeof 操作符来检测变量数据类型

<script type=“text/javascript”>
	var b = "张三";
	console.log(typeof b);
	console.log(typeof "张三");  
</script>

2.1 Undefined类型

Undefined类型: 
      Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined

2.3 Null类型

Null 类型: 
      Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个
      空对象引用(指针)，而 typeof 操作符检测 null 会返回 object。

undefined 是派生自 null 的，因此 ECMA-262 规定对它们的相等性
测试返回 true, 表示值相等

2.3 Boolean类型

Boolean类型: 
      Boolean 类型有两个值：true和false。而true一般等于1，false一般等于0。
       JavaScript 是区分大小写的，True和False或者其他都不是Boolean类型的值。

2.4 Number类型和Math对象

Number类型:
      Number 类型包含两种数值：整型和浮点型.

由于保存浮点数值需要的内存空间比整型数值大两倍，
因此 ECMAScript 会自动将可以 转换为整型的浮点数值转成为整型。

 NaN, 即非数值(Not a Number)是一个特殊的值
 这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。
 比如，在其他语言中,  任何数值除 以 0 都会导致错误而终止程序执行。
 但在ECMAScript中，会返回出特殊的值，因此不会影响程序执行。

<script type=“text/javascript”>
	var b = 8.;	//小数点后面没有值，转换为 8
	var b = 12.0;	//小数点后面是 0，转成为 12
</script>

Math对象
Math对象可以用于执行数学任务
Math对象的常用函数:

      Math.round(3.6)     //四舍五入
      Math.random()       //返回0-1之间的随机数
      Math.max(num1, num2)  //返回较大的数
      Math.min(num1, num2)   //返回较小的数
      Math.abs(num)     //绝对值
      Math.ceil(19.3)     //向上取整
      Math.floor(11.8)    //向下取整
      Math.pow(x,y)       //x的y次方
      Math.sqrt(num)     //开平方
      Math.sin(x)  //返回数的正弦

2.5 类型转换

字符串转换数字类型：parseInt()、parseFloat()
     parseInt()      是把其它类型转换为整型
     parseFloat()  是把其它类型转换为浮点型（小数）

Math.round四舍五入 (78.566) -> 79

2.6 数组类型(重要)

本节会另取一级目录来讲解

3、JS运算符

算术运算符 (+，-, *, /, %(取余数))
字符串和变量的拼接(+)
关系运算符
           <、>、<=、>=、==、===、!=, !==
逻辑运算符
           &&  与(且)、||  或、!  非
赋值运算符 a+=10;
           =、+=、-=、*=、/=、%=
自增、自减
           ++a, a++, --a, a--

三、数组

1、数组的概念

数组的概念
      数组的字面意思就是一组数据，一组(一般情况下相同类型)的数据
      （不一定都是数字）


数组的作用是：使用单独的变量名来存储一系列的值。

2、数组的定义

new Array（参数，参数,...）: 只有一个数字参数时是数组的长度（new可以省略,但一般尽量写上）
使用数组元素（访问）；
arr3[0]:表示数组的第一个元素，0是下标，也叫索引
    arr[1]:表示数组的第二个元素，1是下标

给数组赋值，就是给数组的元素赋值，需要给数组的每个元素一一赋值，
    如：arr[0] = 20;//让数组的第一个元素的值为20；
	 arr[1] = 12;//让数组的第二个元素的值为12；

<script type=“text/javascript”>
	var arr = new Array();   //定义一个空数组 
	var arr = new Array(10);  
	//创建一个包含 10 个元素的数组，没有赋值
	var arr2 = new Array(“芙蓉姐姐”,30); 
	//创建一个数组有两个元素
	var arr3 = [1,2,3,4,5];  //字面量定义方式
</script>

3、数组的使用

交换两个数
       引入新变量
	var temp = a;
	         a = b;
	         b = temp;
         不引入新变量
          a = a + b;
                b = a – b;
                a = a – b; 
      位运算交换
	 a = a ^ b;
	 b = a ^ b;
	 a = a ^ b;

4、数组的常用函数

4.1 reverse()

reverse()        // 逆向排序, 原数组也被逆向排序了
var box = [1,2,3,4,5];
alert(box.reverse()); //逆向排序方法，返回排序后的数组
alert(box);   

4.2 sort()

var box = [4,1,7,3,9,2];
alert(box.sort());   //从小到大排序，返回排序后的数组
alert(box);  

sort 方法的默认排序在数字排序上有些问题，因为数字排序和数字字符串
排序的算法是一样的。我们必须修改这一特征，修改的方式，就是给 sort
(参数)方法传递一个函数参数。

//如果一定要使用sort()进行排序, 可以传递一个函数
function compare (value1, value2) {
	if (value1 < value2) {
		return -1;  //返回0和-1, 表示不交换值
	}
	else if (value1 == value2) {
		return 0;
	}
	else {
	   	return 1;   //返回1, 表示会交换值
	}
}
var box = [0, 1, 10, 5, 15];
var aseBox = box.sort(compare);   //返回升序的数组

4.3 concat()

concat() : 追加数据, 创建一个新数组, 不改变原数组

	var box = [2, 3, 4, '绿箭侠', '黑寡妇'];
	var box2 = box.concat('美队', '雷神');
	alert(box);
	alert(box2);

4.4 slice()和splice()

slice():  不修改原数组, 将原数组中的指定区域数据提取出来
	
var box = [2, 3, 4, "绿巨人"];
var box2 = box.slice(1, 3); //并没有修改原数组,将原数组中的元素提取出来,生成新数组, 取的是下标在区域: [1,3)
alert(box);
alert(box2);

splice(): 截取原数组中指定的数据, 会改变原数组
插入: 如果有3个或以上参数,且第二个参数(长度)为0,则表示插入
	box.splice(1, 0, "绿巨人", "冬兵"); 
        //在下标为1前面的位置插入: "绿巨人","冬兵"

替换: 如果有3个或以上的参数, 且第二个参数(长度)不为0, 则表示替换
	box.splice(1, 1, "绿巨人", "冬兵"); 
        //在下标为1的位置替换成: "绿巨人","冬兵"
	
删除: 如果只有两个参数, 则表示删除指定区域的数据
	0 表示开始删除的下标，2是删除的数目
	box.splice(0, 2);  //删除原数组的部分数据, 并返回截取的数据

四、字符串

1、字符串的长度属性

字符串的属性
length:  表示字符串的长度
   例如 :  var str = “how are you”;
              console.log(str.length);
              console.log(str[0]);  //获取字符串中对应下标的字符

注意: ECMAScript 中的字符串是不可变的; 也就是说，字符串一旦创建，它们的值就不能改变.
   例如:  var str = “亲,包邮哦”;
             str[0] = “唉”;  //不会改变

如果要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量.
var str =  “Hello”;
str = str+” world!”;

数值改为字符串的一种方法：number+'str’

2、字符串的方法

方法	描述
str.charAt(n)	获取字符串下标为n的元素
str.charCodeAt(n)	获取字符串下标为n的字符编码
String.fromCharCode(94)	静态方法，将编码为94的字符转换为该字符
str.concat()	字符串的拼接
str.indexOf(substr)	查找substr在str中第一次出现的位置
str.lastindexOf(substr)	查找substr在str中最后一次出现的位置
str.search()	正则匹配 返回第一次出现的位置
str.replace()	替换字符串
str.substring(start,end)	截取子字符串
str.split(separator,howmany)	以指定字符分割成列表，指定列表的最大长度(可省略)
str.toLowerCase()	转换小写
str.toUpperCase()	转换大写

演示

<script type="text/javascript">
	//字符串的拼接
	var str1 = 'hello';
	var str2 = str1.concat('world');

	//替换字符串
	var str = "how are Are are you!";
	var newStr = str.replace("are", "old are");
	console.log(newStr);
	//输出结果  how old are Are are you!
</script>

五、流程控制

分支结构

IF语句

 if多分支语句的写法: 
        if(表达式){
	执行语句1
        } 
        else if(表达式2){
	执行语句2
        }
        else if(表达式3){
	执行语句3
        }
        else{
	执行语句n
        }

Switch语句

Switch语句的写法: 
switch(表达式) {
     case 常量1:语句; break;
     case 常量2:语句; break;
	…
     case 常量n:语句; break;
     default:语句; break;
}

循环结构

While循环

while循环语法格式:
      while(表达式)
{
       执行代码;
}

For循环

for (表达式1; 表达式2; 表达式3) {
       执行代码;
}

六、JS对象和日期Date

对象的创建

创建 Object 类型有两种。
      一种是使用 new 运算符，另一种是字面量表示法。

<script type="text/javascript">
//1. 使用 new 运算符创建 Object 
	var box = new Object();         //new方式  
	box.name =‘张三’;   		//创建属性字段    
	box.age = 18;			//创建属性字段
 
    //new关键字可以省略 
  	var box = Object();       //省略了new关键字,不建议

//2. 使用字面量方式创建Object 
	var box = {               //字面量方式 
      	      name :‘张三',   //创建属性字段,最后加逗号 
      	       age : 18 
	};
//3. 属性字段也可以使用字符串形式 
     var box={ 
	'name' : '张三', 	//也可以用字符串形式 
	'age' : 28
     };
//4.  使用字面量及传统赋值方式 
       var box={};		 //字面量方式声明空的对象
       box.name='张三'; 	             //点符号给属性赋值
       box.age= 18;
//5.  两种属性输出方式 
      alert(box.age);	      //点表示法输出 
      alert(box['age']); 	      //中括号表示法输出，注意引号
//6.  给对象创建方法 
    var box={ 
	//对象中添加方法(函数)run
	run : function() {        
	         retrun “正在跑步..”; 
	 }
    } 
    alert(box.run()); //调用对象中的方法
//7.  使用 delete 删除对象属性 
delete box.name;     //删除属性
</script>

日期Date

日期对象的创建

<script type="text/javascript">
	var d = new Date();

// 创建日期对象并指定时间
	var d = new Date("2015/08/22");
	var d = new Date(2016,04,13,14,34);
</script>

日期对象的方法

方法	描述
box.toDateString()	以特定的格式显示星期几、月、日和年
box.toTimeString()	特定的格式显示时、分、秒和时区
box.toLocaleDateString()	特定地区格式显示年、月、日
(box.toLocaleTimeString()	以特定地区格式显示时、分、秒
box.toLocaleTimeString()	以特定地区格式显示时、分、秒
box.toUTCString()	以特定的格式显示完整的 UTC 日期: 年,月,日,时,分,秒
setDate() / getDate()	从Date对象中返回一个月中的某一天(1~31)
getDay()	从Date对象返回一周中的某一天(0~6)
set / getMonth()	从Date对象中返回月份(0~11)
set / getFullYear()	从Date对象以四位数返回年份
set / getHours()	返回Date对象的小时(0~23)
set / getMinutes()	返回Date对象的分钟(0~59)
set / getSeconds()	返回Date对象的秒数(0~59)
set / getMilliseconds()	返回Date对象的毫秒
set / getTime()	返回1970年1月1日至今的毫秒数

七、DOM

1、DOM的概念

DOM概念详解
   D(文档Document): 可以理解为整个Web加载的网页文档；
   O(对象Object): 可以理解为类似window对象之类的东西，
   可以调用属性和方法，这里我们说的是 document 对象；
   M(模型Model): 可以理解为网页文档的树型结构。

通过DOM，我们可以访问所有的HTML元素，连同它们所包含的文本和属性
。可以对其中的内容进行修改和删除，同时也可以创建新的元素

2、元素节点的获取方式

方法	描述
getElementById()	获取特定ID元素的节点对象(返回一个对象)
getElementsByTagName()	获取指定标签名的节点列表(返回一个数组)
getElementsByName()	获取相同name属性值的节点列表(返回一个数组)
getElementsByClassName()	获取相同class值的节点列表(返回一个数组)

<script type="text/javascript">
	var box = document.getElementById('box'); 
</script>

注意: 如果id值存在, 但是返回null，则是执行顺序的问题
解决方法:
1. 把<script>标签(JS代码)移到html结构后面；
2. 使用onload事件来处理， onload事件会在html加载完毕后再调用。 
 //加载 html 后执行 
 window.onload=function() {      
       document.getElementById('box');  //id具有唯一性
 };

3、元素节点的属性

可设置可获取

属性	描述
tagName	元素节点对象所指向的标签名称
id	元素节点的id属性值
innerHTML	元素节点中的内容
className	元素节点的class属性值
style	css内联样式对象
title	元素节点的title属性值

获取全局的css属性

因为在js中如果没有在JS代码里预先设置就直接用dom元素节点的style属性
是获取不了css的相关属性，所以需要用到以下方法

<script type="text/javascript">
	var box = document.getElementById('box'); 
	style = window.getComputedStyle(box,null);
	console.log(style.left);
</script>

4、获取子元素节点

<script type="text/javascript">
	通过oBox元素节点, 获取其三个子元素节点img
	var oBox = document.getElementById("box");
	var aImg = oBox.getElementsByTagName("img");
</script>

5、元素节点间的关系相关属性

关系属性	描述
parentNode	返回该节点的父节点
previousSibling	属性返回该节点的前一个同级节点 空白区域也算
nextSibling	属性返回该节点的后一个同级节点 空白区域也算
previousElementSibling	返回该节点的父节点 忽略空白区域
nextElementSibling	属性返回该节点的后一个同级节点 忽略空白区域

<script type="text/javascript">
	console.log(box.parentNode.nodeName);  //获取父节点的标签名 
	console.log(box.previousSibling);					 	
	console.log(box.nextSibling);       //获取后一个同级节点
</script>

6、DOM节点操作

操作	描述
createElement()	创建一个元素节点
appendChild()	添加一个新子节点到节点的末尾
createTextNode()	创建一个文本节点
insertBefore()	将新节点插入到某节点前面
replaceChild()	将新节点替换旧节点
cloneNode()	复制节点
removeChild()	移除节点

<script type="text/javascript">
box = document.getElementById('box');
var newEle = document.createElement('p');
			
box.appendChild(newEle);
			
var textNode = document.createTextNode('textNode');
box.appendChild(textNode);
			
var newEle1 = document.createElement('div');
box.insertBefore(newEle1,newEle);
			
var newEle2 = newEle1.cloneNode();
			
box.replaceChild(newEle2,textNode);
			
// box.removeChild(newEle2);
console.log(box)
			
</script>