javascript 基础教程[温故而知新一]

子曰：“温故而知新，可以为师矣。”孔子说：“温习旧知识从而得知新的理解与体会，凭借这一点就可以成为老师了。“ 尤其是咱们搞程序的人，不管是不是全栈工程师，都是集十八般武艺于一身。不过有时候有些知识如果有很久没用了的话，就会忘记，甚至是忘的你一点都想不起来，尤其是一些基础的东西。所以我才打算写个"温故而知新"的系列博文出来，一来是这些基础的东西我比较健忘，以后方便自己翻阅；二来是希望可以帮助到一些刚入门的朋友。这个系列记录的所有知识点都是最最最(重要的事情说三遍)基础的知识。大部分都是我学习的时候所积累的笔记。

温故而知新系列都是一些基础知识，大神可以直接跳过。

v写在前面

如果十八般武艺都融会贯通，如果什么兵器你都耍得有模有样，那么这篇博文你大可以跳过了。只是在忘记的时候，可以拿出来温习温习。

v基本概念

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

简单点一句话概括： javascript是基于对象、驱动事件、具有安全性、弱类型的脚本语言。

1.声明变量关键字： var

2.变量的名称：

由数字、字母、下划线、$组成
数字不能开头
严格区分大小写
不能以关键字命名

3.数据类型：

基本数据类型
- 数值类型(整形和浮点型)
- 字符串类型
- 布尔类型
引用(复合)数据类型
- 函数：function()
- 对象：object()
特殊数据类型 undefined

4.检测数据类型的方法： typeof()

5.运算符优先级： ()>!>算术>关系>&&>||>条件>赋值

6.类型转换方式：

parseInt() 是将字符串类型转换为整型
parseFloat() 是将字符串类型转换为浮点型
NaN 不是一个数字

v函数介绍

1.函数的定义： 函数(又称为方法)用于对一段为了达到某种目的的代码进行归类。

2.函数的生命：

function 函数名([参数1],[参数2],...)

{

//代码模块

}

3.定时器： setInterval("函数名",时间毫秒) ps:这个详细部分在下面

4.系统函数：

日期函数

getYear():可返回表示年份的两位或四位的数字

<script type="text/javascript">

var d = new Date()

document.write(d.getYear())

</script>

getMonth():可返回表示月份的数字

<script type="text/javascript">

var d=new Date()

document.write(d.getMonth())

// 月份是从0开始的

</script>

getDate():可返回月份的某一天

<script type="text/javascript">

var d = new Date()

document.write(d.getDate())

</script>

toLocaleString():可根据本地时间把 Date 对象转换为字符串，并返回结果

<script type="text/javascript">

var d = new Date()

document.write(d.toLocaleString())

</script>

Math对象

abs():可返回数的绝对值

<script type="text/javascript">

document.write(Math.abs(7.25) + "<br />")//7.5

document.write(Math.abs(-7.25) + "<br />")//7.25

document.write(Math.abs(7.25-10))//2.75

</script>

round():可把一个数字舍入为最接近的整数

<script type="text/javascript">

document.write(Math.round(0.60) + "<br />")//

document.write(Math.round(0.50) + "<br />")//

document.write(Math.round(0.49) + "<br />")//

document.write(Math.round(-4.40) + "<br />")//-4

document.write(Math.round(-4.60))//-5

</script>

random():可返回介于 0 ~ 1 之间的一个随机数

<script type="text/javascript">

document.write(Math.random())//输出随机小数，如：0.5031703060958534

</script>

floor():可对一个数进行下舍入

<script type="text/javascript">

document.write(Math.floor(0.60) + "<br />")//

document.write(Math.floor(0.40) + "<br />")//

document.write(Math.floor(5) + "<br />")//

document.write(Math.floor(5.1) + "<br />")//

document.write(Math.floor(-5.1) + "<br />")//-6

document.write(Math.floor(-5.9))//-6

