Translating from http://www.w3school.com.cn/
1.Printing content to html file.
Justlike PHP, JS could also put sth to the html file. It called methodwrite from document (but what is document? A instance?)For example,
document.write("<h1>This is a heading</h1>");
2.Response to events.
<buttontype="button" οnclick="alert('xxxxx')">Clickhere</button> //Alert is not usually used in formal JS but veryhelpful when debugging.
And,of course, you can put any functions instead of alert().
3.Change content of HTML.
Firstof all, select elements by x=document.getElementById("xxx");
Thenchange it by x.innerHTML="xxxx";
Note:This method only change the content, it has nothing to do withattributes of the HTML tag.
4.Generalization of the above entry.
Aslong as you selected an element by x=document.getElementById("");,it has lots of inner variables. The content is called inner just likethis in OOP.
Changinga images for example:
x=document.getElementById("picId");
Fromnow on, we can do a lot of things.
x.scr="url";//Changesource.
x.scr.match("pattern");//Searchpattern.
5.Get value from input.
x=document.getElementById("inputId").value;
Bythe way, isNaN(x) returns boolean and checks if x is a number.
6.Define functions
Firstthing to remember is to put all your code inside <script></script>. You can put it in <head></head> or<body></body>, usually we put functions inside head.
<script>
functionname(var1, var2){
body;
return sth;// Optional.
}
</script>
7.Also we could import js code from *.js file.
<scriptsrc="file.js"></script>
8. When try & catch, you can throw an error, like
if(x) throw "xxx";
catch(err);
The error message will be caught into the err variable.
9. Check form.
There are several aspects.
First, add actions in the form definition.
<form action="xx.html" οnsubmit="return name(filed name, message)" method='post'>
second, define functions
function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } }
With(field) means the follow code block will run in the name space of field. i.e. value is field.value, length() is field.length().
10. Example of element selection.
document.getElementById();
document.getElementByTagName(); Tags are p, h1 etc.
11. Example of event action.
This can also be changed like scr of pic. When code for event is called, can use this to do some modification.
οnclick="code here".
onmousedown / onmouseup : triggered when press / release the mouse.
onload / unload : triggered enter / leave the page
onchange: when content is changed.
onmouseover / onmouseout
12. create / delete HTML element
First, create a tag
var para=document.createElement("p");
For the content, make them as node
var node=document.createTextNode("text");
append text to para and append para to div
para.appendChild(node);
document.getElementById("div1").appendChild(para);
In order to delete, parent and child reference are need, then use
parent.removeChild(child);
Or if we only have child
child.parentNode.removeChild(child);
13. Constructor is just like a function, but it assign value to this.
function person(name, age)
{
this.name=name;
this.age=age;
function method()
{
do sth;
}
}
var mother=new person(xx, 111);
Attention: in
for(x in person)
{
}
x is the name of attribute rather than the value.
14. Timer
Run after 1s.
t=setTimeout("function()",1000);
Stop timer.
clearTimeout(t);
15. Cookie
To be continued.