介绍：javascript初学者，写下这篇笔记用于以后复习，因为是初学者，所以会写的详细点。
#javascript的正确写法是JavaScript,笔者后面都会写javascript，原因是这样写省事点
这篇文章的内容:讲了javascript中的 dom对象，函数的使用，数值，数组，程序控制等基础性的东西。
1，window和document对象。
浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是DOM。在DOM里，页面的元素具有一个逻辑化，层次化的结构，就像相互关联的父对象和子对象组成了一个树形的结构。这些对象及其相互关系构成了Web页面及显示页面的浏览器的抽象模型。每个对象都有"属性"列表来描述它，而利用javascript可以使用一些方法来操作这些属性。
每个层级树的最顶端是浏览器window对象，它是页面的DOM表示中的一切对象的父对象。
window对象具有一些子对象，如document对象，这是最常用的子对象。浏览器加载的任何HTML页面都会创建一个document对象，包含全部HTML内容及其他构成页面显示的资源。利用JavaScript以父子对象的形式就可以访问这些信息。这些对象都有自己的属性和方法。
window对象的其他子对象还有location（包含当前页面URL的详细信息），history（包含浏览器以前访问的页面地址）和navifgator（包含浏览器类型，版本和兼容的信息）。
可以用句点方式表示树形结构中的对象： window.document。
2，与用户交互的两个函数
window.alert()： <script>window.alert("helloworld")</script>
document.write(): 向HTML文本文档写入字符
读取document属性: alert(document.title)
3,在web页面里添加JavaScript的多种方式
第一种方法是把javascript语句直接包含在HTML文件里:
<script>
...javascript语句...
</script>第二种方法是吧javascript代码保存到单独的文件里，然后使用src属性来调用
<script src="mycode.js"></script>
<script src='/path/to/mycode.js'></script>
<script src='http://www.example.com/path/to/mycode.js'></script>4，javascript注释语句
单行注释使用 //
多行注释使用 /* 注释内容 */
5，javascript中的变量和操作符
javascript中的变量是区分大小写的，
javascript程序员和其他程序员一样习惯使用"驼峰大小写"命名方式
变量的声明使用 var，虽然javascript中的变量使用前可以不用先声明，但是建议声明
javascript中算术操作符的优先级和用法等同于java中算术操作符的优先级和用法
6，鼠标事件
（1）onClick事件处理器
onClick事件:鼠标点击事件。
<html>
<head>
</head>
<body>
<input type="button" οnclick="alert('hello world')" value="Click it" />
</body>
</html>
（2）onMouseOver 和onMouseOut 事件处理器
如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器
当鼠标进入页面上被某个元素所占据的区域时，会触发onMouseOver事件，而onMouseOut事件，很显然是在鼠标离开这一区域时触发的。
7，使用函数，
函数的定义
<script>
function dithis(){
alert("Doing This");
}
</script>函数的调用
dothis()javascript的函数中的变量也有作用域，分局部作用域和全局作用域
8，DOM对象和内置对象
（1）与用户交互
- alert():向用户弹出一个对话框
- confirm():与alert()的方法相同，也向用户弹出一个模拟对话框，向用户显示一些消息。不同的是，confirm()对话框为用户提供了一个选择，可以单击"OK"或"Cancel"按钮，而不只是以个OK按钮。并且，confirm()函数会根据选择的按钮的不同返回不同的值，单击"OK"放回 True，单击"Cancel"返回False
- prompt():prompt()是打开模拟对话框另一种方式，它允许用户输入信息。
prompt()有两种调用方式，一种和confirm()是一样的
var answer = prompt("shat is your full name?");当prompt()的参数有两个时。会显示一个允许用户输入信息的对话框，其返回值如下
- 如果用户输入了信息，然后点击OK或按回车，则返回值是用户输入的字符串
- 如果用户没有在对话框中输入信息，然后按了OK或者回车，返回值为调用promtp()传入的第二个参数
- 如果用户点击了Cancel 返回值为NULL
（2）利用getElementById()选择页面元素
在javascript代码里，把相应的ID作为参数来调用getElementById()方法，就可以访问这个<div>元素:
<div id="div1">
...div元素的内容...
</div>
var myDiv = document.getElementById("div1")（3）使用innerHTML访问HTML内容
对很多DOM对象来说，innerHTML属性是一个很好用的属性，可以读取或设置特定元素内部的HTML内容。
<div id="div1">
...div元素的内容...
</div>
var myDiv = document.getElementById("div1").innerHTML =
"<p>here is some new text</p>"（4）访问浏览器历史记录
在javascript里，浏览器的历史记录是用window.history对象来表示的，它基本上就是访问过的URL列表。history对象的方法让我们能够使用这个列表，但不能直接操作这些URL。
history对象只有一个属性，就是它的长度，表示用户访问过的页面的数量:
alert("you have visited "+history.length+" web page in this broser session") history对象有三个方法:
- forward():相当于单击浏览器的前进
- backword():相当于单击浏览器的后退
- go():它有一个参数，是正的或负的整数，可以跳到历史记录列表里的相对位置：
（5）使用location对象
location对象包含当前加载页面的URL信息。
页面的URL是由多个部分组成的：
[协议]//[主机名]:[端口]/[路径][搜索][hash]
下面是以个url范例:
http://wwwl9.example.com:8080/tools/display.php?section=435#list
location对象的一系列属性包含了URL各个部分的数据:
- location.href：'http//www.example.com:8080/tools/display.php?section=435#list'
- location.protocol：'http:'
- location.host：'www.example.com:8080'
- location.hostname：'www.example.com'
- location.post：'8080'
- location.pathname：'/tools/display.php'
- location.search：'?section=435'
- location.hash：'#list'
location对象的用法:
- location.href = 'www.newpage.com' 使用这种方法把用户转移到新页面，同时原页面会保存在用户的浏览记录里
- location.replace('www.newpage.com') 使用在种方法把用户转移到新页面，浏览器中原页面的URL浏览记录会被新页面的URL代替
- location.reload() 在浏览器中重新载入当前页面
（6）浏览器信息：navigator对象
location对象保存了浏览器当前URL的信息，而navigator对象包含了浏览器程序本身的数据
一段使用navigator对象的例子:
<html>
<head>
<style>
td{border:1px solid gray;padding:3px 5px;}
</style>
</head>
<body>
<script>
document.write("<table>")
document.write("<tr><td>appName</td><td>"+navigator.appName + "</td></tr>");
document.write("<tr><td>appCodeName</td><td>"+navigator.appCodeName + "</td></tr>");
document.write("<tr><td>appVersion</td><td>"+navigator.appVersion + "</td></tr>");
document.write("<tr><td>language</td><td>"+navigator.language + "</td></tr>");
document.write("<tr><td>cookieEnable</td><td>"+navigator.cookieEnable + "</td></tr>");
document.write("<tr><td>cpuClass</td><td>"+navigator.cpuClass + "</td></tr>");
document.write("<tr><td>onLine</td><td>"+navigator.onLine+ "</td></tr>");
document.write("<tr><td>platform</td><td>"+navigator.platform + "</td></tr>");
document.write("<tr><td>no of plugins</td><td>"+navigator.plugins.length + "</td></tr>");
document.write("</table>")
</script>
</body>
</html>
9，日期和时间
（1）创建具有当前日期和时间的Date对象
新建一个具有当前日期和时间信息的Date对象的最简单的方法是:
var mydate = new Date()变量mydate就是一个Date对象，其中包含了创建对象时的日期和时间信息。javascript具有很多方法用于获取，设置和编辑Date对象中的数据，下面是一些范例:
- var year=mydate.getFullYear(); //四位数字表示的年份
- var month = mydate.getMonth();
- var date = mydate.getDate();
- var day = mydate.getDay();
- var hours = mydate.getHours();
- var minutes = mydate.getMinutes();
- var seconds = mydate.getSeconds();
（2）创建具有指定日期和时间的Date对象
给Date()语句传递相应的参数，我们就可以创建任意指定日期和时间的Date对象，方式有下面几种:
- new Date(milliseconds) //自1970年1月1日起的毫秒数
- new Date(dateString)
- new Date(year,month,day,hours,minutes,seconds,millseconds)
（3）设置和编辑日期与时间
var mydate = new Date();
改成当月12日:mydate.setDate(15)
给日期部分增加33天:mydate.setDate(mydate,getDate()+33)
10，使用math对象
math对象相关的方法:ceil(n),floor(n),max(a,b,c),min(a,b,c),round(n),random(),
11，使用with对象
关键词with对象作为参数，然后是一对花括号，其中包含着代码块。代码块里的语句在调用特定对象的方法时可以不必指定这个对象，因为javascript会假定这些方法是属于作为参数的那个对象的。
下面是以个范例:
with (Math){
var myRand = random();
var biggest = max(3,4,5);
}12，javascript中的数字
- 利用isNaN()检测非数值，如过值不是数值，返回True 否则返回False
- 使用parseFloat()和parseInt()将字符串强制转换为数值格式的函数，parseFloat()函数解析字符串并返回一个浮点数。如果被解析的字符串的首字符是一个数字，函数会一直解析知道数字结束，然后返回一个数值而不是字符串
- 利用isFinite()函数判断一个数值是否是无穷大。它会把参数转换为数值，如果得到的结果是NaN，正无穷大，或负无穷大，函数返回False，否则返回false(假),其他情形返回真
13，javascript中的字符串
（1）常用的转义序列
\t 制表符，\n 换行符 ，\" 双引号，\' 单引号，\\反斜线 , \x99 ascii码的值 \x9999 unicode编码的值
（2）常用的字符串方法
- concat：连接字符串，返回结果字符串的一个备份
- indexOf：返回指定值在字符串中出现的第一个位置
- lastIndexOf：返回指定值在字符串中出现的最后一个位置
- replace：在意个字符串里搜索指定的子字符串，并且用新的字串进行替换
- split：把字符串分解为一系列字串，保存到数组里，返回一个新数组
- substr：从指定的位置开始，提取指定数量的字符组成字符串
- toLowerCase：把字符串转换成小写字符
- toUpperCase：把字符串转换为大写字符
#javascript中没有一种数据类型表示单个的字符。要在javascript中表示单个的字符，可以创建只包含一个字符的字符串。
14，数组
（1）创建新数组
var myArray = new Array();
var myArray = [];
（2）初始化数组
var myArray = ['Monday','Tuesday','Wednesday'];
（3）数组的方法
- concat：合并多个数组
- join：将多个数组合并为一个字符串
- toString：以字符串形式返回数组
- indexOf：在数组搜索指定元素
- lastIndexOf：返回与搜索规则匹配的最后一个元素
- slice：根据指定的索引和长度返回一个新数组
- sort：根据字母顺序或提供的函数对数组进行排序
- splice：在数组指定索引添加或删除1个或多个元素
#注意在javascript中并不允许直接关联数组(带有命名的索引的数组)。但是，有一些方法使用对象来模拟关联数组的行为。
15，程序控制
（1）javascript中的程序控制语句如 if，while，for，switch，do...while，break的用法和java，c中的用法一样
（2）javascript中for 可以使用和python中的 for in 用法，如下
<script>
var days = ['sun','mon','Tue','Web','Thu','Fri','Sat'];
var message = ""
for(i in days){
message += 'Day'+ i + 'is' + days[i] + '\n'
}
alert(message)
</script>（3）设置和使用定时器
在很多情况下，我们想要让程序延迟特定一段时间再执行javascript代码。当编写用户交互例程的时候，这种情况特别常见，例如，你想让一条消息显示一会儿，然后再将其删除。
为了做到这种情况，javascript提供了两个方法，分别是setTimeout()和setInterval()
setTimeout()
setTimeout（action,delay）在第二个参数所指定的那么多毫秒之后，调用作为第一个参数传入的函数,
<div id="id1">I‘m about to disappear!</div>
function hede(elementID){
document.getElementById(elementId).style.display = 'none';
}
window.onload = function(){
setTimeout("hide('id1')",3000);
}setInterval()
setInterval(action,delay)方法的工作方式和setTimeout()类似，但是它并不是在执行作为第一个参数传递的语句之前强制进行延迟，而是会重复地执行，在两次执行之间，延迟第2个参数所指定的毫秒数。
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