</script>

ceil():可对一个数进行上舍入

<script type="text/javascript">

document.write(Math.ceil(0.60) + "<br />")//

document.write(Math.ceil(0.40) + "<br />")//

document.write(Math.ceil(5) + "<br />")//

document.write(Math.ceil(5.1) + "<br />")//

document.write(Math.ceil(-5.1) + "<br />")//-5

document.write(Math.ceil(-5.9))//-5

</script>

max():可返回两个指定的数中带有较大的值的那个数

<script type="text/javascript">

document.write(Math.max(5,7) + "<br />")//

document.write(Math.max(-3,5) + "<br />")//

document.write(Math.max(-3,-5) + "<br />")//-3

document.write(Math.max(7.25,7.30))//7.3

</script>

min():可返回指定的数字中带有最低值的数字，效果与max相似 demo略

数组函数

concat():方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
```
<script type="text/javascript">

var a = [1,2,3];

document.write(a.concat(4,5));//1,2,3,4,5

</script>
```

join():方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "1"

arr[1] = "2"

arr[2] = "3"

document.write(arr.join())//1,2,3

</script>

pop():方法用于删除并返回数组的最后一个元素

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "1"

arr[1] = "2"

arr[2] = "3"

document.write(arr)//1,2,3

document.write("<br />")

document.write(arr.pop())//

document.write("<br />")

document.write(arr)//1,2

</script>

push():可向数组的末尾添加一个或多个元素，并返回新的长度。

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "1"

arr[1] = "2"

arr[2] = "3"

document.write(arr + "<br />")//1,2,3

document.write(arr.push("a") + "<br />")//a

document.write(arr)//1,2,3,a

</script>

v浏览器对象BOM

1.windows对象：

Location 地址对象
history 历史对象
document 文档对象
event 事件对象
screen 屏幕对象
navigator 浏览器对象

2.调用方式：

windows.属性=" "
windows.方法();

3.windows对象的三种弹出对话框方法：

alert() 用于显示带有一条指定消息和一个 OK 按钮的警告框 Demo
confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框 Demo
prompt()用于显示可提示用户进行输入的对话框 Demo

4.windows对象的两种弹出框口的方法：

Open()用于打开一个新的浏览器窗口或查找一个已命名的窗口

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

showModalDialog() 弹出模式窗口，这个用法比较

5.windows对象两种启动定时器的方法：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

6.document三个找对象的方法：

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByName() 方法可返回带有指定名称的对象的集合。

7.常用js事件：

onclick事件会在对象被点击时发生
onmouseover 鼠标经过事件
onmouseout 事件会在鼠标指针移出指定的对象时发生。
onload 事件会在页面或图像加载完成后立即发生。
onfocus 事件在对象获得焦点时发生。
onblur 事件会在对象失去焦点时发生。
onfocus 事件在对象获得焦点时发生。
onfocus 事件在对象获得焦点时发生。

8.浏览器对象属性：

appName 属性可返回浏览器的名称。
appCodeName 属性是一个只读字符串，声明了浏览器的代码名。
appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串。

vDOM

DOM主要是需要在实战中运用，我这里只列出一些DOM的常用属性

1.DOM属性：

childNodes 属性返回节点的子节点集合，以 NodeList 对象
documentElement根节点
document.body主体
document.body.childNode获得 body 元素的子节点集合
nodeName节点名
attributes 属性返回指定节点的属性集合，即 NamedNodeMap
nodeType节点类型
nodeValue节点值

v正则表达式

正则表达式我就不一一介绍了，我想这里绝对能满足你的各种需求。

v其他知识

禁止别人以iframe加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

把浏览器当编辑器

data:text/html, <html contenteditable>

v博客总结

关于javascript 入门教程就写到这里，只是为了希望帮助到一些入门的朋友，或者一些像我这样健忘的人朋友恢复记忆。

博文部分内容摘自W3C

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！