Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.063 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×