Java大数据之路--JS

• javascript概述

---

javascript是一门基于对象的语言。

javascript是一门独立的语言。

javascript是一门脚本语言。脚本语言特点：直接解释执行。

javascript常用于浏览器端，在后台也有技术实现，Node.js

 

• javascript不得不说的历史

---

和JAVA的关系：语法十分相似，但其实毫无关系。

1995年5月，Netscape，LiveScript

1995年12月，改名为JavaScript

1996年8月，微软，Jscript

1997-1999年，ECMA，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语

 

• HTML引入JS

 第一种：在head标签中写一个script子标签，在script标签中写下JS代码。

<script type="text/javascript">
	alert(123)
</script>

第二种：引入外部JS文件，在head标签中书写一个script子标签，在script起始标签身上添加src属性，指向外部JS文件。

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

1. js语句是自上而下的解释执行。每次都会讲一句js语句放入浏览器中内置的js解析器进行解释执行。
2. js语句可以不添加分号，如果不添加则会在解释过程中，由js解析器自动添加。(推荐手动书写，避免不必要的错误。)
3. 在引入script标签时，如果引入的是外部文件，script标签中间没有任何语句。这时不能把script标签书写为自闭标签，如果改变为自闭标签则会导致js语句失效。

• JS语法---数据类型

JS数据分为两大类：基本数据类型和复杂数据类型

1、基本数据类型分为5种：

数值型（Number）、字符串型（String）、布尔型（Boolean）、未定义型（Undefined）、空类型（Null）。

数值型：

在js中数值型是一种基本数据类型，也是js的一个包装对象。其中包含属性和方法。

//Number数值型 //alert(Number.MAX_VALUE); //alert(Number.MIN_VALUE); console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(Number.NEGATIVE_INFINITY); console.log(Number.POSITIVE_INFINITY); console.log(-Infinity); console.log(Infinity); console.log(NaN==123); console.log(NaN=="abc"); console.log(NaN==NaN); console.log(isNaN(123));//false console.log(isNaN("abc"));//true

NaN属性：表示一个非数字，本身和任何值都不相等包括它自己。

字符串类型

在js中String是一个基本数据类型，同时还是js的一个包装对象。

js中的String相关api和java相似。可以通过查看jsapi文档使用。

var str = "abcdefg"; console.log(str.length); console.log(str.charAt(0)); var str1 = "abc'efg'qwe'"; console.log(str1.split("'")); console.log(str.toUpperCase());

布尔型Boolean

在js中Boolean是一个基本数据类型，同时还是js的一个包装对象。在布尔型中只包含两个值，分别为true和false。

console.log(true || false);//true console.log(true && false);//false console.log(true | false);//1 console.log(true & false);//0 console.log(!true);//false

未定义类型Undefined

js中的一个基本数据类型，这个类型中只包含undefined这一个值。常用于表示一个未被初始化的变量。

var  a;

console.log(a);//undefined

空类型Null

js的一个基本数据类型，这个类型中只包含null这一个值。常用于表示一个无效的值。多数用来作为返回值使用。

拓展：

console.log(null==undefined);//判断的是两者的类型。js中认为两者类型相同(js中认为null来自于undefined)

console.log(null === undefined);//判断的是两者的值，值必然不相等。

•  JS语法---数据类型自动转换

js在需要时会自动对类型进行转换，转换的规则：

数字	可以在需要时转换为对应的字符串形式。0会转换位false，其他数字会转换为true.在需要对象时可以自动转换为Number对象。
字符串	可以在需要时转换为对应的数值，需要注意当数值和字符串进行加法运算时，会处理为字符串的拼接，所以需要通过parseInt或parseFolat将字符串强制转换为数值类型参与运算。非空字符串转换为ture，空字符串转换为false。需要对象时自动转换为String对象
布尔类型	true转换为1，false转换位0.转换为字符串的"true"和"false".转换为Boolean对象
对象类型	如果为null则转成字符串"null",如果为null转换为false

•   JS语法---运算符

