IT – som værktøj

IT – som værktøj Bent Thomsen Institut for Datalogi Aalborg Universitet

Introduction to JavaScript Bent Thomsen

What is a web script? • A program embedded in an HTML document • Scripts can be found multiple places in a document • There are multiple scripting languages • VBScript (Microsoft proprietary) interpreted only in IE unless a plug-in is installed • JavaScript – far more common and universally interpreted in all browsers • Scripts make HTML into DHTML (dynamic HTML)

What is JavaScript? • A programming language to add interactivity to your Web page. • A general purpose language that your browser will compile and execute for you In the beginning there was HTML, and the folks at Netscape saw that it was good. But it was static; interactivity was needed. People wanted to enter information and get answers back. So the Netscape folks decided that HTML should have a helpmate, JavaScript. Unlike other programming languages, JavaScript was built into the browser and worked alongside HTML.

How does a script work? • A browser is a very complex, multi-function program • Using HTML syntax, the browser locates script statements inside the document • It hands the statements to a script interpreter that causes the browser to do what the statements (commands) tell it to do.

Communications facilities JavaScript Interpreter What is JavaScript It is NOT Java or a dialect. It is a completely different, interpreted language intended to control the browser, typically to add dynamics and animation to HTML. One of many programming languages executed (possibly simultaneously) in the browser! Browser VBScript Interpreter (compiler) Control / HTML Java Virtual Machine (JVM) applet HTML Interpreter (display formatting) script script Control / HTML HTML page

JavaScript is Not Java • Java is a full-featured programming language developed by Sun Microsystems. • Java's main use is to create applets, small programs that download over the Internet and run inside Web Browsers • Java applets are embedded in your Web page using the <APPLET> tag.

Identifying JavaScript in an HTML page • Scripts can be found multiple places in a document • Scripts are placed between <SCRIPT>…</SCRIPT> tags. • The <SCRIPT> tag can be attributed with language: <SCRIPT LANGUAGE=“JavaScript”> • Script containers <SCRIPT>…</SCRIPT> can be found: • In the <HEAD> of the document in the <SCRIPT> </SCRIPT> container • Anyplace in the <BODY> of the document in a script container • In-line code in various tags throughout the document • Usually associated with tags that support events such as <IMG> and form elements • The code describes what to do for a given event • Line(s) of script in quotes following the event name as an attribute of the tag

Hiding Your Script • You can hide your JavaScript program from browsers that cannot support them. Use this syntax:<SCRIPT LANGUAGE=“JavaScript”></SCRIPT>

JavaScript Programs consists of • Values • Variables • Operators • Commands • Control Flow operations • Input/Output • Functions • Objects

Values JavaScript recognizes: • strings • numbers (integer and decimal) • boolean Null value assigned using keyword null x = 100 integer y = “200” string z = true boolean

Variables • A variable is a place in the computers memory where information (values) are stored. • In programming languages, the storage places have names. • You access the value in the storage place by its name.

Variables • JavaScript variables are not explicitly defined (loosely typed language). barWidth = 50 • Conversions are done automatically. • Variables must start with a letter or underscore. • To use the value of a JavaScript variable as an attribute in HTML, start with an ampersand (&) and end with a semicolon (;) <HR WIDTH="&{barWidth};%" ALIGN="LEFT">

JavaScript Variables • Use ‘=‘ to place a value into a variable • myNumber = 12 • (places the number 12 in the memory location named ‘myNumber) • myString = “Hello World!” • Strings are lines of characters delimited by single or double quotes • myObjAnImage = “C:/pics/tower.jpg” • Document.write myNumber  (prints ’12’ onscreen) • yourNumber = 10 • myNumber = yourNumber • Document.write myNumber  (prints ’10’ onscreen)

Example <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <HR WIDTH="&{barWidth};%" ALIGN="LEFT"> Good-bye! </BODY> </HTML>

The result

Sending Output • JavaScript provides two commands to display text on a Web page: the document.write() and document.writeln() commands. Here is the syntax: document.write(“text here”); document.writeln(“text here”); For example: document.write(“Hello World!”);

Simple Input/Output alert(“Hello World”); confirm(“Are you sure you want to delete?”); prompt(“Enter your name?”, “”);

