-
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>
- js语句是自上而下的解释执行。每次都会讲一句js语句放入浏览器中内置的js解析器进行解释执行。
- js语句可以不添加分号,如果不添加则会在解释过程中,由js解析器自动添加。(推荐手动书写,避免不必要的错误。)
- 在引入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;
//局部变量 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函数
- js函数是一段可执行js语句的合集。可以通过调用函数名加上一对小括号的形式来执行js函数。js函数本质上是一段字符串。
- 在js中,函数调用时,可以传入比参数列表更少的数据,未被传入值的参数,将会以undefined为值来使用。
- 在js中,函数调用时,可以传入比参数列表更多的数据,多余的数据未被抛弃,在函数中内置的arguments属性会将用户传入的参数全部放在一个数组中。可以通过循环遍历的方式来获取。
- 函数中可以将函数名称当做参数来使用,传入方法的参数列表。在函数希望使用的使用只需要在函数名后添加一对小括号即可。总结:函数传递,可以通过变量(函数名)实现。函数调用就是在函数名后添加括号。
- Function类型是js中的内置的一个对象类型。
- 函数的定义方式
- 普通函数定义方式
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数组
- 在js中数组本质是一段可执行的字符串。js数组是由一对中括号,其中包含多个元素,元素之间用逗号隔开组成的数据。
- js数组特点:存储数据的类型是任意的.存储数据的长度是任意.
- 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对象 --自定义对象
- 在js中对象的本质是一段可执行的字符串。是由一对花括号,其中包含多个键值对,键值之间使用冒号(:)隔开,键值对之间使用逗号隔开,这些内容组成了js对象。
- js中没有类的概念,无法通过类创建对象。可以通过构造函数的形式直接创建一个类的构造函数,用它产生对象。
- 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概述
- DHTML Dynamic 动态的 HTML .
- DHTML认为页面中的每一个元素都可以看做是一个对象。
- DHTML操作页面中对象,就是在操作页面中的元素。
- 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 获取对此对象的下一个兄弟对象的引用。