API

Every page is built upon the DOM(Document Object Model)

Page content is represented by the DOM

Every node = 1 parent + *children

Every document is built like a tree, Js is a cheeky monkey,he can get whichever element he wants in the tree and change it.

(Scripting languages ie)Js uses the DOM to interact with the document.

How?--With API

What is API?-- It is a way for someone else to write code, and then you use it to interact with their  programs.

不论你用何种浏览器,何种脚本语言,API都是一样的.

What are the DOM objects/elements 的组成

1.document——the root of the page

 (document.URI,document.height,document.links. document.bgColor)

2.element——a node in the tree

 (returned by a memeber of the API)

3.nodeList——an array (group) of elements.(比如需要返回一组ul/ol)

document.getElementsByClassName("p") would return a set of nodes.（WEEK 3）

4.attribute

A node in the DOM, Another way to manipulate/change the document(Rarely used)

Page = document+elements+attributes

Speical APIs:

document.getElementById

document.getElementsByClassName

element.innerHTML

element.style

element.setAttribute(attribute,value)

element.removeAttribute(attribute)

Why do we need Js?--H5&CSS3 are not really interactive.

  New elements and pseudo-classes make only temporary changes.

What can Js do?

Reacts to events(mouse events,keyboard events,etc.)

Validate data

Detect the visitor's browser

Creat cookies.

有关Js 的第一件事: how to print out /generate some outputs?

Js doesn't have a built-in print function.

Data is displayed via

window.alert()  ——a pop-up window that displays information.

window.prompt()——similar to alert,but allow you to enter input（prompt("Enter your name:");）

HTML output using document.write()——write sth directly to the page permanently.

不推荐,易出错(easily be misused)

HTML element using innerHTML()——change contents of the DOM.与元素结合使用

element.innerHTML = "hi";        (这里无需括号)

很有意思的是说how do you figure that out when you're codding?

答案是你不需要琢磨，大量的练习,直到它们成为你的second nature.

常用

  在这个例子中,element就是通过API来获取的

例如 document.getElementById("test"),innerHTML = "Hello World";

Browser console using console.log()——write the data to the brower console.

只有在console中才能看得到,例如console.log("Leave a secret message") 嗯，很形象的例子。

优点: provides debugging information for Js,html,css.

背景知识:

Computer stores info by using variables.

In many programming languages, variables need to have a single type, in Js, a variable can 

take on （switch to）many different types.

Number(with/without )

特别说下object

有时候变量比较复杂，如DOM中的一个节点node

var topic = document.getElementById("myID");

如果直接用ducument.topic可能得到一堆junk;因为它是对象，而对象只能通过属性得到大致read

但nodes are more than a single value, they have attributs.(

比如该例子中，如果借助attributes,我们可以选择

string有index可用

w