SlideShare a Scribd company logo
INTRODUCTION TO
JAVASCRIPT
Client Side Scripting
2
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
10
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
MORE JAVASCRIPT
SYNTAX
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: <!-- comment -->
⌾ 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
Ad

More Related Content

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

Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Javascript Intoduction notes and practical.pptx
Javascript Intoduction notes and practical.pptxJavascript Intoduction notes and practical.pptx
Javascript Intoduction notes and practical.pptx
BursunaDebruzzRaphae
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
Núcleo de Electrónica e Informática da Universidade do Algarve
 
Intoduction Javascript notes and practical.pptx
Intoduction Javascript notes and practical.pptxIntoduction Javascript notes and practical.pptx
Intoduction Javascript notes and practical.pptx
BursunaDebruzzRaphae
 
Java script
Java scriptJava script
Java script
Gourishankar R Pujar
 
Java script
Java scriptJava script
Java script
Fajar Baskoro
 
13-IntroJavascript.pptxIntroduction to java script
13-IntroJavascript.pptxIntroduction to java script13-IntroJavascript.pptxIntroduction to java script
13-IntroJavascript.pptxIntroduction to java script
gdckviksitbharat
 
Learning space presentation1 learn Java script
Learning space presentation1 learn Java scriptLearning space presentation1 learn Java script
Learning space presentation1 learn Java script
engmk83
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
suchita74
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
ssuserd695d1
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
ShilpaBhojne
 
Angular JS2 Training Session #1
Angular JS2 Training Session #1Angular JS2 Training Session #1
Angular JS2 Training Session #1
Paras Mendiratta
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
Unit 2.4
Unit 2.4Unit 2.4
Unit 2.4
Abhishek Kesharwani
 
wp-UNIT_III.pptx
wp-UNIT_III.pptxwp-UNIT_III.pptx
wp-UNIT_III.pptx
GANDHAMKUMAR2
 
HNDIT1022 Week 08, 09 10 Theory web .pptx
HNDIT1022 Week 08, 09  10 Theory web .pptxHNDIT1022 Week 08, 09  10 Theory web .pptx
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
php-mysql-tutorial-part-3
php-mysql-tutorial-part-3php-mysql-tutorial-part-3
php-mysql-tutorial-part-3
tutorialsruby
 
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
tutorialsruby
 
Javascript Intoduction notes and practical.pptx
Javascript Intoduction notes and practical.pptxJavascript Intoduction notes and practical.pptx
Javascript Intoduction notes and practical.pptx
BursunaDebruzzRaphae
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
Intoduction Javascript notes and practical.pptx
Intoduction Javascript notes and practical.pptxIntoduction Javascript notes and practical.pptx
Intoduction Javascript notes and practical.pptx
BursunaDebruzzRaphae
 
13-IntroJavascript.pptxIntroduction to java script
13-IntroJavascript.pptxIntroduction to java script13-IntroJavascript.pptxIntroduction to java script
13-IntroJavascript.pptxIntroduction to java script
gdckviksitbharat
 
Learning space presentation1 learn Java script
Learning space presentation1 learn Java scriptLearning space presentation1 learn Java script
Learning space presentation1 learn Java script
engmk83
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
suchita74
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
ssuserd695d1
 
13-IntroJavascript.pptx
13-IntroJavascript.pptx13-IntroJavascript.pptx
13-IntroJavascript.pptx
ShilpaBhojne
 
Angular JS2 Training Session #1
Angular JS2 Training Session #1Angular JS2 Training Session #1
Angular JS2 Training Session #1
Paras Mendiratta
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
HNDIT1022 Week 08, 09 10 Theory web .pptx
HNDIT1022 Week 08, 09  10 Theory web .pptxHNDIT1022 Week 08, 09  10 Theory web .pptx
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
php-mysql-tutorial-part-3
php-mysql-tutorial-part-3php-mysql-tutorial-part-3
php-mysql-tutorial-part-3
tutorialsruby
 
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
&lt;b>PHP&lt;/b>/MySQL &lt;b>Tutorial&lt;/b> webmonkey/programming/
tutorialsruby
 

More from ArjayBalberan1 (20)

PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdfPPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
ArjayBalberan1
 
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdfPPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
ArjayBalberan1
 
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptxLESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
ArjayBalberan1
 
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptxLESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptxAUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptxAUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata8Chapter7.pptx
AUTOMATA AUTOMATA Automata8Chapter7.pptxAUTOMATA AUTOMATA Automata8Chapter7.pptx
AUTOMATA AUTOMATA Automata8Chapter7.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptxAUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptxAUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata5Chapter4.pptx
AUTOMATA AUTOMATA Automata5Chapter4.pptxAUTOMATA AUTOMATA Automata5Chapter4.pptx
AUTOMATA AUTOMATA Automata5Chapter4.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata4Chapter3.pptx
AUTOMATA AUTOMATA Automata4Chapter3.pptxAUTOMATA AUTOMATA Automata4Chapter3.pptx
AUTOMATA AUTOMATA Automata4Chapter3.pptx
ArjayBalberan1
 
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptxAUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
ArjayBalberan1
 