+	可以作为加法运算。可以作为与字符串的拼接运算
-	只能作为减法运算
*	运算过程中会保留浮点型数据
/	运算过程中会保留浮点型数据

注意：js中整型数据运算结果产生小数，会以小数的形式展示，小数运算结果为整数，会以整型的形式展示。

i. 三目运算符
	2+3>5?"yes":"no"
ii. typeof()判断当前变量的类型
	var str = 123;
	console.log(typeof(str));//number
	var str1 = "abc";
	console.log(typeof(str1)=="string");//string
	var str2 = true;
	console.log(typeof(str2));

• JS语法---定义变量

定义变量的关键字----var i;

var定义的变量为弱类型的变量，可以理解为是一种没有类型的类型。

var a = 0; a = "abc"; a = true; a = new Object(); console.log(a);

局部变量和全局变量

定义局部变量：var i=0;   定义全局变量：i=0;

//局部变量 function mx(){ var x = 1; } mx(); console.log(x); //全局变量 function mx(){  x = 1; } mx(); console.log(x);

•  JS语法---语句

和JAVA中的使用方式相同，但是没有增强for循环。

js中的if语句，判断结构中可以书写为x= 1这种形式，这种形式为赋值语句，执行赋值操作后才会进行判断。总结为先赋值，再判断。由于x被赋值为1，if判断的单独一个x，就相当于是if(x)，也就是if(1)，会得到true中的结果。 

• JS---复杂数据类型

 函数、数组、对象

• js函数

1. js函数是一段可执行js语句的合集。可以通过调用函数名加上一对小括号的形式来执行js函数。js函数本质上是一段字符串。
2. 在js中，函数调用时，可以传入比参数列表更少的数据，未被传入值的参数，将会以undefined为值来使用。
3. 在js中，函数调用时，可以传入比参数列表更多的数据，多余的数据未被抛弃，在函数中内置的arguments属性会将用户传入的参数全部放在一个数组中。可以通过循环遍历的方式来获取。
4. 函数中可以将函数名称当做参数来使用，传入方法的参数列表。在函数希望使用的使用只需要在函数名后添加一对小括号即可。总结：函数传递，可以通过变量(函数名)实现。函数调用就是在函数名后添加括号。
5. Function类型是js中的内置的一个对象类型。
6. 函数的定义方式
7. 普通函数定义方式

function mx(参数列表){ 函数体 } mx()

动态函数定义方式

//在括号中的最后一个参数为函数体 //最后一个参数之前的所有参数都属于参数列表 var mx1 = new Function("a","b","return a+b"); console.log(mx1(1,2));//3

直接量定义函数(匿名函数)

var mx2 = function(a,b){ return a+b; }; console.log(mx2(3,4));

• js数组

1. 在js中数组本质是一段可执行的字符串。js数组是由一对中括号，其中包含多个元素，元素之间用逗号隔开组成的数据。
2. js数组特点:存储数据的类型是任意的.存储数据的长度是任意.
3. js数组的定义方式：

//普通数组定义方式

var arr = new Array(); arr[0] = 1; arr[1] = "abc"; console.log(arr);

//包含初始容量的数组定义方式

var arr1 = new Array(3); arr1[0] = "abc"; arr1[1] = true; arr1[2] = 1; arr1[3] = 2; arr1[99] = 3; console.log(arr1);

//包含初始值的数组定义方式

var arr2 = new Array(1,"abc",false,new Object()); console.log(arr2); /*var arr3 = new Array("A"); console.log(arr3)*/

//直接量定义数组（匿名数组）        

var arr3 = [1,"abc",true]; console.log(arr3); var arr4 = [3];         console.log(arr4);

数组操作api

push()添加元素，pop()移除最后一个元素，shift()移除第一个元素，for()遍历数组

js对象--内置对象

String -- 基本数据类型 字符串类型 的包装对象

Boolean -- 基本数据类型 布尔类型 的包装对象

Nubmer -- 基本数据类型 数值类型 的包装对象

Array -- 数组类型 的包装对象

Function -- 函数类型 的包装对象

Math -- 数据对象，封装了很多数学常量和数学方法

