Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
•
3 gostaram•1,485 visualizações
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
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (18)
Semelhante a Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
Semelhante a Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples (9)
Mais de OUM SAOKOSAL
Mais de OUM SAOKOSAL (20)
Último
Último (20)
Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
- 1. Part 1 1
- 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. 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. Document Object Model - DOM •window •document •document.title •document.body •document.scripts •document.links 4
- 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. 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. JS Language var a = 1; alert(typeof(a)); if(a === '1'){ alert("equal value"); } else if(a == '1'){ alert("equal to"); } 7
- 8. JS Language === !== == != > >= < <= && || i++ ++i i-- --i += -= *= /= %= 8
- 9. JS Language if .. else switch case for while do .. while 9
- 10. JS Array var a = new Array(); a[0] = 3; a[1] = 5; var b = ['Apple', 'Ball', 'Cat']; b.push('Dog'); 10
- 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. JS: Funny about Function var sum = function(a, b){ //anonymous function return a + b; } sum(5, 4); 12
- 13. JS: Self-Invoke Function <p>Below is the JS self-invoke function</p> <script> (function(name){ alert("Hello " + name); })('kosal'); </script> 13
- 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. 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. 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