JavaScript基础
一、基本规则
1.JavaScript 是 Web 的编程语言,所有现代的 HTML 页面都使用 JavaScript,是一种轻量级的编程语言。
2.语句都以分号结束,但分号也可以省略;
3.脚本必须位于HTML的<script></script>标签内,可放在<head>和<body>标签内;但通常都放在<head>或者是页面底部;
4.数据类型有Number,String,Boolean,Array([]),Object,变量用关键字var来进行声明;
5.输出方法:
document.write(“string") 直接写入HTMLl输出流; window.alert("string") 弹出警告框; console.log("string") 写入到浏览器控制台,主要用于调试程序使用; innerHTML 写入到 HTML 元素,一般需要先定位到某一元素;
6.//注释; /*多行注释*/
7.JavaScript区分大小写,一般命名用驼峰;
8.对于一行代码跨多行可用转义字符\来进行连接;
9.脚本语言是逐行执行的,而不是像C语言一样会先把所有的代码都编译一次再执行;
10.debugger; 此语句相当于断点,脚本会在此处停止执行;
二、运算符
1.赋值:= += -= *= /= %=
2.算术:+ - * / % ++ --
3.比较:== != > < >= <= === !==
4.逻辑:&& || !
5.条件:? :
(同类型比较==和===一样,不同类型比较==会将两种类型转换为同一类型后对值进行比较,===的结果就是不等;
数值与null相加不影响结果,string与null相加结果为null;)
三、声明
1.无论常量还是变量,使用前都应该先用var声明,同时也可以直接赋值。
也可以用new来声明变量类型(例:var a = new Number;)
同时声明多个变量用逗号隔开;
2.令一个变量值等于null,那么这个变量就是undefined;
3.数组的声明有四种方式:
var ar = new Array('a','b'); var ar = ['a','b']; var ar = new Array(); var ar = [ ];
4.object声明(object是拥有属性和方法的数据,是一个容器)
var ob = {name:"x",name2:"y"};
可通过ob.name或者ob["name"]两种方式来获取name的值x;如果name的值是一个方法则需要在使用name(),如果不加括号则会得到方法的语句而不是方法运行的结果;
常用两种创建对象方式:
1)function ob(){ var obj = new Object(); obj.name = "x"; obj.name2 = "y"; return obj; }
2)function ob(){ this.name = "x"; this.name2 = "y"; }
(对象的创建时可以有构造函数,类似于class的构造函数;)
5.变量提升:JavaScript变量可以先使用后声明,因为函数及变量的声明在运行时都被被提升到函数的最顶部;但只会提升只声明的变量,如果声明同时初始化了则不会被提升;
"use strict";
6.严格模式,在1.8.5中新增,如果使用此模式,则不允许使用未声明的变量;不允许删除变量、变量重名、使用八进制、使用转义字符;只能用在脚本或者一个函数的开头;
7.javaScript中很多时候要避免使用new关键字;
四、数据类型:
(一)Number
既可以表示小数也可以表示整数,所有的数据都是64位的;以0开头为八进制,0x表示十六进制;
属性有:
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
NaN
prototype
constructor
方法有:
toExponential()
toFixed()
toPrecision()
toString()
valueOf()
(二)字符串(string)
1.可以使用单引号或者双引号包围;
2.字符串其实是个数组,可用[0]索引来取得每一个位置的元素;
3.可用length属性来计算一个字符串的长度(如:st.length)
4.可使用+号来连接两个字符串为一个;
5.属性:
length
prototype
constructor
6.字符串方法:
charAt(int) 返回指定索引位置字符; charCodeAt(int) 返回指定索引位置字符的Unicode值; concat(str1,str2,..) 连接两个或多个字符串,也可使用+号; fromCharCode() 将Unicode编码转换为字符; indexOf() 返回指定字符串值在字符串中首次出现的位置; lastIndexOf() 指定字符串值在字符串中最后一次出现的位置; match(reg) 查找到一个或多个正则表达式的匹配; search() 查找一个字符串或正则表达式,找到则返回第一个字符的位置索引,未找到则返回-1; replace(str1,str2) 用str2替换原字符串中的str1; slice(startInt,endInt) 返回一个字符串指定索引之间的字符串,包含startInt位置字符,不包含endInt位置字符,endInt可选,如不给定则默认到字符串结尾; splite() 把字符串按关键字分割,分割内容不包含关键字; substr(startInt,length) 返回从指定位置开始,到指定长度的字符串,如果没给定lengh,则默认到字符串结尾; substring(from,to) 同slice(); toLowerCase() 转换为小写; toUpperCase() 转换为大写; trim() 去除字符串两边空白; valueOf() 返回某个字符串对象变量的值; anchor() 创建html锚; big() 大号字体; small() 小号字体; blink() 闪烁字体; bold() 粗体; fixed() 以打字机文本显示; fontcolor() 字体颜色; fontsize() 字体大小; italics() 斜体; link() 链接样式; strike() 删除线; sub() 以下标显示; sup() 以上标显示;
(三)数据类型转换(显式)
String(N) 将数据转换为字符串类型,数字等的方法toString()也是相同的作用;
Number(S) 将数据转换为数字类型;
(如果没有进行类型转换而将两各不同的数据类型进行运算时,javaScript会自动隐式的进行数据类型的转换;)
typeof varName 返回varName的数据类型,不过数组返回的类型是object;
varName.constructor; 返回所有变量的构造函数(如数值的为Number())
null和undefined值相同,都可以用来清空变量的值,但类型不同,null的类型是object,undefined类型是undefined;
五、结构语句
1.if...else...
格式:
if(condition){ section; } else if(condition){ section; } else{ section; }
(除了if的结构都是可选的;)
2.switch语句
switch(n) { case 0: break; case 1: break; ... default: }
3.for循环
for(var i=0;i<n;i++) { suitcase; }
4.for...in循环(遍历对象属性)
for(x in objectX) { suitcase; }
5.while循环
while(condition) { suitcase; }
6.do...while循环
do { suitcase; }while(condition);
所有循环都可以使用continue来跳出当前循环,使用break来跳出整个循环.
六、函数
1.格式:
function functionName(parameters){
setion;
}
(参数不需要类型;
函数可以有返回值,返回值使用return;)
2.作用域:
JavaScript分全局作用域和局部作用域,函数内定义的变量为局部变量,函数外定义的为全局变量,全局变量是window对象,所有变量名都可以使用window.varName;
如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
3.匿名函数:可以在function后边省略掉函数名;在定义时就已调用;
4.自调函数:即会自动调用的函数,相当于函数定义后不需要其他调用就会自己运行一次。函数体需被包围在()内,后边再接一个()来表明这是一个自调函数;
格式示例:(function(){var x = "hello!";})();
5.如果在调用函数时未给定需要的参数,那么这个参数在使用时就是undefined类型数据;可用x = x || 0 来设定未给参数值的情况,或使用x === undefined来进行判断;
函数有一内置arguments对象,是一个包含所有参数的数组;
6.异常处理:
抓取:try{}catch{}
抛出:throw exception (exception可以是string,number,boolean,object)
七、正则表达式
1.格式:/pattern/modifiers
2.修饰符:
i 不区分大小写;
g 全局匹配,即匹配所有的项而非只是第一项;
m 多行匹配;
3.主体规则:
[] 范围 [^] 匹配不是范围内的结果; (x|y) 匹配x,y; . 匹配除换行符和结束符外的任何字符; \w 匹配字母; \W 匹配非字母; \d 匹配数字; \D 匹配非数字; \s 匹配空白字符; \S 匹配非空白字符; \b 匹配单词边界; \B 匹配非边界; \0 匹配null字符; \n 匹配换行符; \f 匹配换页符; \r 匹配回车符; \t 匹配制表符; \v 匹配垂直制表符; \xxx 匹配以八进制数xxx规定的字符; \xdd 匹配以十六进制数dd规定的字符; \uxxxx 匹配以十六进制数xxxx规定的Unicode字符; {X,Y} 匹配最少X最多Y个的结果,可省略Y表示最少X次,可省略逗号和Y表示X次; * 匹配0至多个; + 匹配1至多个; ? 匹配0至1个; ^ 开头; $ 结尾; ?= 匹配其后为指定内容的字符串; ?! 匹配其后不为指定内容的字符串;
4.RegExp
是一个包含属性和方法的正则表达式对象,实例时应使用new RegExp("pattern","modifiers");
常用方法:
stringName.match(reg) 从字符串中查找匹配字符,返回匹配到的字符串;
stringName.search(reg) 从字符串中查找匹配字符,返回匹配字符的起始位置;
stringName.replace(reg,string) 从字符串中替换匹配字符;
reg.test(string) 一个正则表达式在字符串中是否有匹配结果,如果有则返回true;
reg.exec(string) 一个正则表达式在字符串中是否有匹配结果,如果有则返回匹配结果数组;
reg.compile() 编译正则表达式;
八、事件
指浏览器或者用户的行为;
1.常见HTML事件:
onchange HTML元素改变;
onload 浏览器加载页面完成时;
onclick 用户点击时;
onmouseover 鼠标在一个HTML元素上时;
onmouseout 鼠标在一个HTML元素上移开时;
onkeydown 按下键盘时;
(更多可见HTML文档的事件)
2.键盘鼠标事件对象:
altKey 返回事件被触发时,alt是否被按下;
ctrlKey 返回ctrl键是否被按下;
shiftKey 返回shift键是否被按下;
metaKey 返回meta键是否被按下;
button 返回哪个鼠标按钮被点击;
clientX 返回指针的水平位置;
clientY 返回指针的垂直位置;
location 返回按键在设备上的位置;
key 返回按下按键的标识符;
charCode 返回onkeypress事件触发键值字母代码;
keyCode 返回onkeypress事件触发的键值字符代码;
which 返回onkeypress事件触发的键值字符代码;
relatedTarget 返回与事件的目标节点相关的节点;
screenX 返回某个事件被触发时鼠标指针的水平坐标;
screenY 返回某个事件被触发时鼠标指针的垂直坐标;
九、其他
1.元素定位:
document.getElementById(" ");
document.getElementByTagName(" ");
document.getElementByClassName(" ");
document.querySelector(" "); 通过css选择器查找一个元素
document.querySelectorAll(" "); 通过css选择器查找所有元素
document是在全局范围内查找,也可以使用一个变量或者范围;
如果要在查找一个元素之后改变元素的内容,可以使用innerHTML来实现,例:document.getElementById("xx")="示例内容";
也可改变元素的属性,只要在后边加上相应的.attribute = newAttributeValue即可将原属性值改为新的值;或者使用.setAttribute("属性名","属性值"),.removeAttribute("属性名");
document.getElementById(id).style.property=新样式 改变元素样式;
2.监听:
element.addEventListener(event, function, useCapture);
用于向指定元素添加事件句柄,添加的事件句柄不会覆盖已存在的事件句柄,你可以向一个元素添加多个事件句柄。可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。
其中的event不要使用on前缀 ;
element.removeEventListener();方法可用来移除由addEventListener()方法添加的事件句柄;
3.创建新的元素:
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node); //追加这个元素的文本节点;
element.appendChild(para); //在已存在元素后添加新元素;
para.removeChild(child); //移除para元素的子元素child;
4、eval() 将字符串作为脚本代码来执行。