JavaScript基础
2018-04-15 16:38
537 查看
一、基本规则
1.JavaScript 是 Web 的编程语言,所有现代的 HTML 页面都使用 JavaScript,是一种轻量级的编程语言。
2.语句都以分号结束，但分号也可以省略；
3.脚本必须位于HTML的<script></script>标签内，可放在<head>和<body>标签内；但通常都放在<head>或者是页面底部；
4.数据类型有Number,String,Boolean,Array([]),Object,变量用关键字var来进行声明；
5.输出方法：
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.数组的声明有四种方式：
4.object声明（object是拥有属性和方法的数据，是一个容器）
var ob = {name:"x",name2:"y"};
可通过ob.name或者ob["name"]两种方式来获取name的值x;如果name的值是一个方法则需要在使用name(),如果不加括号则会得到方法的语句而不是方法运行的结果；
常用两种创建对象方式：
(对象的创建时可以有构造函数，类似于class的构造函数；)
5.变量提升：JavaScript变量可以先使用后声明，因为函数及变量的声明在运行时都被被提升到函数的最顶部；但只会提升只声明的变量，如果声明同时初始化了则不会被提升；
"use strict";
6.严格模式，在1.8.5中新增，如果使用此模式，则不允许使用未声明的变量；不允许删除变量、变量重名、使用八进制、使用转义字符；只能用在脚本或者一个函数的开头；
7.javaScript中很多时候要避免使用new关键字；
四、数据类型：
（一）Number
既可以表示小数也可以表示整数，所有的数据都是64位的；以0开头为八进制，0x表示十六进制；
属性有:
方法有：
（二）字符串(string)
1.可以使用单引号或者双引号包围；
2.字符串其实是个数组，可用[0]索引来取得每一个位置的元素；
3.可用length属性来计算一个字符串的长度（如：st.length)
4.可使用+号来连接两个字符串为一个；
5.属性：
length
prototype
constructor
6.字符串方法：
（三）数据类型转换（显式）：
String(N) 将数据转换为字符串类型，数字等的方法toString()也是相同的作用；
Number(S) 将数据转换为数字类型；
（如果没有进行类型转换而将两各不同的数据类型进行运算时，javaScript会自动隐式的进行数据类型的转换；）
typeof varName 返回varName的数据类型，不过数组返回的类型是object；
varName.constructor; 返回所有变量的构造函数（如数值的为Number()）
null和undefined值相同，都可以用来清空变量的值，但类型不同，null的类型是object,undefined类型是undefined;
五、结构语句
1.if...else...
格式：
2.switch语句
3.for循环
4.for...in循环(遍历对象属性)
5.while循环
6.do...while循环
所有循环都可以使用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.修饰符：
3.主体规则：
4.RegExp
是一个包含属性和方法的正则表达式对象,实例时应使用new RegExp("pattern","modifiers")；
常用方法：
八、事件
指浏览器或者用户的行为；
1.常见HTML事件：
2.键盘鼠标事件对象:
九、其他
1.元素定位：
document.getElementById(" ");
document.getElementByTagName(" ");
document.getElementByClassName(" ");
document是在全局范围内查找，也可以使用一个变量或者范围；
如果要在查找一个元素之后改变元素的内容，可以使用innerHTML来实现，例:document.getElementById("xx")="示例内容";
也可改变元素的属性，只要在后边加上相应的.attribute = newAttributeValue即可将原属性值改为新的值；
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;
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是在全局范围内查找，也可以使用一个变量或者范围；
如果要在查找一个元素之后改变元素的内容，可以使用innerHTML来实现，例:document.getElementById("xx")="示例内容";
也可改变元素的属性，只要在后边加上相应的.attribute = newAttributeValue即可将原属性值改为新的值；
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;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 