Where to put JS in html
You can put your JS in <head>, <body> or external file and use <script src="myScript.js"></script> to load it. External file does not include <script> labels.
Basics
1.Array
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//condensed array
var cars=new Array("Audi","BMW","Volvo");
//literal array
var cars=["Audi","BMW","Volvo"];
2.Object
var person={firstname:"Bill", lastname:"Gates", id:5566};
//more readable
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
Retrieve data:
name=person.lastname;
name=person["lastname"];
- Use new to declare the type of variable
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
Everything is object in JS, including the variables you created, which means it has built-in attribute and method.
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
var txt = "Hello";
/*
txt.length // it is 5
var x = txt.toUpperCase();
txt.indexOf()
txt.replace()
txt.search()
*/
4.Map
Map is mainly used for fast searching and looking up data.
Example: {(1, “smile”), (2, “cry”), (42, “happy”)}
Key and value in Map can be in any data type, not limited to only string or integer.
Object in Javascript has built-in prototype. Nearly all objects in Javascript are instances of Object, including Map.
Useful tips
- Method and variable names are all Case Sensitive
- Change line in string
document.write("Hello \
World!");
- number +string will become string
x=5+"5";
document.write(x); //55
document.write("<br />");
- Assign value to a variable that is not declared?
It will automatically become a global variable even if it happens in the function.
carname="Volvo";
- When using switch function, you need break in each case block otherwise it will keep executing until break, because switch only find the starting point.
DOM
(1)DOM can be used to edit every element in HTML
var x=document.getElementById("main");
//y is an array of paragraphs, you can use y[0].innerHTML
var y=x.getElementsByTagName("p");
(2)DOM to create/delete node
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 1</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is a new paragraph");
para.appendChild(node);
var divElement=document.getElementById("div1");
divElement.appendChild(para);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">Paragraph 1<p>
<p id="p2">Paragraph 2</p>
</div>
<script>
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
//var parent=document.getElementById("div1");
//parent.removeChild(child);
</script>
</body>
</html>
Onclick Event
(1)Use this to refer to the current element itself.
<h1 onclick="this.innerHTML='Current line changed!'">Current Line</h1>
This is the same as
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Changed!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on me</h1>
</body>
</html>
(2)Define the onclick directly
<!DOCTYPE html>
<html>
<body>
<h1>My first JavaScript</h1>
<p id="demo">
JavaScript can change the content and style of HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");
x.innerHTML="Hello JavaScript!"; // modify
x.style.color="#ff0000";
}
</script>
<button type="button" onclick="myFunction()">Click Here</button>
</body>
</html>
You can also set onclick for image and change the src.
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
element=document.getElementById('myimage')
element.src="/i/eg_bulbon.gif"
(3)Use DOM to assign an onclick event to an element.
<html>
<head>
</head>
<body>
<button id="myBtn">Click Here</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
User Input
You will create an input box, and get the value and test if it is a number, if not, pop up an alert.
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
When to use document.write()
<!DOCTYPE html>
<html>
<body>
<h1>My Heading</h1>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction()
{
document.write("OOPS!Overwrote doc");
}
</script>
</body>
</html>
Correct way:
<!DOCTYPE html>
<html>
<body>
<h1>My heading</h1>
<script>
document.write("<p>My paragraph using JavaScript</p>");
</script>
</body>
</html>
Other events:
onload: when the use enter the webpage, usually used for checking versions of explores or something like that.
onunload: used to deal with cookie
onchange: usually combined with input
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
put some letters here：<input type="text" id="fname" onchange="myFunction()">
<p>When you done with inputs and click somewhere else，letters will be uppercased.</p>
</body>
</html>
- onmouseover
- onmouseout
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
Try - catch - throw
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "Empty";
if(isNaN(x)) throw "Not a number";
if(x>10) throw "Too Large";
if(x<5) throw "Too Small";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error：" + err + "!";
}
}
</script>
<p>put a number in [5,10]：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test your number</button>
<p id="mess"></p>
</body>
</html>
