读书笔记-js

定义描述类名或者方法名的注解：ClassOrMethodFullName.java

【写一个js方法】

1 2 3

function alertdemo() { // };

function + 方法名 + 括号 + 代码块

【调用这个js方法得加括号】

1	<button type="button" onclick="alertdemo()">点击这里</button>

【带参数的函数，参数是不需要声明类型部分的】

1 2 3 4 5

function alertmsg(msg) { alert(msg); }

【带返回值的函数，很好理解】

1 2 3 4 5

function getAResult() { return "返回的结果"; }

返回值是可选的，means，你想在哪个分支返回就返回，在另一个分支不返回就不返回，返回啥都没人管，因为function根本不会申明返回类型，真是随便的语言啊。

【修改html元素内容】

1 2 3 4 5

x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容 x.style.color="#ff0000"; //改变样式

【js是页面顺序执行的】

如果把js放在html元素生成之前尝试修改html元素的内容，会失败。

【引用外部js指定charset时注意外部.js文件的编码是否一致】

1	<script type="text/javascript" charset="utf-8" src="../js/scho/actions/demo.js"></script>

demo.js的编码需要是utf-8的；

【JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。】

【js对象】

1 2 3 4 5 6 7 8 9

var person={ firstname : "Bill", lastname : "Gates", id : 5566 };

对象属性有两种寻址方式：

实例name=person.lastname;

name=person[“lastname”];

javascript有更随便的对象创建方式：

1 2 3 4 5 6 7 8 9

person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";

【全局变量】

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

全局变量会在页面关闭后被删除

【流程语句几乎一样】

if, else, while, switch, ? a : b等

【try—catch】

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

try { var x=document.getElementById("demo").value; if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low"; }catch(err) { var y=document.getElementById("mess"); y.innerHTML="Error: " + err + "."; }

【Javascript为什么能修改html？】

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。document是js基础库提供的dom访问对象。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

var x=document.getElementById(“intro”)

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);//main中的

元素

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

【绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。】

【innerHtml修改元素内容，怎么修改元素的属性呢？】

document.getElementById(id).attribute=new value

例如：

1 2 3

<img id="image" src="smiley.gif"> document.getElementById("image").src="landscape.jpg";

【修改html元素的样式就是修改元素的style属性】

1 2 3

document.getElementById(id).style.property=new style document.getElementById("p2").style.color="blue";

【HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应，其实就是js修改html元素的事件属性】

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

1	<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

【js中的this】

1 2 3

function changetext(id){ id.innerHTML="谢谢!"; }

1	<h1 onclick="changetext(this)">请点击该文本</h1>

this就是元素自己本身，就是Element；

或者

1	<h1 onclick="this.innerHTML='谢谢'">请点击该文本</h1>

简直是太随便了。

【onclick就是元素的一个属性，所以可以后续通过js给赋值】

1 2 3 4 5 6 7 8 9

<script> document.getElementById("myBtn").onclick=function(){ displayDate() }; </script>

【js不光能修改html已有的元素的属性和各种值，还能添加删除html元素】

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div id="div1"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>

【javascript看什么都是对象】

【BOM，DOM】

The BOM consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.

就说DOM是BOM的一个子集，这些都是一堆对象；

【万能的$】

$不是javascript的语法关键词，是prototype.js中定义的一个变量：

${“username”}=document.getElementById(“username”)

prototype.js是javascript的一个库，面向对象的库。