Scribd
Upload
1 views

13-IntroJavascript

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

13-IntroJavascript

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

1 Intro to Javascript

CS380
What is Javascript?
2

 a lightweight programming language


("scripting language")
 used to make web pages interactive
 insert dynamic text into HTML (ex: user
name)
 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)
CS380
What is Javascript?
3

 a web standard (but not supported


identically by all browsers)
 NOT related to Java other than by name
and some syntactic similarities

CS380
Linking to a JavaScript file:
4
script
<script src="filename" type="text/javascript"></script>

HTML
 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

CS380
Event-driven programming
5

 split breaks apart a string into an array


using a delimiter
 can also be used with regular expressions
(seen later)
 join merges an array into a single string,
placing a delimiter between them
CS380
A JavaScript statement:
6
alert
alert("IE6 detected. Suck-mode enabled.");
JS

 a JS command that pops up a dialog box


with a message
CS380
JavaScript functions
7
function name() {
statement ;
statement ;
...
statement ;
} JS
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
 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


CS380
Document Object Model
8
(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
Variables
9

var name = expression; JS

var clientName = "Connie Client";


var age = 32;
var weight = 127.4; JS
 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
CS380
typeof
Comments (same as Java)
10

// single-line comment
/* multi-line comment */
JS

 identical to Java's comment syntax


 recall: 4 comment syntaxes
 HTML: <!-- comment -->
 CSS/JS/PHP: /* comment */
 Java/JS/PHP: // comment
 PHP: # comment

CS380
Logical operators
11

 > < >= <= && || ! == != === !==


 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
CS380
if/else statement (same as
12
Java)
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
 identical structure to Java's if/else
statement
 JavaScript allows almost anything as a
condition

CS380
for loop (same as Java)
13

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

CS380
while loops (same as Java)
14

while (condition) {
statements;
} JS

do {
statements;
} while (condition);
JS

 break and continue keywords also


behave as in Java

CS380
Popup boxes
15

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

CS380

You might also like