JavaScript Notes

1.调用javascript

1.1 集成在html中的javascript
可以放在head或body中。

<script>function myFunction(){    document.getElementById("demo").innerHTML="My First JavaScript Function";}</script><button type="button" onclick="myFunction()">Try it</button>

1.2引用外部JavaScript

<script src="js/jquery.fullPage.js"></script>

2.javascript 语法

2.1 变量
Javascript中变量同意使用var来声明，包括整形，或字符串等等，属于动态分配类型。

var x1=34.00;  var x2=34;  var x=truevar y=falsevar x = "Bill";

2.数组

var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";var cars=new Array("Audi","BMW","Volvo");var cars=["Audi","BMW","Volvo"];

2.3 对象
创建对象：

person=new Object();person.firstname="Bill"; person.lastname="Gates";

调用对象属性/方法：

var txt = "Hello";txt.length=5 txt.indexOf() txt.replace() txt.search()

2.4 .函数
格式：

function myFunction(){    这里是要执行的代码    Return 0；//可以添加返回值}

3.访问HTLM元素

3.1 得到元素对象
通过id访问
document.getElementById(“demo”)
通过标签名称访问
var items = document.getElementByTagName(tag_name);
var object= items[i];
通过该方法访问得到的是对象数组，可以通过操作数组元素的方式将对象取出来。
通过类名访问
getElementByClassName(class_name_1 class_name_2 …)
通过该方法访问同样得到的是对象数组，操作方式同上。

3.2 获取和设置元素属性

<p title = "a gentle reminder"> Dont forget to buy this stuff.</p>var paras = document.getElementByTagName("p");

获得属性
var attr = paras[0].getAttribute(“title”);
设置属性
paras[0].setAttribute(“title”,”a tough reminder”);

4.事件处理

4.1 绑定事件和处理函数
在html中可以直接绑定

<button onclick="function()">button</button>

5.动态创建标记

5.1 document.write
使用document.write可以直接将包含格式的内容插入到html中

    document.write("<p>this is inserted.</p>")

加载过程中写,写入内容插入到原html文档之中；
加载完成后写(按键触发)，写入内容覆盖原html文档。

5.2 innerHTML属性
innerHTMl属性可以用来读写某给定元素里的HTML内容，不包含内容细节。
缺点：只能替换，不能插入。

<div id = "testdiv"><p> this is <em>my</em> content. </p></div>

var testdiv = document.getElementById(""testdiv);alert(testdiv.innerHTML)testdiv.innerHTML="this is <em>my</em>  new content."

5.3 DOM方法
利用creadElement()创建元素，利用createTextNode()创建文字节点；
利用appendChild()添加子元素或节点；
利用insertBefore(),insertAfter()添加兄弟元素；

var para = document.createElement("p");var txt = cocument.creatTextNode("hello world");para.appendChild(txt);var testdiv = document.getElementById("testdiv");testdiv.appendChild(para);