Download to read offline
![Arrays 29 var name = []; // empty array var name = [value, value, ..., value]; // pre-filled name[index] = value; // store element JS var ducks = ["Huey", "Dewey", "Louie"]; var stooges = []; // stooges.length is 0 stooges[0] = "Larry"; // stooges.length is 1 stooges[1] = "Moe"; // stooges.length is 2 stooges[4] = "Curly"; // stooges.length is 5 stooges[4] = "Shemp"; // stooges.length is 5 JS](https://image.slidesharecdn.com/introductiontojavascript-240319233112-a36992eb/75/MYSQL-DATABASE-INTRODUCTION-TO-JAVASCRIPT-pptx-29-2048.jpg)
![Array methods 30 ⦿ array serves as many data structures: list, queue, stack, ... ⦿ methods: concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift ⌾ push and pop add / remove from back ⌾ unshift and shift add / remove from front ⌾ shift and pop return the element that is removed var a = ["Stef", "Jason"]; // Stef, Jason a.push("Brian"); // Stef, Jason, Brian a.unshift("Kelly"); // Kelly, Stef, Jason, Brian a.pop(); // Kelly, Stef, Jason a.shift(); // Stef, Jason a.sort(); // Jason, Stef JS](https://image.slidesharecdn.com/introductiontojavascript-240319233112-a36992eb/75/MYSQL-DATABASE-INTRODUCTION-TO-JAVASCRIPT-pptx-30-2048.jpg)
MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx
- 1.
- 2.
- 3. Why use client-sideprogramming? PHP already allows us to create dynamic web pages. Why also use client- side scripting? ⦿ client-side scripting (JavaScript) benefits: ⌾ usability: can modify a page without having to post back to the server (faster UI) ⌾ efficiency: can make small, quick changes to page without waiting for server ⌾ event-driven: can respond to user actions like clicks and key presses 3
- 4. Why use client-sideprogramming? ⦿ server-side programming (PHP) benefits: ⌾ security: has access to server's private data; client can't see source code ⌾ compatibility: not subject to browser compatibility issues ⌾ power: can write files, open connections to servers, connect to databases, ... 4
- 5. What is JavaScript? ⦿a lightweight programming language ("scripting language") ⌾ used to make web pages interactive ⌾ insert dynamic text into HTML (ex: username) ⌾ react to events (ex: page load user click) ⌾ get information about a user's computer (ex: browser type) ⌾ perform calculations on user's computer (ex: form validation) 5
- 6. What is JavaScript? ⦿a web standard (but not supported identically by all browsers) ⦿ NOT related to Java other than by name and some syntactic similarities 6
- 7. JavaScript vs Java ⦿interpreted, not compiled ⦿ more relaxed syntax and rules ⌾ fewer and "looser" data types ⌾ variables don't need to be declared ⌾ errors often silent (few exceptions) ⦿ key construct is the function rather than the class ⌾ "first-class" functions are used in many situations ⦿ contained within a web page and integrates with its HTML/CSS content 7
- 8. JavaScript vs. PHP ⦿similarities: ⌾ both are interpreted, not compiled ⌾ both are relaxed about syntax, rules, and types ⌾ both are case-sensitive ⌾ both have built-in regular expressions for powerful text processing 8
- 9. JavaScript vs. PHP ⦿differences: ⌾ JS is more object-oriented: noun.verb(), less procedural: verb(noun) ⌾ JS focuses on user interfaces and interacting with a document; PHP is geared toward HTML output and file/form processing ⌾ JS code runs on the client's browser; PHP code runs on the web server 9
- 10.
- 11. Event-driven programming ⦿ youare used to programs start with a main method (or implicit main like in PHP) ⦿ JavaScript programs instead wait for user actions called events and respond to them ⦿ event-driven programming: writing programs driven by user events 11
- 12. Event handlers ⦿ JavaScriptfunctions can be set as event handlers ⌾ when you interact with the element, the function will execute ⦿ onclick is just one of many event HTML attributes we'll use ⦿ but popping up an alert window is disruptive and annoying ⌾ A better user experience would be to have the message appear on the page... 12 <element attributes onclick="function();">... HTML <button onclick="myFunction();">Click me!</button> HTML
- 13. Document Object Model(DOM) ⦿ most JS code manipulates elements on an HTML page ⦿ we can examine elements' state ⌾ e.g. see whether a box is checked ⦿ we can change state ⌾ e.g. insert some new text into a div ⦿ we can change styles ⌾ e.g. make a paragraph red 13
- 14. Document Object Model(DOM) 14
- 15. Accessing elements: document.getElementById 15 var name= document.getElementById("id"); JS <button onclick="changeText();">Click me!</button> <span id="output">replace me</span> <input id="textbox" type="text" /> HTML function changeText() { var span = document.getElementById("output"); var textBox = document.getElementById("textbox"); textbox.style.color = "red"; } JS
- 16. Accessing elements: document.getElementById ⦿ document.getElementByIdreturns the DOM object for an element with a given id ⦿ can change the text inside most elements by setting the innerHTML property ⦿ can change the text in form controls by setting the value property 16
- 17. Changing element style: element.style 17 AttributeProperty or style object color color padding padding background-color backgroundColor border-top-width borderTopWidth Font size fontSize Font famiy fontFamily
- 18. Linking to aJavaScript file: script ⦿ script tag should be placed in HTML page's head ⦿ script code is stored in a separate .js file ⦿ JS code can be placed directly in the HTML file's body or head (like CSS) ⌾ but this is bad style (should separate content, presentation, and behavior 18 <script src="filename" type="text/javascript"></script> HTML
- 19.
- 20. Variables ⦿ variables aredeclared with the var keyword (case sensitive) ⦿ types are not specified, but JS does have types ("loosely typed") ⌾ Number, Boolean, String, Array, Object, Function, Null, Undefined ⌾ can find out a variable's type by calling typeof 20 var name = expression; JS var clientName = "Connie Client"; var age = 32; var weight = 127.4; JS
- 21. Comments (same asJava) ⦿ identical to Java's comment syntax ⦿ recall: 4 comment syntaxes ⌾ HTML: <!-- comment --> ⌾ CSS/JS/PHP: /* comment */ ⌾ Java/JS/PHP: // comment ⌾ PHP: # comment 21 // single-line comment /* multi-line comment */ JS
- 22. Math object ⦿ methods:abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan ⦿ properties: E, PI 22 var rand1to10 = Math.floor(Math.random() * 10 + 1); var three = Math.floor(Math.PI); JS
- 23. Special values: nulland undefined ⦿ undefined : has not been declared, does not exist ⦿ null : exists, but was specifically assigned an empty or null value ⦿ Why does JavaScript have both? 23 var ned = null; var benson = 9; // at this point in the code, // ned is null // benson's 9 // caroline is undefined JS
- 24. Logical operators ⦿ >< >= <= && || ! == != === !== ⦿ most logical operators automatically convert types: ⌾ 5 < "7" is true ⌾ 42 == 42.0 is true ⌾ "5.0" == 5 is true ⦿ === and !== are strict equality tests; checks both type and value ⌾ "5.0" === 5 is false 24
- 25. if/else statement (sameas Java) ⦿ identical structure to Java's if/else statement ⦿ JavaScript allows almost anything as a condition 25 if (condition) { statements; } else if (condition) { statements; } else { statements; } JS
- 26. for loop (sameas Java) 26 var sum = 0; for (var i = 0; i < 100; i++) { sum = sum + i; } JS var s1 = "hello"; var s2 = ""; for (var i = 0; i < s.length; i++) { s2 += s1.charAt(i) + s1.charAt(i); } // s2 stores "hheelllloo" JS
- 27. while loops (sameas Java) 27 ⦿ break and continue keywords also behave as in Java while (condition) { statements; } JS do { statements; } while (condition); JS
- 28. Popup boxes 28 alert("message"); //message confirm("message"); // returns true or false prompt("message"); // returns user input string JS
- 29. Arrays 29 var name =[]; // empty array var name = [value, value, ..., value]; // pre-filled name[index] = value; // store element JS var ducks = ["Huey", "Dewey", "Louie"]; var stooges = []; // stooges.length is 0 stooges[0] = "Larry"; // stooges.length is 1 stooges[1] = "Moe"; // stooges.length is 2 stooges[4] = "Curly"; // stooges.length is 5 stooges[4] = "Shemp"; // stooges.length is 5 JS
- 30. Array methods 30 ⦿ arrayserves as many data structures: list, queue, stack, ... ⦿ methods: concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift ⌾ push and pop add / remove from back ⌾ unshift and shift add / remove from front ⌾ shift and pop return the element that is removed var a = ["Stef", "Jason"]; // Stef, Jason a.push("Brian"); // Stef, Jason, Brian a.unshift("Kelly"); // Kelly, Stef, Jason, Brian a.pop(); // Kelly, Stef, Jason a.shift(); // Stef, Jason a.sort(); // Jason, Stef JS
- 31. String type 31 ⦿ methods:charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase ⌾ charAt returns a one-letter String (there is no char type) ⦿ length property (not a method as in Java) ⦿ Strings can be specified with "" or '' ⦿ concatenation with + : ⌾ 1 + 1 is 2, but "1" + 1 is "11" var s = "Connie Client"; var fName = s.substring(0, s.indexOf(" ")); // "Connie" var len = s.length; // 13 var s2 = 'Melvin Merchant'; JS
- 32. JavaScript functions ⦿ theabove could be the contents of example.js linked to our HTML page ⦿ statements placed into functions can be evaluated in response to user events 32 function name() { statement ; statement ; ... statement ; } JS function myFunction() { alert("Hello!"); alert("How are you?"); } JS
- 33. THANKS! Any questions? You canfind me at: ⦿ facebook.com/rjd.agustin ⦿ rjdagustin@tsu.edu.ph 33