Download as PDF, PPTX
![JS Array var a = new Array(); a[0] = 3; a[1] = 5; var b = ['Apple', 'Ball', 'Cat']; b.push('Dog'); 10](https://image.slidesharecdn.com/javascriptanddompart1-160916025603/75/Javascript-DOM-Part-1-Javascript-Tutorial-for-Beginners-with-Examples-10-2048.jpg)
![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](https://image.slidesharecdn.com/javascriptanddompart1-160916025603/75/Javascript-DOM-Part-1-Javascript-Tutorial-for-Beginners-with-Examples-16-2048.jpg)
Uploaded byOUM SAOKOSAL
Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
The document outlines the professional background and online presence of Oum Saokosal, who holds an M.Sc. in Information Systems and is a Dean of Computer Science at NPIC in Cambodia. It includes HTML and JavaScript examples demonstrating concepts such as DOM manipulation, event handling, and functions. Key topics discussed include JavaScript syntax, arrays, and functions, along with practical code snippets for better understanding.
Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
- 1.
- 2. Where to findmore 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> <inputtype="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>EnterYour 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> <inputtype="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("Hereyou are"); document.writeln("There you go"); console.log("See me in bottom"); } okClick(); 11
- 12. JS: Funny aboutFunction var sum = function(a, b){ //anonymous function return a + b; } sum(5, 4); 12
- 13. JS: Self-Invoke Function <p>Belowis the JS self-invoke function</p> <script> (function(name){ alert("Hello " + name); })('kosal'); </script> 13
- 14. JS: Event Listener Button: <inputtype="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> functionokClick(){ 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