MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx

Why use client-side programming?
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

Why use client-side programming?
⦿ 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

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

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

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

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

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

Event-driven programming
⦿ you are 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

Event handlers
⦿ JavaScript functions 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

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

Document Object Model (DOM)
14

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

Accessing elements:
document.getElementById
⦿ document.getElementById returns 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

Changing element style:
element.style
17
Attribute Property or style object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily

Linking to a JavaScript 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

Variables
⦿ variables are declared 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

Comments (same as Java)
⦿ identical to Java's comment syntax
⦿ recall: 4 comment syntaxes
⌾ HTML: 
⌾ CSS/JS/PHP: /* comment */
⌾ Java/JS/PHP: // comment
⌾ PHP: # comment
21
// single-line comment
/* multi-line comment */ JS

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

Special values: null and 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

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

if/else statement (same as 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

for loop (same as 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

while loops (same as Java)
27
⦿ break and continue keywords also behave as in Java
while (condition) {
statements;
} JS
do {
statements;
} while (condition); JS

Popup boxes
28
alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string JS

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

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

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

JavaScript functions
⦿ the above 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

THANKS!
Any questions?
You can find me at:
⦿ facebook.com/rjd.agustin
⦿ rjdagustin@tsu.edu.ph
33

MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx

More Related Content

Similar to MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx (20)

More from ArjayBalberan1 (20)

Recently uploaded (20)

MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx