JavaScript学习指南
1.1 JavaScript基础概念：
JavaScript (ECMAScript) ：JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义，但是JavaScript并不是这么一点含义，它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
1.1.1 ECMAScript
组成部分：语法，类型，语句，关键字，保留字，操作符，对象。
1.1.2 DOM
文档对象模型（DOM ， Document Object Model）是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面
映射为一个多层节点结构，开发人员借助DOM Api对节点进行操作。
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树:
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
1.1.3 BOM
浏览器对象模型（Browser Object Model）使用BOM控制浏览器显示页面意外的部分。
1.2 在HTML中使用JavaScript方式
1.2.1 javaScript脚本加载的位置
1 通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间
2 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名
3 原则上，放在
之间。但视情况可以放在网页的任何部分4 一个页面可以有几个
1.3.10 函数
（1）函数语法
function functionname()
{
这里是要执行的代码
}
（2）带参数的函数
function myFunction(var1,var2)
{
这里是要执行的代码
}
（3）带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
若仅仅希望退出函数时 ，也可使用 return 语句
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
1.3.11 内置函数
- Date：日期函数
属性(1): constructor 所修立对象的函数参考 prototype能够为对象加进的属性和方法 办法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包括)以后为4位 getFullYear()返回完全的4位年份数 getMonth()返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) getSeconds() 返回秒数(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依据国际时间来得到如今是礼拜几(0-6) getUTCFullYear() 根据邦际时间来失掉完全的年份 getUTCMonth()依据国际时间来得到月份(0-11) getUTCDate() 依据国际时间来失掉日(1-31) getUTCHours() 依据国际时间来失掉小时(0-23) getUTCMinutes() 根据邦际光阴来往归分钟(0-59) getUTCSeconds() 依据国际时间来返回秒(0-59) getUTCMilliseconds()依据国际时间来返回毫秒(0-999) getTime() 前往自1970年1月1号0:0:0到如今一同花来的毫秒数 getTimezoneoffset()往归时区偏偏差值,便格林威乱均匀时光(GMT)取运转足原的盘算机所处时区设置之间相差的分钟数) parse(dateString) 返回正在Date字符串中自从1970年1月1日00:00:00以来的毫秒数 setYear(yearInt)设置年份.2位数或4位数 setFullYear(yearInt)设置年份.4位数 setMonth(monthInt)设放月份(0-11) setDate(dateInt) 设置日(1-31) setHours(hourInt) 设置小时数(0-23) setMinutes(minInt) 设置分钟数(0-59) setSeconds(secInt) 设放秒数(0-59) setMilliseconds(milliInt) 设放毫秒(0-999) setUTCFullYear(yearInt) 依据国际时间来设置年份 setUTCMonth(monthInt)依据国际时间来设置月(0-11) setUTCDate(dateInt) 依据国际时间来设置日(1-31) setUTCHours(hourInt) 依据国际时间来设置小时 setUTCMinutes(minInt)依据国际时间来设置分钟 setUTCSeconds(secInt)依据国际时间来设置秒 setUTCMilliseconds(milliInt)根据邦际时间来设置毫秒 setTime(timeInt)设置自1970年1月1日开端的时间.毫秒数 toGMTString()依据格林威乱时光将Date对于象的日期(一个数值)改变成一个GMT光阴字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString() 依据通用时间将一个Date对象的日期转换为一个字符串 toLocaleString()把Date对象的日期(一个数值)改变成一个字符串,使用所在盘算机上配置使用的特定日期格局 toSource()显示对象的源代码 toString()将日期对象转换为字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往归自格林威乱尺度光阴到指订时光的差距,双位为毫秒 valueOf()返回日期对象的本初值
2.Math：数学函数
constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 E欧推常质,天然对数的顶(约等于2.718) LN2 2的天然对数(约即是0.693) LN10 10的天然对数(约等于2.302) LOG2E 以2为顶的e的对数.(约等于1.442) LOG10E 以10为顶的e的对数(约等于0.434) PI ∏的值(约即是3.14159) SQRT1_2 1/2(0.5)的平方根(便l除以2的平方根,约即是o.707) SQRT2 2的平方根(约等于1.414) 方法: abs(x) 返回数字的相对值 acos(x)返回数字的反余弦值 asin(x)返回数字的反正弦值 atan(x)返回位于-PI/2 和 PI/2 的反正切值 atan2(y,x)前往（x,y）位于 -PI 到 PI 之间的角度 ceil(x)返回 x 四舍五入后的最大整数 cos(x)前往一个数字的余弦值 exp(x)返回 E^x 值 floor(x)返回 x 四舍五入后的最小整数 log(x)返回底数为E的自然对数 max(x,y)返回 x 和 y 之间较大的数 min(x,y)返回 x 和 y 之间较小的数 pow(x,y)返回 y^x 的值 random()返回位于 0 到 1 之间的随机函数 round(x)四舍五进后与整 sin(x)返回数字的正弦值 sqrt(x)返回数字的平方根 tan(x)返回一个角度的正切值 toSource()显示对象的流代码 valueOf()返回数教对象的本初值3.Number 属性: MAX_VALUE The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN_VALUE The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE_INFINITY A value that is less than MIN_VALUE. POSOTIVE_INFINITY A value that is greater than MAX_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object valueOf() 返回数教对象的本初值4.Boolean属性: constructor 所树立对象的函数参考 prototype可以为对象参加的属性和方式 法子: toSource() 显示对象的流代码 toString()将布我值转换为字符串,并且返回成果 valueOf()返回布我对象的原始值
- String ：字符函数
属性: constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 length返回字符串的字符长度 法子(20): anchor("name")用来把字符串转换为HTML锚面标志内() big() 把字符串中的文本变成大字体() blink() 把字符串中的文本变成闪耀字体(
4.Array ：数组函数
属性: constructor 所修立对象的函数参考 prototype能够为对象加入的属性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length获取数组元素的个数,即最大下标加1办法(13):concat(array1,arrayn)将两个或两个以上的数组值衔接止来,合并后返回成果 join(string)将数组中元素合并为字符串,十月妈咪,string为分隔符.如省详参数则直交合并,不再分隔 pop()移除数组中的最后一个元素并返回当元素 push(value)在数组的终尾加上一个或多个元素,并且返回新的数组长度值 reverse()倒置数组中元素的次序,反背排列 shift()移除数组中的第一个元素并返回当元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]])返从一个数组中移除一个或少个元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序号的情形下,依照元素的字女次序排列,假如不是字符串类型则转换成字符串再排序,返回排序后的数组 splice()为数组删除并加加新的元素 toSource()显示对象的源代码 toString()将数组一切元素返回一个字符串,其间用逗号分隔 unshift(value)为数组的开端部门加上一个或者少个元荤,并且返回当数组的新长度 valueOf()返回数组对象的原始值
5.齐局
属性: Infinity 指定一个正负无限大的数值 NaN指定一个 “非数字” 值 undefined指订一个已被赋值的变质法子:decodeURI() 为加稀的URI入止解码 decodeURIComponent()为加稀的URI组件解码 encodeURI()将字符串加密为URI encodeURIComponent() 将字符串加稀为URI组件 escape(string)加密一个字符串 ()使用escape()对一个字符串入止解码 eval_r(string)断定一个字符串并将其以足本代码的情势施行 isFinite(number)检测一个值能否为一个有限数字,返回True或False isNaN(string) 检测一个值能否没有是一个有限数字 Number()将一个对象的值转换为一个数字 parseFloat(string)将一个字符串解析为一个浮面数字 parseInt(string)将一个字符串解析为一个整数,没有是四舍五进操做,而是切尾 String(object)将一个对象值转换为一个字符串 number(object)
6.事情
属性: a.窗心事件,只在body和frameset元素中才有效 onload页里或者图片加载完成时 onunload用户分开页里时 b.表双元素事情,正在表双元素中才有效 onchange框内容转变时 onsubmit点打降接按钮时 onreset沉新点击鼠标按键时 onselect白原被挑选时 onblur元素失来焦点时 onfocus该元素获与焦面时 c.键盘事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆无效 onkeydown按下键盘按键时 onkeypress按下或按住键盘按键时 onkeyup搁启键盘按键时 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元荤里皆无效 onclick鼠标点打一个对象时 ondblclick鼠标双打一个对象时 onmousedown鼠本被按下时 onmousemove鼠标被挪动时 onmouseout鼠本分开元荤时 onmouseover鼠标经由元素时 onmouseup开释鼠本按键时
1.4 JavaScript常用技巧函数：
1.4.1 HTML的标签（节点）操作
document.write(""); //输出的
document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。
如：var id = document.getElementById("hid"); //获取id值为hid的标签对象
document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象
1.4.2 HTML标签对象的操作：
标签对象.innerHTML="内容"；//在标签对象内放置指定内容
标签对象.style.css属性名="值" //改变标签对象的样式。
示例：id.style.color="red";
注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。
如：font-size（css）---> fontSize(JS属性)
标签对象.value；
//获取标签对象的value值
标签对象.value=”值“；//设置标签对象的value值
1.4.3 输出内容（document.write）
document.write()直接在网页中输出内容。
第一种：输出内容用“”括起，直接输出“”号内的内容。
document.write("I love JavaScript!");
第二种：通过变量，输出内容
var mystr = "hello world";
document.write(mysrt);//直接写变量名，输出变量存储的内容
第三种：输出多项内容，内容之间用+号连接。
var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接
第四种:输出HTML标签，并起作用，标签使用“”括起来。
var mystr="hello";
document.write(mystr+"
");//输出hello后，输出一个换行符
document.write("JavaScript");
1.4.4 警告（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
语法：alert(字符串或变量);
var mynum = 30;
alert("hello!");
alert(mynum);
结果：按顺序弹出消息框（alert弹出消息对话框包含一个确定按钮）
注意:
1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似
1.4.5 确认选择（confirm 消息对话框）
除了向用户提供信息，我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法：confirm(str);
参数说明：str:在消息对话框中要显示的文本 返回值：Boolean值
返回值：
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
注: 通过返回值可以判断用户点击了什么按钮
1.4.6 提问（prompt 消息对话框）
有时候，不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法：
prompt(str1,str2);
参数说明：
str1:要显示在消息对话框中的文本，不可修改
str2:文本框中的内容，可以修改
返回值：
1、点击确定按钮，文本框中的内容将作为函数返回值
2、点击取消按钮，将返回null
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("请输入你的成绩","90");
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不错吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力了!");
};
} ;
1.4.7 打开新窗口（window.open）
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2.窗口名称：可选,该字符串是一个由逗号分隔的特征列表，声明了被打开窗口的名称。可以是"_top"、"_blank"、"_selft"、"_parent"等。
_blank 在新窗口显示目标网页
_selft 在当前窗口显示目标网页
_parent 框架网页中当前整个窗口位置显示目标网页
_top 框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表：
top Number 窗口顶部离开屏幕顶部的像素数
left Number 窗口左端离开屏幕左端的像素数
width Number 窗口的宽度
height Number 窗口的高度
menubar yes,no 窗口有没有菜单
toolbar yes,no 窗口有没有工具条
scrollbars yes,no 窗口有没有滚动条
status yes,no 窗口有没有状态栏
1.4.9 innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容。
语法：
Object.innerHTML
Object是获取的元素对象，如通过document.getElementById("ID")获取元素。
javascript
1.4.10 改变HTML样式
语法：
Object.style.property=new style;
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素
I love JavaScript
1.4.11 显示和隐藏（display属性）
语法：
Object.style.display = value
value值：
none 此元素不会被显示（及隐藏）
block 此元素将显示为块级元素（即显示）
mychar.style.display = "block"
1.4.12 控制类名（className属性）
className属性设置或返回元素的class属性。
语法：
object.className = classname
作用：
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观
p2.className = "two";
以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
1.5 JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证
被JavaScript 验证的这些典型的表单数据有：
· 用户是否已填写表单中的必填项目？
· 用户输入的邮件地址是否合法？
· 用户是否已输入合法的日期？
· 用户是否在数据域 (numeric field) 中输入了文本？
1.5.1 利用onsubmit表单认证
如下为一个javacript的一个重要功能应用，利用onsubmit表单认证
1.5.2 必填（或必选）项目
1.5.3 E-mail验证
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点
说明：
with(field){};设定作用域
focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。
1.6 JavaScript事件处理：
1.6.1 使用一个匿名或回调函数添加事件
有三种方法加事件
第一种：
格式：
*第二种：
第三种：(火狐不兼容)
1.6.2 事件对象：
属性：
1\. srcElement
2\. keyCode 键盘值
1.6.3 事件 event window.event
1\. srcElement 代表事件源对象
2\. keyCode 事件发生时的键盘码 keypress , keydown keyup
3\. clientX, clientY 坐标位置
4\. screenX, screenY
5\. returnValue
6\. cancelBubble;
//为页面添加鼠标右点击事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐浏览器兼容
var event=ent || window.event;
//获取事件坐标位置
var x=event.clientX;
var y=event.clientY;
...
}
/*********************对象添加事件*******************/
function addEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.addEventListener(type,fun); //FF
return true;
}else if(obj.attachEvent){
return obj.attachEvent("on"+type,fun); //IE
}else{
return false;
};
};
/*********************对象删除事件*******************/
function delEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.removeEventListener(type,fun);
return true;
}else if(obj.attachEvent){
obj.detachEvent("on"+type,fun);
return true;
}else{
return false;
};
};
document.getElementById("one").offsetHeight; //获取one对应对象的高度
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
1.7 BOM
1.7.1 window对象
常用的属性：
*document ：对 Document 对象的只读引用
*history
：对 History 对象的只读引用。
*location：用于窗口或框架的 Location 对象
Navigator： 对 Navigator 对象的只读引用
*parent： 返回父窗口。
length: 设置或返回窗口中的框架数量。
Screen: 对 Screen 对象的只读引用
status: 设置窗口状态栏的文本。
top: 返回最顶层的先辈窗口。
常用方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
scrollTo() 把内容滚动到指定的坐标。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
1.7.2 Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
常用属性：
with(document) {
write ("你的浏览器信息：");
write ("- 代码："+navigator.appCodeName+"
");
write ("- 名称："+navigator.appName+"
");
write ("- 版本："+navigator.appVersion+"
");
write ("- 语言："+navigator.language+"
");
write ("- 编译平台："+navigator.platform+"
");
write ("- 用户表头："+navigator.userAgent+"
");
write ("
");
}
1.7.3 Screen 对象
Screen 对象包含有关客户端显示屏幕的信息
常用属性：
document.write( "屏幕宽度："+screen.width+"px
" );
document.write( "屏幕高度："+screen.height+"px
" );
document.write( "屏幕可用宽度："+screen.availWidth+"px
" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
参考了解其他属性信息获取方式
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
1.7.4 History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
1.7.5 Location 对象
Location 对象包含有关当前 URL 的信息。
//获取页面中第二form表单中，一个username输入框的值（7种方式）
//alert(document.forms[1].username.value);
alert(document.myform.username.value);
//alert(document.forms.myform.username.value);
//alert(document.forms.item(1).username.value);
//alert(document.forms['myform'].username.value);
//alert(document['myform'].username.value);
//alert(document.forms.item('myform').username.value); //火狐不兼容
1.8 DOM
1.8.1 基本概念
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM 被分为不同的部分：
1.Core DOM
定义了一套标准的针对任何结构化文档的对象
2.XML DOM
定义了一套标准的针对 XML 文档的对象
3.HTML DOM
定义了一套标准的针对 HTML 文档的对象。
节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
节点彼此间都存在关系。
除文档节点之外的每个节点都有父节点。
大部分元素节点都有子节点。
当节点分享同一个父节点时，它们就是同辈（同级节点）。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
1.8.2 HTML DOM 对象参考
Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素
常用集合属性：forms
Anchor : 代表 元素
Area : 代表图像映射中的 元素
Base : 代表