前端基础——JavaScript入门教程

一、什么是JavaScript

JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，是一种动态、弱类型、基于原型的语言，内置支持类。

二、JavaScript常用场景

1、动态操作页面元素
2、处理页面元素触发的事件
3、检测或者控制浏览器行为
4、表单验证
5、异步交互（ajax)
6、前端页面框架开发等

三、JavaScript数据类型

基本类型

数值(number)
字符串(string)
布尔值(boolean)
undefined
null

对象类型

对象(object)
数组(array)
函数(function)

四、JavaScript数组

创建数组的方式

var arr  = new Array();
var arr2 = new Array(10);
var arr3 = [“hello”,123,true,console.log];

数组常用方法

join()	将数组中的元素组合成字符串
reverse()	颠倒数组中元素的顺序
sort()	对数组元素进行排序
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
pop()	删除并返回数组的最后一个元素
toString()	把数组转换为字符串，并返回结果。

五、JavaScript内置函数

eval():用于计算字符串表达式的值 
isNaN():用于验证参数是否为 NaN（非数字）
parseInt():将字符串数值数据转换为数值类型整数
parseFloat():将字符串数值数据转换为浮点数。

六、JavaScript内置对象

String 、Date 、Number、Math、Array、JSON

String对象的常用方法

charAt()		返回在指定位置的字符
concat()		连接字符串。
indexOf()		检索字符串。
lastIndexOf()	从后向前搜索字符串。
match()		    找到一个或多个正则表达式的匹配。
replace()		替换与正则表达式匹配的子串。
search()		检索与正则表达式相匹配的值。
split()			把字符串分割为字符串数组。
substr()		从起始索引号提取字符串中指定数目的字符。
toUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。

Date对象的常用方法

Date()			返回当日的日期和时间。
getDate()		从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()		从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()		从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()		返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
setDate()		设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setMonth()		设置 Date 对象中月份 (0 ~ 11)。

Number对象常用方法

isFinite()   	检测是否是有限的数字,即不是Infinity。如果参数不是数字直接返回false。
isNaN()     	判断参数是不是NaN。
parseInt()  	将字符串转为整数【有容错能力】
parseFloat()	将字符串转为浮点数【有容错能力】

Math对象常用方法

Math.random()   生成一个0~1之间的随机小数
Math.floor(num) 将num向下取整，取小于等于num的最大整数
Math.ceil(num)  将num向上取整数，取大于等于num的最小整数
Math.round(num) 将num四舍五入取整数
Math.pow(x, y)  求 x 的 y 次方
Math.sqrt(x)    求x的开方
Math.trunc()    用于去除一个数的小数部分，返回整数部分。对于非数值它会内部调用Number方法先将其转换为数值

JSON对象常用方法

JSON.stringify()	将JS值转换为JSON文本字符串
JSON.parse()		将JSON文本字符串解析为JS值

七、自定义对象方式

使用{}创建对象方式

var obj = {
	name : “tom",
	age : 26,
	birthday : new Date(1984, 4, 5),
	getName:function(){return this.name}	
};

new构造函数创建

obj = new Object();
obj.name = “tom";
obj.age = 26;
obj.getName = function(){return this.name};

自定义方式

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.getAge = function(){return this.age};
}

八、JavaScript常见事件

onclick		鼠标单击
onchange 	文本内容或下拉菜单中的选项发生改变
onfocus 	获得焦点，表示文本框等获得鼠标光标。
onblur 		失去焦点，表示文本框等失去鼠标光标。
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmouseout 	鼠标移出，即离开图片等所在的区域
onmousemove	鼠标移动，表示在<DIV>层等上方移动
onload 		网页文档加载事件
onsubmit 	表单提交事件
onmousedown 鼠标按下
onmouseup 	鼠标弹起

九、DOM对象常用方法