automata theory and formal languages Automata2Chapter1.pptx
automata theory and formal languages Automata2Chapter1.pptxautomata theory and formal languages Automata2Chapter1.pptx
automata theory and formal languages Automata2Chapter1.pptx
ArjayBalberan1
 
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptxGroup-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
ArjayBalberan1
 
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptxMYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
ArjayBalberan1
 
Introduction to Algorithms Introduction to Algorithms.pptx
Introduction to Algorithms Introduction to Algorithms.pptxIntroduction to Algorithms Introduction to Algorithms.pptx
Introduction to Algorithms Introduction to Algorithms.pptx
ArjayBalberan1
 
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
MYSQL DATABASE MYSQL DATABASEGroup-1.pptxMYSQL DATABASE MYSQL DATABASEGroup-1.pptx
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
ArjayBalberan1
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
Rizals-Family-Childhood-Early-Education.pptx
Rizals-Family-Childhood-Early-Education.pptxRizals-Family-Childhood-Early-Education.pptx
Rizals-Family-Childhood-Early-Education.pptx
ArjayBalberan1
 
MYSQL DATABASE Operating System Part2 (1).pptx
MYSQL DATABASE Operating System Part2 (1).pptxMYSQL DATABASE Operating System Part2 (1).pptx
MYSQL DATABASE Operating System Part2 (1).pptx
ArjayBalberan1
 
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdfPPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
ArjayBalberan1
 
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdfPPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
ArjayBalberan1
 
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptxLESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
ArjayBalberan1
 
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptxLESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptxAUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptxAUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata8Chapter7.pptx
AUTOMATA AUTOMATA Automata8Chapter7.pptxAUTOMATA AUTOMATA Automata8Chapter7.pptx
AUTOMATA AUTOMATA Automata8Chapter7.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptxAUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptxAUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata5Chapter4.pptx
AUTOMATA AUTOMATA Automata5Chapter4.pptxAUTOMATA AUTOMATA Automata5Chapter4.pptx
AUTOMATA AUTOMATA Automata5Chapter4.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata4Chapter3.pptx
AUTOMATA AUTOMATA Automata4Chapter3.pptxAUTOMATA AUTOMATA Automata4Chapter3.pptx
AUTOMATA AUTOMATA Automata4Chapter3.pptx
ArjayBalberan1
 
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptxAUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
ArjayBalberan1
 
automata theory and formal languages Automata2Chapter1.pptx
automata theory and formal languages Automata2Chapter1.pptxautomata theory and formal languages Automata2Chapter1.pptx
automata theory and formal languages Automata2Chapter1.pptx
ArjayBalberan1
 
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptxGroup-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
ArjayBalberan1
 
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptxMYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
ArjayBalberan1
 
Introduction to Algorithms Introduction to Algorithms.pptx
Introduction to Algorithms Introduction to Algorithms.pptxIntroduction to Algorithms Introduction to Algorithms.pptx
Introduction to Algorithms Introduction to Algorithms.pptx
ArjayBalberan1
 
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
MYSQL DATABASE MYSQL DATABASEGroup-1.pptxMYSQL DATABASE MYSQL DATABASEGroup-1.pptx
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
ArjayBalberan1
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
Rizals-Family-Childhood-Early-Education.pptx
Rizals-Family-Childhood-Early-Education.pptxRizals-Family-Childhood-Early-Education.pptx
Rizals-Family-Childhood-Early-Education.pptx
ArjayBalberan1
 
MYSQL DATABASE Operating System Part2 (1).pptx
MYSQL DATABASE Operating System Part2 (1).pptxMYSQL DATABASE Operating System Part2 (1).pptx
MYSQL DATABASE Operating System Part2 (1).pptx
ArjayBalberan1
 
Ad

Recently uploaded (20)

TrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token ListingTrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token Listing
Trs Labs
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
TrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token ListingTrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token Listing
Trs Labs
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Ad

MYSQL DATABASE INTRODUCTION TO JAVASCRIPT.pptx

  • 3. 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
  • 4. 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
  • 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
  • 11. 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
  • 12. 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
  • 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
  • 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.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
  • 17. 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
  • 18. 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
  • 20. 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
  • 21. Comments (same as Java) ⦿ 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: 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
  • 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 (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
  • 26. 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
  • 27. while loops (same as 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 ⦿ 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
  • 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 ⦿ 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
  • 33. THANKS! Any questions? You can find me at: ⦿ facebook.com/rjd.agustin ⦿ [email protected] 33