Date -- 日期时间对象，封装了很多和日期实现相关的方法

Global -- 全局对象。js中有一些方法和属性经常使用，但归到哪个对象上都不合适，所以js中有一个Global对象整合了这些方法和属性。Global中定义的方法和属性特点是属于全局，可以直接使用。

思考：parseInt("123abc123");打印结果。

RegExp --正则对象，保存有关正则表达式模式匹配信息的固有全局对象。Partten

• js对象 --自定义对象

1. 在js中对象的本质是一段可执行的字符串。是由一对花括号，其中包含多个键值对，键值之间使用冒号(:)隔开，键值对之间使用逗号隔开，这些内容组成了js对象。
2. js中没有类的概念，无法通过类创建对象。可以通过构造函数的形式直接创建一个类的构造函数，用它产生对象。
3. js对象创建方式

无参构造创建对象

function Person(){   } var p = new Person(); p.name = "lili"; p.age = 18; p.say = function(){ return this.name+"say....."; } console.log(p.say());

有参函数创建对象

function Person(name,age){ this.name = name; this.age = age; } var p = new Person("cy",90); p.addr = "安徽"; console.log(p);

直接量定义对象（匿名对象）

var p = {name:"cy",age:18,addr:"安徽"}; console.log(p);

对象api操作：

删除属性： delete p.name

添加属性： p.age = 18;

~with语句： with(p){

console.log(name)

}

• json字符串

JSON本质上就是一段字符串，能够保存较复杂关系的数据，具有良好的数据保存格式，又极为轻量，加之多种代码平台都支持对字符串的处理，所以我们可以使用JSON字符串进行数据的传入，甚至跨平台传输。

var data = { name:"cy", age:18, girlfriends:[ {name:"lili",age:18,job:"吃"}, {name:"乔碧罗",age:18,job:"faker"} ]         }

查看当前JSON中第二个wife的工作：data["wife"][1]["job"];

• DHTML概述

1. DHTML   Dynamic 动态的 HTML .
2. DHTML认为页面中的每一个元素都可以看做是一个对象。
3. DHTML操作页面中对象，就是在操作页面中的元素。
4. DHTML可以对页面中的对象进行增删改查的操作。

• BOM和DOM
• BOM浏览器对象模型

 window对象，其中包含的方法：

onblur:失去焦点

onfocus:获得焦点

!!!onload:当前浏览器页面装载完成后触发

!!!alert

!!!confirm

!!!prompt

!!!close (//仅限ie浏览器，chrom和firefox需要解决浏览器禁止js关闭非js创建页面的问题)

!!!setInterval

!!!setTimeout

setInterval 和 setTimeout的不同？

location

history

screen

navigator 浏览器信息对象

• DOM文档对象模型

 获取文档对象的方法

getElementById("id") 根据id获取一个元素

getElementsByName("name") 根据name获取一组元素

getElementsByTagName("tagname") 根据元素名称获取一组元素

innerHTML 设置或获取位于对象起始和结束标签内的

HTML

innerText 设置或获取位于对象起始或结束标签内的文本

创建元素：

document.createElement("节点类型"); //为指定标签创建一个元素的实例。

挂载元素：

parentNode.appendChild(childNode);//在父元素最后位置添加子元素

parentNode.insertBefore(newNode,oldNode);//将元素作为父对象的子

节点插入到文档层次结构中。

删除元素：

parentNode.removeChild(childNode)

修改元素：

parentNode.replaceChild(newNode,oldNode);

克隆节点：

div = div.cloneNode(boolean);//如果为false或者 不写(默认)，不复制克隆

节点中的子节点，只复制指定的克隆节点。

//如果为true，复制当前节点及其子节点

调整样式：

通过修改元素的class属性，使元素使用不同的类来启用不同的样式。

div.className = "xxx";

通过元素的style属性来进行样式的修改。

div.style.backgroudColor="#f00";

通过修改元素display属性，调整节点展示方式：

div.style.display = "none"|"block";

扩展：nextSibling 获取对此对象的下一个兄弟对象的引用。