《javascript经典入门》-day02
1.使用函数
1.1基本语法
function sayHello() { aler('Hello'); //...其他语句... }
#关于函数参数，形参与实参等各种问题暂不讨论，后续会有章节集中讨论这一问题。
#关于函数变量作用域的问题，在后续python和高级JavaScript详谈
2.DOM对象和内置对象
2.1与用户交互
2.1.1 alert()
使用alert()向用户弹出一个信息对话框，但这种模态对话框只是显示一些信息和与一个‘确定’按钮。术语“模态”意味着脚本暂时停止运行，页面与用户的交互也被暂停，直到用户关闭对话框为止。
alert()方法把字符串作为参数：
alert('This is my message');
//alert()没有返回值
2.1.2 confirm()
confirm()也弹出一个模态对话框，向用户像是一些信息。不同的是，confirm()对话框为用户提供了一个选择，可以点击“确定”或“取消”按钮。
点击任意一个按钮都会关闭对话框，让脚本继续进行，但根据哪个按钮被点击，confirm()会返回不同的布尔值。
var answer = confirm("Are you happy to continue?"); //返回给answer一个布尔值，True或False
2.1.3 prompt()
prompt是打开模态对话框的另一种方式，它允许用户输入信息。
var answer = prompt("What is your full name?"); var answer = prompt("What is your full name?","John Doe"); //prompt()方法还可以有第二个可选参数，表示默认输入内容，从而避免用户直接点击“确定”按钮而不输入任何信息。
prompt()对话框的返回值取决于用户进行了什么操作
. 如果用户输入了信息，然后点击“确定”或“回车”返回值就是用户输入的字符串
. 如果用户没有输入信息就点击“确定”或“回车”，返回值是调用prompt方法设置的默认值
. 如果用户简单关闭了这个对话框（点击“取消”或“ESC”），返回值就是null
2.2根据id选择元素
2.2.1 getElementById()
如果想从HTML页面里面选择某个特定id的元素，我们只需要把相应元素的id作为参数来调用document对象的getElementById()方法，它就会返回特定id的页面元素所对应的DOM对象。
<div id='div1'> ...DIV元素的内容... </div>
var myDiv = document.getElementById("div1");
2.2.2 innerHTML属性
innerHTML属性对于很多DOM对象来说都是一个很好用的属性，可以读取或设置特定页面元素内部的HTML内容。
假设HTML页面包含如下元素：
<div id="div1"> <p>Here is some original text.</p> </div>
利用getElementById()和innerHTML()的组合就可以访问这个<div>元素里的内容
var myDivContents = document.getElementById("div1").innerHTML
变量myDivContents包含如下字符：“<p>Here is some original text.</p>”
还可以利用innerHTML设置选定元素的内容：
document.getElementById("div1").innerHTML = "<p>Here is some new text instead!</p>";
执行上述代码会删除<div>元素当前的HTML内容，以新字符串代替。
2.3访问浏览器历史记录
在JavaScript里，浏览器的历史记录是以window.history对象代表的，它基本上就是访问过的URL列表。这个对象的方法让我们能够使用这个列表，但不能直接修改这些URL。
这个对象只有一个属性，就是它的长度（length)，表示用户访问过的页面的数量：
alert("You 've visited" + history.length + "web pages in this brower sessions");
history对象有三个方法：
1.forward() 相当于点击浏览器的“前进”按钮，可以得到历史列表里下一个页面
2.backward() 相当于点击浏览器的“后退”按钮，可以得到历史列表里前一个页面
3.go() 它有一个参数，是正的或负的整数，可以跳到历史记录列表里的相对位置
history.go(-3); //回退3个页面 history.go(2); //前进2个页面
这个方法也可以接受字符串作为参数，找到历史记录列表里第一个匹配的URL。
history.go("example.com"); //到达历史记录列表里第一个包含"example.com"的URL。
2.4使用location对象
2.4.1 location对象包含当前加载页面的URL信息。
页面的URL是由多个部分组成的：
【协议】//【主机名】：【端口】/【路径】【搜索】【hash】
范例：http://www.example.com:8080/tools/disiplay.php?section=435#list
1.location.href "http://www.example.com:8080/tools/disiplay.php?section=435#list"
2.location.protocol "http:"
3.location.host "www.example.com:8080"
4.location.hostname "www.example.com"
5location.port "8080"
6.location.pathname "/tools/disiplay.php"
7.location.search "section=435"
8.location.hash "#list"
2.4.2 使用location对象导航
利用location对象有两种方式可以帮助用户导航至新页面
第一种是直接设置对象的href属性：
location.href = 'www.newpage.com'; //使用这种方法把用户转移到新页面时，原始页面还保留在浏览器的历史记录里，用户可以利用浏览器的“后退”按钮方便的返回当前页面。
第二种是用新的URL直接替换当前页面，即把当前页面从来历史记录里删除，可以使用location对象的replace()方法：
location.replace('www.newpage.com');
2.4.3 刷新页面
如果要在浏览器里重新加载（刷新）当前页面，可以使用reload()方法：
location.reload(); //如果使用没有参数的reload()方法，当浏览器的缓存里保存了当前页面时，就会加载缓存的内容。为了避免这种情况，确保从服务器获得页面数据，可以在调用reload()方法时添加true document.reload(true);
2.5 浏览器信息：navigator对象
navigator对象包含了浏览器程序本身的数据。
利用navigator对象显示信息：
<!DOCTYPE html> <html> <head> <title>window.navigator</title> <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>cookieEnabled</td><td>"+navigator.cookieEnabled+"</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>
navigator对象向我们展示了丰富历史和复杂行业竞争的一角。这些关于用户平台的信息虽然不可靠，但也是它能够提供的最佳结果了。
虽然浏览器件的兼容性已经比前几年好多了，但有时我们还是需要了解用户浏览器的功能，而这时使用navigator对象几乎就是一个错误的选择。
#以后介绍的“功能检测”，那是一种更精确的跨浏览器手段来检测用户浏览器的功能，从而决定如何进行相应的操作。
2.6 日期和时间
Date对象用于处理日期和时间。
2.6.1 创建具有当前日期和时间的Date对象
var mydate = new Date(); //变量mydate就是一个Date对象，包含了创建对象时的日期和时间信息
JavaScript具有很多方法用于获取、设置和编辑Date对象里的数据，下面是一些范例：
var year = mydate.getFullYear(); //四位数字表示的年份，比如2012 var month = mydate.getMonth(); //数字表示的月份，0-11，0表1月 var date = mydate.getDate(); //日期，1-31 var day = mydate.getDay(); //星期，0-6，0表示星期日 var hours = mydate.getHours(); //时，0-23 var minutes = mydate.getMinutes(); //分，0-59 var seconds = mydate.getSeconds(); //秒，0-59
2.6.2 创建具有指定日期和时间的Date对象
给Date()语句传递相应的参数，我们就可以创建任意指定日期和时间的Date对象，方式有下面几种：略
操作日期和时间的方法非常多，后面会有Date最新的完整方法列表。
2.7 利用Math对象简化运算
在需要进行常见的各种运算时，使用Math对象能够简化很多工作。
与Date对象不同的事，Math对象不需要创建就可以使用，可以直接调用它的方法。
2.7.1 取整
ceil(n) , floor()和round()方法以不同方式把带小数点的数值截取为整数：
var myNum1 = 12.55; var myNum2 = 12.45; alert(Math.floor(myNum1)); //返回向下取整到最近的整数。显示12 alert(Math.ceil(myNum1)); //返回向上取整到最近的整数。显示13 alert(Math.round(myNum1)); //返回四舍五入到最近的整数。显示13 alert(Math.round(myNum2))；//显示12
2.7.2 获得最大值和最小值
利用max()和min()可以从一组数据中获得最小值和最大值：
var ageDavid = 23; var ageMary = 27; var ageChirs = 31; var ageSandy = 19; document.write("The youngest person is "+Math.min(ageDavid,ageMary,ageChirs,ageSandy)+"years old<br/>"); document.write("The oldest person is "+Math.max(ageDavid,ageMary,ageChirs,ageSandy)+"years old<br/>"); //输出结果 The youngest person is 19 yesrs old The oldest person is 31 years old
2.7.3 随机数
利用Math.random()方法可以生成0到1之间的一个随机数。
2.7.4 数学常数
很多常数以Math属性的方式出行
E ：自然对数的底，大约是2.176
LN2：2的自然对数，大约是0.693
LN10：10的自然对数，大约是2.302
LOG2E：以2为底e的对数，大约是1.442
LOG10E：以10为底e的对数，大约是0.434
PI：圆周率，大约是3.14159
SQRT1_2：2的平方根的倒数，大约是0.707
SQRT2：2的平方根，大约是1.414
2.7.5 关键字with
任何对象都可以使用关键字with，但是Math对象是最适合用来示范的。通过with，我们可以减少一些枯燥的键盘输入工作
with(Math){ var myRand = random(); var biggest = max(3,4,5); var height = round(76.35); }