Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples

1,059 views

Published on

In this the part 1 of the series Javascript Tutorial for Beginners with Examples, you will learn the fundamental of Javascript & DOM. By the end of this tutorial, you will be able to grab the most important concepts of all Javascript and DOM. I start off with what is DOM, how to get element from DOM. And I move to Javascript language (if, else, switch, case, for, while, do while) and then the array. Then I will explain the functions with 3 types: normal function, anonymous function, and self-invoke function. Lastly, I teach the combination of JS and DOM.

Please find me at:
https://youtube.com/user/oumsaokosal
https://slideshare.net/oumsaokosal
https://facebook.com/kosalgeek
https://twitter.com/okosal
https://github.com/kosalgeek
https://kosalgeek.com


Oum Saokosal

Published in: Technology
  • Be the first to comment

Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples

  1. 1. Part 1 1
  2. 2. Where to find more about me? Oum Saokosal, M.Sc. in Info Sys, Jeonju Univ., S. Korea Dean of Fac. Computer Science, NPIC, Cambodia •https://youtube.com/user/oumsaokosal •https://slideshare.net/oumsaokosal •https://facebook.com/kosalgeek •https://twitter.com/okosal •https://kosalgeek.com 2
  3. 3. HTML <html> <head><title>Example</title></head> <body> <h1>Hello</h1> <label>Enter Your name</label> <input type="text" id="text1" name='txtName'> <input type="button" value="ok" id="button1"> <label id="name1"></label> </body> </html> 3
  4. 4. Document Object Model - DOM •window •document •document.title •document.body •document.scripts •document.links 4
  5. 5. DOM: Get Element? <label>Enter Your name</label> <input type="text" id="text1" name='txtName'> document.getElementById('text1') document.getElementsByName('txtName') document.getElementsByTagName('label') document.getElementsByClassName('main'); 5
  6. 6. Javascript<html> <head><title>Example</title> <script>window.alert('');</script> </head> <body> <h1>Hello</h1> <label>Enter Your name</label> <input type="text" id="text1" name='txtName'> <input type="button" value="ok" id="button1" onclick="alert('Hello JS')"> <label id="name1"></label> </body> </html> 6
  7. 7. JS Language var a = 1; alert(typeof(a)); if(a === '1'){ alert("equal value"); } else if(a == '1'){ alert("equal to"); } 7
  8. 8. JS Language === !== == != > >= < <= && || i++ ++i i-- --i += -= *= /= %= 8
  9. 9. JS Language if .. else switch case for while do .. while 9
  10. 10. JS Array var a = new Array(); a[0] = 3; a[1] = 5; var b = ['Apple', 'Ball', 'Cat']; b.push('Dog'); 10
  11. 11. JS Function function okClick(){ window.alert("Hello"); document.write("Here you are"); document.writeln("There you go"); console.log("See me in bottom"); } okClick(); 11
  12. 12. JS: Funny about Function var sum = function(a, b){ //anonymous function return a + b; } sum(5, 4); 12
  13. 13. JS: Self-Invoke Function <p>Below is the JS self-invoke function</p> <script> (function(name){ alert("Hello " + name); })('kosal'); </script> 13
  14. 14. JS: Event Listener Button: <input type="button" value="ok" onclick="okClick()"> Textbox: <input type="text" onchange="textChange()" onkeypress="this.onchange()" oninput="this.onchange()" onpaste="this.onchange()"> 14
  15. 15. JS + DOM <script> function okClick(){ var name1 = document.getElementById('name1'); name1.innerHTML = "Oum Saokosal"; name1.style.fontSize = "1.5em"; } </script> <input type="button" value="ok" onclick="okClick()"> <label id="name1"></label> 15
  16. 16. Get Options of <select> <select id="s1" onchange="choose()"> <option value="1">Apple</option> <option value="2">Banana</option> </select> function choose(){ var s1 = document.getElementById('s1'); var o1 = s1.options[s1.selectedIndex]; alert(o1.value + ", " + o1.innerHTML); } 16

×