《javascript经典入门》-day01

1.了解JavaScript

01.浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，，也就是DOM。在DOM里，页面的元素具有一个逻辑化，层级化的结构，就像一个由父对象和子对象组成的树状结构。

02.这个层级树的最顶层是浏览器window对象，它是DOM树立一切对象的根。

03.window对象的子对象：a.document：浏览器加载的任何HTML页面都会创建一个document对象，包含全部HTML内容及其他构成页面显示的资源。

　　　　　　　　　　　 b.location：包含着当前页面URL的全部信息

　　　　　　　　　　　 c.history：包含浏览器以前访问的页面地址

　　　　　　　　　　　 d.navigator：包含浏览器类型，版本和兼容的信息

04.window.alert()

<script>window.alert('Here is my message');</script>

当我们调用alert()方法时，浏览器会弹出一个对话框显示设置的信息，还有一个“确定”按钮。

05.document.write()

<script>document.write('Here is another message');</script>

直接向HTML文档写入字符

#无论从功能来说，还是从编码风格与可维护性来说，document.write都是有种向页面输出内容的笨拙方式。不建议使用，更好的方式是使用JavaScript和DOM

2.创建简单脚本

01.在web页面里添加JavaScript

a.把Javascript语句直接包含在HTML文件里

<script>
    ...Javascript语句...
</script>

b.把Javascript代码保存到单独的文件，然后在HTML中调用

<script src='mycode.js'></script>

#外部文件里不能使用<script>和</script>标签，也不能使用任何HTML标签，只能是纯粹的Javascript代码

02.代码注释

a.长度在一行以内的注释可以在行首以双斜杠表示：

//注释内容
//注释内容

b.实现多行注释方法是使用/*标签注释开始，使用*/标签注释结束。其中的注释内容可以跨越多行

/*  这里的注释
     内容可以跨越
     多行 */

03.变量

有些编程语言在赋值之前必须进行变量声明，JavaScript不必如此。但变量声明是个很好的编程习惯，在JavaScript里可以这样做：

var netPrice;    #声明
netPrice = 8.99;    #赋值
var netPrice = 8.99; #声明的同时赋值

04.算数操作符及其优先级：（与其他语言优先级规则基本一样）

05.捕获鼠标事件

a.onClick事件处理器

onClick事件处理器几乎可以用于页面任何可见的HTML元素，使用它的方式之一是给HTML元素添加一个属性：

onClick = '...一些JavaScript语句...'

#虽然给HTML元素直接添加事件处理器是完全可行的，但是目前已经不认为这是个好的编程方式。

<!DOCTYPE html>
<html>
<head>
    <title>onClick Demo</title>
</head>
<body>
    <input type='button' onclick='alert('You clicked the button')' value='Click Me'/>
</body>
</html>

b.onMouseOver和onMouseOut事件处理器

当鼠标进入页面上某个元素占据的区域时，触发onMouseOver事件。

当鼠标离开这一区域时，触发onMouseOut事件

用法与onClicky一样

<DOCTYPE html>
<html>
<head>
    <title>OnMouseOver Demo</title>
</head>
<body>
    <img src='tick.gif' alt='tick' onmouseover="this.src='tick2.gif';"onmouse="this.src='tick.gif';"> 
<!-- 当事件处理器是通过HTML元素的属性添加到页面时，其中的this是指HTML元素本身。-->

</body>
</html>