2016/11/10

Notes for JavaScript Tutorial for Beginners - Section 1 to 35

Here I put my notes for section 1 to 35 of the "JavaScript Tutorial for Beginners" on Youtube.

Typical HTML Template

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>

<html>
 
<head> 
<script>


</script>
</head>

<body>

</body>

</html>


--------------------------------------------------------------------------------------------------------------------------
Screen Output

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>

<html>
 
<head> 
<script>
var t_num = 123
var t_text = "This is a test message!!"

document.write("Hello World");

alert(t_num+t_text);
</script>
</head>

<body>

</body>

</html>

One interesting thing to note is that even though "alert(t_num+t_text);" is placed AFTER "document.write("Hello World");", when the codes are executed, the alert box appears first on the screen.

 The "Hello World" message appears AFTER the alert box is acknowledged.

Additional Reference: JavaScript Output - http://www.w3schools.com/js/js_output.asp
--------------------------------------------------------------------------------------------------------------------------
Using External JavaScript File

Create a file called "external.js" and put the below line of code in it and save it.

document.write("This is from an external js file");


Create another file call "template.html" (or, index.html, etc.), populate it with the following code and save it to the same folder where the "external.js" file is stored.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>

<html>
 
<head> 
<script src = "external.js">

</script>
</head>

<body>

</body>

</html>
--------------------------------------------------------------------------------------------------------------------------
Evoking External JavaScript Function

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>

<html>
 
<head> 
<script src = "external.js">

</script>
</head>

<body>

</body>

</html>

"external.js"

1
2
3
4
5
6
function saysomething() {

 document.write("This is from an external js file");
}

saysomething();
--------------------------------------------------------------------------------------------------------------------------
Function & Return

"template.html"

Same as the one for "Evoking External JavaScript Function"

"external.js"

1
2
3
4
5
6
7
8
function add(x, y) {

 result = x * y;
 return result;
}

var theResult = add (6, 5);
document.write(theResult);

Result

--------------------------------------------------------------------------------------------------------------------------
Global & Local Variable

"template.html"

Same as the one for "Evoking External JavaScript Function"

"external.js"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var name = "John "

function printName() {

 var name1 = "Sherry"; // It's a local variable
 name2 = "Tom"         // It's a global variable
 
}

printName();

var name3 = name + name2

document.write(name3);

Result

--------------------------------------------------------------------------------------------------------------------------
Objects

"template.html"

Same as the one for "Evoking External JavaScript Function"

"external.js"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var orc = {
 color:"green",
 height:5,
 weight:180,
 yell:function(){
  document.write("Orcs are cute!");
 }
};

orc.yell();

Note, functions inside objects are called "methods".

Result

--------------------------------------------------------------------------------------------------------------------------
Object - Add / Remove Property

**Object contains methods and properties**

"template.html"

Same as the one for "Evoking External JavaScript Function"

"external.js"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var orc = {
 hair:"green",
 age:26,
 stomachFull: false
};

orc.hair = "purple";
orc.hair = 1;  //Change the data type from string to number
orc.hair2 = "red"; //Add a new property to the object
delete orc.hair2; //Remove a property

document.write(orc.hair2);

Result

--------------------------------------------------------------------------------------------------------------------------
String Object

"template.html"

Same as the one for "Evoking External JavaScript Function"

"external.js"

1
2
3
4
5
6
7
8
9
var hello = "Hello how are you doing?";

//hello = hello.toUpperCase(); //convert to upper case
//hello = hello.length;     //get string length
//hello = hello.charAt(4);    //get "o" from the string
hello = hello.replace("doing", "today");
hello = hello.bold();

document.write(hello);

Reference:
JavaScript String Reference - http://www.w3schools.com/jsref/jsref_obj_string.asp
--------------------------------------------------------------------------------------------------------------------------

JavaScript Math Object - http://www.w3schools.com/js/js_math.asp

JavaScript Date Object - http://www.w3schools.com/js/js_date_methods.asp

--------------------------------------------------------------------------------------------------------------------------

DOM (Document Object Model)

Reference:
JavaScript Tutorial for Beginners - 25 - Document Object Model
https://youtu.be/sWUT97Ne7V4?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl


Element Node, Attribute Note, Text Node.


========================================================================
Source: https://youtu.be/ChLd2yFp-lA?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl

Sample Code - getElementById()

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p id="para1"> Some text for this tutorial </p>
 <button onclick = "changeStyle()">Submit</button>
</body>
</html>

"external.js"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function changeStyle() {
 var text = document.getElementById("para1").style.color = "blue";
 
 //the 2 lines of code below have the same effect as the one above
 //var text = document.getElementById("para1");
 //text.style.color = "blue";
 
 //The code below changes the text color, but the element id is not stored in a variable
 //document.getElementById("para1").style.color = "blue";
}

