Introduction to JavaScript

Introduction to JavaScript

Topics What is JavaScript? Why JavaScript? Including JavaScript in HTML Hello World Example Script JavaScript Comments 2

What is JavaScript? Created A by Netscape Originally called LiveWire then LiveScript client-side scripting language Client-side refers to the fact that it is executed in the client (software) that the viewer is using. In the case of JavaScript, the client is the browser. A server-side language is one that runs on the Web server. Examples: PHP, Python Interpreted on-the-fly by the client Each line is processed as it loads in the browser 3

JavaScript is not Java Completely different types of languages that just happen to be similarly named JavaScript - programs are interpreted in the browser Java - programs are compiled and can be run as stand alone applications 4

Why JavaScript? It’s easier to learn than most programming languages It allows you to make interactive Web pages It can be fun! 5

Including JavaScript in HTML Two ways to add JavaScript to Web pages Use the script /script tag Include the script in an external file -- more about this later in the semester Initially, we will only use the script /script tag 6

Hello, World! Typically, in any programming language, the first example you learn displays “Hello, World!” We are going to take a look at a Hello World example and then examine all of its parts. 7

Hello World in JavaScript !DOCTYPE html html head title Hello World Example /title /head body script type "text/javascript" !-document.write(" h1 Hello, world! /h1 "); //-- /script /body /html 8

Hello World Screenshot 9

The script /script tag The code for the script is contained in the script /script tag script type "text/javascript" . . . /script 10

Hiding JavaScript from Older Browsers Some older browsers do not support JavaScript We need to tell those browsers to ignore what is in the script tag script type "text/javascript" !-some JavaScript code //-- /script 11

Displaying text The document.write() method writes a string of text to the browser script type "text/javascript" !-document.write(" h1 Hello, world! /h1 "); //-- /script 12

document.write() Ends in a semicolon document.write(" h1 Hello,world! /h1 "); Enclosed in quotes -denotes a "string" 13

Comments in JavaScript Two Single line types of comments Uses two forward slashes (i.e. //) Multiple line Uses /* and */ 14

Single Line Comment Example script type "text/javascript" !-// This is my JavaScript comment document.write(" h1 Hello! /h1 "); //-- /script 15

Multiple Line Comment Example script type "text/javascript" !-/* This is a multiple line comment. * The star at the beginning of this line is optional. * So is the star at the beginning of this line. */ document.write(" h1 Hello! /h1 "); //-- /script 16

Find the Bug! script type "text/javascript" !-/* This is my JavaScript comment * that spans more than 1 line. * document.write(" h1 Hello! /h1 "); //-- /script 17