Tweet
Tweet

Slide 1

Slide 1 text

JavaScript Introduction Monday, February 4, 2013

Slide 2

Slide 2 text

What is JavaScript • Scripting Language rather than a markup language • Client Side rather than Server Side • Makes webpages Dynamic rather than Static Monday, February 4, 2013

Slide 3

Slide 3 text

‘Installing’ JavaScript • Install Google Chrome - http://google.com/ chrome • View > Developer > JavaScript Console • Type 2 + 3, and press enter Monday, February 4, 2013

Slide 4

Slide 4 text

Monday, February 4, 2013

Slide 5

Slide 5 text

Monday, February 4, 2013

Slide 6

Slide 6 text

Monday, February 4, 2013

Slide 7

Slide 7 text

Math with Integers 2 + 3; 10+1402; 6* 4; 5 -12; Monday, February 4, 2013

Slide 8

Slide 8 text

Math with Variables var x = 5; var y = 3; x * y; Monday, February 4, 2013

Slide 9

Slide 9 text

Variables • Declare with ‘var’ var x = 10; var message = “Hello Scott”; Monday, February 4, 2013

Slide 10

Slide 10 text

Strings • ‘Normal’ text. var message = “Hi, there”; var first_name = “Scott”; var last_name = “Motte”; • Use the + (plus) sign to add strings together. It is known as concatenating strings. var full_name = first_name + “ “ + last_name; Monday, February 4, 2013

Slide 11

Slide 11 text

Functions • Functions play a specific role depending on their name. “alert” is the most popular function. alert(“Hello Scott”); Monday, February 4, 2013

Slide 12

Slide 12 text

Your First JavaScript Program • Step 1: Create an HTML page • Step 2: Add your JavaScript • Step 3: Open up the HTML page Monday, February 4, 2013

Slide 13

Slide 13 text

HTML Page • Call it index.html

Hello World

Monday, February 4, 2013

Slide 14

Slide 14 text

JavaScript Program • Add the JavaScript tag and put the code in between the HTML head tags. ... var message = "Hello Universe!"; alert(message); ... Monday, February 4, 2013

Slide 15

Slide 15 text

Open the HTML page in Chrome Monday, February 4, 2013

Slide 16

Slide 16 text

Advanced: Add variables ... var greeting = "Bonjour"; var message = greeting + " Universe!"; alert(message); ... Monday, February 4, 2013

Slide 17

Slide 17 text

Thanks • Next Time: Using jQuery - a JavaScript Library for web development. Monday, February 4, 2013