《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); }