Javascript: A sneak preview
•
0 likes•45 views
A sneak preview presentation of JavaScript made for those who would like to know just the basics of the language.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Javascript: A sneak preview
Similar to Javascript: A sneak preview (20)
Recently uploaded
Recently uploaded (20)
Javascript: A sneak preview
- 1. JavaScript A SNEAK PREVIEW PRESENTATION </script>
- 2. Why we need JavaScript • HTML to define the content of web pages • CSS to specify the layout of web pages • JavaScript to program the behavior of web pages
- 3. JavaScript is nice because • Adds interactivity (event handling) • Manipulates page contents dynamically • Does real time validations • No reloads – All is executed on browser • Makes asynchronous server calls • Performs calculations on the spot • Controls Browser, Window, Keyboard, Mouse, Cookies.. • Can accept third party libraries
- 4. Where to place JavaScript <html> <body> … <script language="javascript" type="text/javascript"> … </script> </body> </html> <script type="text/javascript" src="filename.js" ></script>
- 5. Variables • No declaration of types • Name cannot start with numbers • JavaScript is case sensitive • myVariable is a different variable to myvariable The semicolon at the end of the line is not mandatory var myVariable; myVariable = 'Bob'; var myVariable = 'Bob'; myVariable = 'Steve';
- 6. Data Types Variable Example String var myVariable = 'Bob'; Number var myVariable = 10; Boolean var myVariable = true; Array var myVariable = [1,'Bob','Steve',10]; Refer to each member of the array like this: myVariable[0], myVariable[1], etc. Object var myVariable = document.querySelector('h1'); All of the above examples too.
- 7. Comments /* Everything in between is a comment */ // This is also a comment
- 8. Operators Operator Symbol(s) Example add/concatenation + 6 + 9; "Hello " + "world!"; subtract, multiply, divide -, *, / 9 - 3; 8 * 2; 9 / 3; assignment operator = var myVariable = 'Bob'; Identity operator === var myVariable = 3; myVariable === 4; negation, not equal !, !== var myVariable = 3; myVariable !== 3;
- 9. Conditionals Operator Name Example === Strict equality 5 === 2 + 4 !== Strict-non-equality 5 !== 2 + 3 < Less than 10 < 6 > Greater than 10 > 20 <= Less than or equal to 3 <= 2 >= Greater than or equal to 5 >= 4
- 10. Conditionals var iceCream = 'chocolate'; if (iceCream === 'chocolate') { alert('Yay, I love chocolate ice cream!'); } else { alert('Awwww, but chocolate is my favorite...'); }
- 11. Loops • For • While • Do.. While for (i = 0; i < 10; i++) { text += "The number is " + I; } while (i < 10) { text += "The number is " + i; i++; } do { text += "The number is " + i; i++; } while (i < 10);
- 12. Functions • Code reusal • No parameter type • No return type • Can pass any type in invocation function multiply(num1,num2) { var result = num1 * num2; return result; } var x = multiply(4,7); x = multiply(20,20); x = multiply(0.5,3);
- 13. Functions • Special functions • alert(“Hi”); • confirm(“Are you gonna eat that?”); • prompt(“Enter your age [male only]:”); • getElementById(“elementId”); • String functions • split() • Array functions • find()
- 14. Events • “things” that happen to HTML elements • JavaScript react to these events • User or browser actions • Button clicked (onclick) • Key pressed (onkeydown) • Mouse over some element (onmouseover) • Page loaded (onload) • Event handlers are JavaScript functions
- 15. Events <html> <body> <script type="text/javascript"> function changeText(){ document.getElementById('demo').innerHTML = 'Hello JavaScript!'; } </script> <h1>What Can JavaScript Do?</h1> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='changeText()'>Click Me!</button> </body> </html>
- 16. That’s all folks! VISIT Https://www.W3schools.Com/js/default.Asp FOR FURTHER ENTERTAINMENT