Java大数据之路--JS

  • javascript概述


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

javascript是一门独立的语言。

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

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

 

  • javascript不得不说的历史


JAVA的关系:语法十分相似,但其实毫无关系。

19955月,NetscapeLiveScript

199512月,改名为JavaScript

19968月,微软,Jscript

1997-1999年,ECMAECMAScript,基于已有的JavaScriptJscript,提出了标准的Script

 

  • HTML引入JS

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

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


  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 获取对此对象的下一个兄弟对象的引用。

你可能感兴趣的:(JavaWeb)