Introduction to JavaScript

JavaScript Introduction Monday, February 4, 2013

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

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

Monday, February 4, 2013

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

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

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

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

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

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

HTML Page • Call it index.html <!DOCTYPE html> <html lang='en'>
<head> <meta charset='utf-8'> </head> <body> <h1>Hello World</h1> </body> </html> Monday, February 4, 2013

JavaScript Program • Add the JavaScript tag and put the
code in between the HTML head tags. ... <head> <meta charset='utf-8'> <script type="text/javascript"> var message = "Hello Universe!"; alert(message); </script> </head> ... Monday, February 4, 2013

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

Advanced: Add variables ... <head> <meta charset='utf-8'> <script type="text/javascript"> var
greeting = "Bonjour"; var message = greeting + " Universe!"; alert(message); </script> </head> ... Monday, February 4, 2013

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

Introduction to JavaScript

Introduction to JavaScript

Mot

More Decks by Mot

Other Decks in Technology

Featured

Transcript

JavaScript Introduction Monday, February 4, 2013

What is JavaScript • Scripting Language rather than a markup

‘Installing’ JavaScript • Install Google Chrome - http://google.com/ chrome •

Monday, February 4, 2013

Monday, February 4, 2013

Monday, February 4, 2013

Math with Integers 2 + 3; 10+1402; 6* 4; 5

Math with Variables var x = 5; var y =

Variables • Declare with ‘var’ var x = 10; var

Strings • ‘Normal’ text. var message = “Hi, there”; var

Functions • Functions play a speciﬁc role depending on their

Your First JavaScript Program • Step 1: Create an HTML

HTML Page • Call it index.html <!DOCTYPE html> <html lang='en'>

JavaScript Program • Add the JavaScript tag and put the

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

Advanced: Add variables ... <head> <meta charset='utf-8'> <script type="text/javascript"> var

Thanks • Next Time: Using jQuery - a JavaScript Library