Scribd
Upload
1 views

13-IntroJavascript

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

13-IntroJavascript

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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