Reference:

HTML DOM Style Object - http://www.w3schools.com/jsref/dom_obj_style.asp
CSS Properties - http://www.w3schools.com/cssref/default.asp

========================================================================

Sample Code - getElementsByTagName()

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p id="para1"> Some text for this tutorial </p>
 <p id="para2"> Some text for this tutorial </p>
 <p id="para3"> Some text for this tutorial </p>
 <p id="para4"> Some text for this tutorial </p>
 
 <button onclick = "changeStyle()">Hit submit to change all the text</button>
</body>
</html>

"external.js"

1
2
3
4
5
6
7
function changeStyle() {
 var paragraph = document.getElementsByTagName("p");
 //var changeParaText = paragraph[1].style.fontStyle = "italic";
 for (var i = 0; i < paragraph.length; i++) {
  paragraph[i].style.fontStyle = "italic";
 }
}

Note,
1. A node list of all the paragraph ("p") is created after document.getElementsByTagName("p") is executed. The node list is stored in the variable "paragraph".
2. The node list is accessed using index (paragraph[index].style.fontStyle = "italic";),  paragraph.style.fontStyle = "italic"; won't work.

Reference:

JavaScript Tutorial for Beginners - 27 - getElementsByTagName method
https://youtu.be/SwMgOMfelC8?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl

========================================================================

Sample Code - getElementsByClassName()

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p class="para"> Some text for this tutorial </p>
 <p class="para"> Some text for this tutorial </p>
 
 <button onclick = "changeStyle()">Hit submit to change all the text</button>
</body>
</html>

"external.js"

 
1
2
3
4
5
6
7
function changeStyle() {
 var paragraph = document.getElementsByClassName("para");

 for (var i = 0; i < paragraph.length; i++) {
  paragraph[i].style.color = "red";
 }
}

========================================================================

Replace content using innerHTML

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p class="para"> Old Text 1 </p>
 <p class="para"> Old Text 2 </p>
 <p class="para"> Old Text 3 </p>
 <p class="para"> Old Text 4 </p>
 
 <button onclick = "changeStyle()">Hit submit for new texts</button>
</body>
</html>

"external.js"

 
1
2
3
4
5
6
7
8
function changeStyle() {
 var paragraph = document.getElementsByClassName("para");

 for (var i = 0; i < paragraph.length; i++) {
  var n = (i+1).toString();
  paragraph[i].innerHTML = "New Text " + n;
 }
}

Result


========================================================================

Reading content using innerHTML

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p class="para"> Hello there </p>
 <p class="para"> from the Moon </p>
 <p class="para">  </p>
 
 <button onclick = "changeStyle()">Hit submit to combine these words</button>
</body>
</html>

"external.js"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function changeStyle() {
    var paragraph = document.getElementsByClassName("para");
    var n = "";
    var p_length = paragraph.length; //p_length = 3
 
 for (var i = 0; i < (p_length-1); i++) {
   n = n + paragraph[i].innerHTML;
 }
 
 paragraph[p_length-1].innerHTML = n;
}

Result



Reference: https://youtu.be/dWdVc-KWXJ4?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
========================================================================
Changing an image

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <image src="pic1.jpg" id = "image"/><br></br>
 
 <button onclick = "changeStyle()">Hit button to change image</button>
</body>
</html>

"external.js"

1
2
3
function changeStyle() {
 document.getElementById("image").src="pic2.jpg";
}

Note,
To run this program, put "pic1.jpg" and "pic2.jpg" in the same folder where the "template.html" and "external.js" are located.
--------------------------------------------------------------------------------------------------------------------------
Events

Sample Code - onmouseover / onmouseout - change background color

"template.html"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <p id="para" onmouseover = "changeBackground()" onmouseout = "backToNormal()"> Some text for this tutorial </p>
 
</body>
</html>

"external.js"

1
2
3
4
5
6
7
function changeBackground() {
 document.getElementById("para").style.backgroundColor = "red";
}

function backToNormal() {
 document.getElementById("para").style.backgroundColor = "";
}

========================================================================

Sample Code - onmouseover / onmouseout - change image

"template.html"

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head> 
 <script src = "external.js"></script>
</head>
<body>
 <img src = "pic1.jpg" id="image" onmouseover = "newPicture()" onmouseout = "oldPicture()">
</body>
</html>

"external.js"

1
2
3
4
5
6
7
function newPicture() {
 document.getElementById("image").src="pic2.jpg";
}

function oldPicture() {
 document.getElementById("image").src="pic1.jpg";
}

Source: https://youtu.be/0o4HQ_TYP9A?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
Posted by at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)