JavaScript Commands • A ‘command’ in any computer language is a reserved word – such as “write” • or reserved symbol – such as ‘+’ or ‘=‘ • that tells the computer to do something • Change variable values • Direct the control flow • Manipulate I/O • Manipulate the O/S

JavaScript statements and code sequences • A statement is a syntactically correct command • A line is series of syntactically correct statements separated by semicolons <;> and ending in a line-feed/carriage return • A code sequence is a series of lines which are executed left to right, top to bottom

Example SomeVar=SomeValue; SomeOtherVar=SomeOtherValue; Test = (SomeVar == SomeOtherVar); Document.write(“It is” + Test + “that “); Document.write(“SomeVar is equal to SomeOtherVar”);

Flow Control if (condition) { code to be executed } else { code to be executed } for (i = 0; i < 10; i++) { code to be executed } while (condition) { code to be executed }

Selection (choosing alternatives) • if (statement in brackets is true) then • {Do stuff in curly braces} • else if (statement in brackets is true) then • {Do stuff in curly braces} • else if . . . • else • {Do stuff in curly braces} Note that the first ‘if’ has no ‘else’ and the last ‘else’ has no ‘if’!

Selection – example • A simple program specification calling for conditionals and Boolean logic • We’re going to input a salary figure • if < 200K/yr then write “Poor sod!” • if exactly equal 200K/yr write “Congratulations - you are an exact Mr. Average ” • if > 200K and <= 500K then write “High earner - HUH!.” • if > 500K/yr then write “Hello Rockefeller”

First, Comparison Operators • Equality == • NOTE! JavaScript like ‘C’, ‘C++’ and ‘Java’ – to name only a few – uses double equals to check for equality: == A single equal sign is the assignment operator

Comparison Operators • Greater than (works for numbers and strings) > • Less than: < • Combinations • Greater than or equal to >= • Less than or equal to <=

Logical (Boolean) Operators • To do the complex comparison • If > 200K and <= 500K then write “High earner HUH!.” • Logical operators are required: • AND (i.e. if A is true AND B is true) • && • OR (i.e. if A is true OR B is true) • ||

JavaScript code if (f < 200000) document.write("Poor sod!") else if (f == 200000) document.write("Congratulations - you are an exact Mr. Average") else if (f > 200000 && f <= 500000) docuemnt.write("High earner - HUH!.") else document.write("Hello Rockefeller")

Logical (Boolean) Operators (2) • The last logical operator is NOT  ! • i.e. if salary plus bennies is not > 800K then I don’t care. • If !((salary + bennies) > 800000) then . . . • Notice the ! comes first and applies to the entire expression in parentheses – read it as: “if NOT salary plus bennies greater than . . . “

Assignment Operator = += -= *= /= %= Equality Operators == != > >= < <= Other Operators + - * / % ++ -- - & | ^ << >> && || ! Operators

Loops • A loop is a piece of code that repeats multiple times. • It saves repetitive coding and all languages have looping facilities. • The alternative is called in-line code

While Loops • the ‘while’ statement syntax is: while (condition) { code to be executed } • Example: x=1; while (x < 10) { document.writeln(“x is” + x); x = x + 1; //could have used x+=1 or X++ }

For Loops • JavaScript uses (mostly) the ‘for’ statement. • the ‘for’ statement syntax is: for (initialization code; loop test code; loop increment code) {code that gets repeated until the loop test is false}

Arrays • A variable is a space in memory in which to store information • An array is a group of variables all called by the same name, but with different numbers Images = new array Images[1] = i1.url Images[2] = 12.url Document.write images[1]

Arrays (2) • Arrays are numbered starting with 0 • Although you must specify an array dimension initially, you can change the dimension by storing something in a higher numbered element: • myArray = new array(3) • myArray = new array (“Tom”, “Dick”, “Harry”) • myArray[4] = “Fred”

Loops and Arrays • Arrays and loops are “made for each other” • Arrays can be ‘loaded’ using loops • Arrays can be searched using loops for (i=0;i<4,i++){ if (myArray[i]==“Dick”) document.writeln myArray[i] }

IT – som værktøj

IT – som værktøj

Presentation Transcript