getElementById()：根据id属性值查找元素返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null。该方法只能用于 document对象。
getElementsByTagName()：查找给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
getElementsByName():name属性查找元素，用法同getElementsByTagName()方法使用。
getElementsByClassName():通过class属性查找元素，用法同上。
alinkColor	设置或检索文档中所有活动链接的颜色 
bgColor		设置或检索 Document 对象的背景色 
body		指定文档正文的开始和结束
linkColor	设置或检索文档链接的颜色
location	包含关于当前 URL 的信息 
title		包含文档的标题
url			设置或检索当前文档的 URL
vlinkColor	设置或检索用户访问过的链接的颜色 
clear ( )	清除当前文档 
close ( )	关闭输出流并强制显示发送的数据
write ("text")	将文本写入文档

十、Window对象常用方法及事件

document	表示给定浏览器窗口中的 HTML 文档。 
history 	包含有关客户访问过的URL的信息。
location	包含有关当前 URL 的信息。 
name		设置或检索窗口或框架的名称。 
status 		设置或检索窗口底部的状态栏中的消息。 
screen		包含有关客户端的屏幕和显示性能的信息。 
alert (“m提示信息")	显示包含消息的对话框。 
confirm（“提示信息”）	显示一个确认对话框，包含一个确定取消按钮
Prompt（”提示信息“）	弹出提示信息框
open ("url","name")	打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( )			关闭当前窗口
setTimeout（”函数”,毫秒数） 	设置定时器：经过指定毫秒值后执行某个函数 

十一、History 对象方法

Back ( ) 	方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)		代表前进1页，等价于forward( )方法；
go(-1) 		代表后退1页，等价于back( )方法；
back()		加载 History 列表中的上一个 URL 
forward()	加载 History 列表中的下一个 URL 
go("url" or number)	加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。 

十二、Location对象方法

assign("url")	加载 URL 指定的新的 HTML 文档。  
reload()		重新加载当前页
replace("url") 	通过加载 URL 指定的文档来替换当前文档
host			设置或检索位置或 URL 的主机名和端口号
hostname		设置或检索位置或 URL 的主机名部分
href			设置或检索完整的 URL 字符串

十三、文本框对象

事件

onBlur		文本框失去焦点
onChange	文本框的值被修改
onFocus		光标进入文本框中

方法

focus( )	获得焦点，即获得鼠标光标
select( )	选中文本内容，突出显示输入区域

属性

readonly 	只读，文本框中的内容不能修改 

十四、复选框对象

事件

onBlur		复选框失去焦点
onFocus 	复选框获得焦点 
onClick 	复选框被选定或取消选定

属性

checked		复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中
value		设置或获取复选框的值

十五、单选框对象

事件

onBlur		单选按钮失去焦点
onFocus 	单选按钮获得焦点 
onClick 	单选按钮被选定或取消选定

属性

checked		单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中
value		设置或获取单选按钮的值

十六、下拉列表

事件

onBlur		下拉列表框失去焦点
onFocus		下拉列表框获得焦点
onChange	当选项发生改变时产生

属性

value			下拉列表框中，被选选项的值
options			所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推
selectedIndex	返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推

十七、表单验证

< SCRIPT LANGUAGE = "JavaScript" >
function validate() {
    var f = document.reg_form;
    if (f.uname.value == "") {
        alert("请输入姓名");
        f.uname.focus();
        return false;
    }
    if (f.gender[0].checked == false && f.gender[1].checked == false) {
        alert("请指定性别");
        f.gender[0].focus();
        return false;
    }
    if ((f.password.value.length < 6) || (f.password.value == "")) {
        alert("请输入至少 6 个字符的密码！");
        f.password.focus();
        return false;
    }
    q = f.email.value.indexOf("@");
    if (q == -1) {
        alert("请输入有效的电子邮件地址");
        f.email.focus();
        return false;
    }
    if (f.age.value < 1 || f.age.value > 99 || isNaN(f.age.value)) {
        alert("请输入有效的年龄！");
        f.age.focus();
        return false;
    }
} 
< /SCRIPT>/