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