First of all, Javascript is an object-based language, it has a lot features that're similar to those of Object-Oriented language, but they are not exactly the same.
You can put your javascript code anywhere in your HTML file, whether its in the head, body or after body. One thing worth noting is that the browser will evaluate and run your code top-down, so the order of your javascript code matters as those ones on the top is executed before those ones at the bottom.
<html lang="en">
<head>
<title> My First JavaScript </title>
<script>
//Javascript code here
</script>
</head>
<body>
<script>
//Javascript code here
</script>
</body>
<script>
//Javascript code here
</script>
</html>
You can write javascript code within the script tag directly or use the src attribute to link to an external javascript file. The convention is if the javascript code is only used within that html, then put the code in there, otherwise create a javascript file and set a link to it.
Statements and expression
Each line in javascript code is a statement. Expression is the part of a statement that has value. For example,
var x = 3+1;
is a statement
the 3+1 is an expression.
Document Object Model
document is a built-in javascript object that gives you access to the elements in your page through javascript code.
The default object of any javascript program is window, alert, console and document all belong to the window object. Try putting window before them, the result is the same.
window.alert("Hello");
window.console.log("Hi");
window.document.getElementById("someId");
Functions and Events
What's events?
An event is something that happens in your JavaScript program that you can choose to handle. Events can be generated by you (like if you click a mouse), or generated by the browser (like if the page has completed loading), or even generated by JavaScript itself (like if a timer goes off).
What's event handler?
Event handler are just function that are assigned to an event.
Javascript functions are pass by value.
Scope
Global variables are declared outside functions, they have global scope.
Local variables are declared within functions, they have local scope.
Functions parameters have local scope. Take a look at the following code snippet.
test.js
var aGlobalVariable = 3;
console.log("Global variable before calling the function: "+aGlobalVariable);
tryToChangeGlobalVariable(aGlobalVariable);
console.log("Global variable after calling the function: "+aGlobalVariable);
function tryToChangeGlobalVariable(aGlobalVariable){
aGlobalVariable = 5;
}
The output are
Global variable before calling the function: 3
Global variable before calling the function: 3
The value of the aGlobalVariable is not changed, because parameters are local variables. Inside the function tryToChangeGlobalVariable, aGlobalVariable is actually a local variable, it gets the value from the global variable with the same name, but it would not effect the value of the global variable.
Node and Text Node
Objects in DOM are sometimes referred to as nodes. There are two kinds of node, element node which are equivalent to element object, and text node. Text node are very different from element node as it does not have the properties element node contains. Take a look at the following code snippet.
<html lang="en">
<head>
<title> My First JavaScript </title>
<script>
window.onload = init;
function init(){
var firstNode = document.getElementById("main").firstChild;
firstNode.style.backgroundColor = "blue";
}
</script>
</head>
<body>
<div id="main">
<p>This is not the first child node of div main</p>
</div>
</body>
</html>
If you run this code, you will get an typeError
TypeError: Cannot set property 'backgroundColor' of undefined
That's because the first child within the div main is not the p tag object. Then what is the first child of the div main? The answer is text node. Look at the whites spaces and new line before the the end tag of div and the start tag of p. They are stored as text node within DOM. These text nodes are just like element objects, but they don't have some of the properties element objects have. You need to avoid getting the text node when you are actually trying to get an element node.
Methods & Properties Used to Manipulate DOM
Properties
childNodes - store all the child nodes
firstChild - store the first child node
parentNode - store the parent node
Methods
appendChild() - append a node
removeChild() - remove a node
querySelector() - return the first element object specified in the argument, the argument is very similar to how css locate the object in DOM
querySelectorAll() - return all the element objects that match the argument
