1 javascript

1

JavaScript

http://jjcweb.jjay.cuny.edu/ssengupta/

JavaScript Intro

“JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari”

What is JavaScript?o JavaScript is a scripting languageo Designed to add interactivity to HTML pageso A lightweight programming languageo Can be embedded directly into HTML pageso Everyone can use JavaScript without purchasing a license

2

Java and JavaScript

Are Java and JavaScript the same?o NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a programming language - in the same category as C and C++.

3

What can a JavaScript do?

JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page

o A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page

JavaScript can react to events o A JavaScript can be set to execute when something happens, like when a

page has finished loading or when a user opens an HTML element

JavaScript can be used to validate data o A JavaScript can be used to validate form data before it is submitted to a

server. This saves the server from extra processing

JavaScript can be used to detect the visitor's browser o A JavaScript can be used to detect the visitor's browser, and - depending

on the browser - load another page specifically designed for that browser

JavaScript can create dynamic effects in an HTML page

4

JavaScript – How to start

The HTML <script> tag is used to insert a JavaScript into an HTML page.

<html><body><script type="text/javascript">document.write("Hello World!");</script></body></html>

5

JavaScript – How to (contd.)

You can even add HTML tags to the JavaScript

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>");</script></body></html>

6

How to Handle Simple Browsers

Browsers that do not support JavaScript, will display JavaScript as page content.

To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript.

<html><body><script type="text/javascript"></script></body></html>

7

Where to put the JavaScript

Scripts can be in <body>

<html><head></head>

<body><script type="text/javascript">document.write("This message is written by JavaScript");</script></body>

</html>

8

Where to put the JavaScript

Scripts can be in <head>

<html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}</script></head>

<body onload="message()"></body></html>

9

Using an External JavaScript

If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file

Save the external JavaScript file with a .js file extension

Note: The external script CANNOT contain the <script></script> tags!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

10

Using an External JavaScript

<html><head>

<script type="text/javascript" src=“abc.js"></script></head><body></body></html>

11

JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

A JavaScript statement is a command to a browser.o The purpose of the command is to tell the browser what to

do.o document.write("Hello World");o alert("This alert box was called with the onload event");

JavaScript is Case Sensitiveo Unlike HTML, JavaScript is case sensitive - therefore watch

your capitalization closely when you write JavaScript statements, create or call variables, objects and functions

12

JavaScript Comments

Comments can be added to explain the JavaScript, or to make the code more readable

Single line comments start with //

JavaScript Multi-Line Commentso Multi line comments start with /* and end with */

13

Let’s create some simple JavaScript Code

14

JavaScript Operators

JavaScript can be used to do Math or Math-like operationso Adding strings or numbers

JavaScript Operatorso = is used to assign valueso + is used to add valueso var is used to declare variables inside JavaScript

15

JavaScript Code

Adding two strings together and display:

<html><head></head><body><script type="text/javascript">var txt1="What a very";var txt2="nice day";var txt3;txt3=txt1+txt2;document.write(txt3);</script></body></html>

16

JavaScript Code (contd.)

<html><head></head><body><script type="text/javascript">var txt1="What a very";var txt2=" nice day";var txt3;var txt4=" Hello world";txt3=txt1+txt2;txt5=txt3+txt4;document.write(txt5);</script></body></html>

17

JavaScript Arithmetic Operators

18

JavaScript Comparison Operators

Comparison operators can be used in conditional statements to compare values and take action depending on the result:

if (age<18) document.write("young");

19

JavaScript Comparison Operators

In JavaScript we have the following conditional statements:

o if statement - use this statement to execute some code only if a specified condition is true

o if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false

o if...else if....else statement - use this statement to select one of many blocks of code to be executed

o switch statement - use this statement to select one of many blocks of code to be executed

20

If Statement

if (condition) { code to be executed if condition is true }

21

If...else Statement

if (condition) { code to be executed if condition is true }else { code to be executed if condition is not true }

22

If...else if...else Statement

if (condition1) { code to be executed if condition1 is true }else if (condition2) { code to be executed if condition2 is true }else { code to be executed if condition1 and condition2 are not true }

23

JavaScript Switch Statement

switch(n){case 1: execute code block 1 break;case 2: execute code block 2 break;default: code to be executed if n is different from case 1 and 2}

24

JavaScript Objects Introduction

JavaScript is an object oriented programo Provides dynamic and customized effect in

web design with these objects

Date Objecto Used to work with dates and times

25

JavaScript Date Object The Date object is used to work with dates and times Date objects are created with the Date() constructor

new Date() // current date and time

var d=new Date();document.write(d);document.write(d.getDay());

26

<script type="text/javascript">var d=new Date();document.write(d.getDay());</script>

Date Object Methods

27

Practice Exercise

Create a webpage using HTML and JavaScript that dynamically displays greetings depending on hour of the day.

Anytime before 10 am: good morning After 10 am and before 3 pm: good day After 3 pm and before 8 pm: good evening After 8 pm and before 11 pm: good night

Hint:o Use Date object and if…else if… statements

28

Part 2

29

JavaScript String Object

The String object is used to manipulate a stored piece of text

30

var txt="Hello world!";document.write(txt.length);

var txt="Hello world!";document.write(txt.toUpperCase());

var txt="Hello world!";

var txt=5;

String manipulation

JavaScript can be used to manipulate and display texts in various formatso Big size texto Small size texto Boldo Italicso Font coloro Subscript / Superscripto Blink

31

Example: String manipulation

32

Hyperlink in JavaScript

33

Practice Exercise

Create a JavaScript code with blinking hyperlink

34

JavaScript Popup Boxes JavaScript has three kinds of popup boxes:

o Alert boxo Confirm box and o Prompt box

Alert box is often used to provide certain information to the usero When an alert box pops up, the user clicks "OK" to proceed

Confirm box is often used if you want the user to verify or accept somethingo When a confirm box pops up, the user will have to click either

"OK" or "Cancel" to proceed Prompt box is often used if you want the user to input a

value before entering a page

35

Alert Box

<html><head><script type="text/javascript">function show_alert(){alert("Hello! I am an alert box!");}</script></head><body><form><input type="button" onclick="show_alert()" value="Show alert box" /></form></body></html>

36

Confirm Box<html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button!");if (r==true) { alert("You pressed OK!"); }else { alert("You pressed Cancel!"); }}</script></head><body><form><input type="button" onclick="show_confirm()" value="Show confirm box" /></form></body></html>

37

Practice Exercise

Create a confirm box button just like the previous example.

When the user presses OK or Cancel, display “You pressed OK!” or “You pressed Cancel!” as blinking text in the html webpage.

38

Prompt Box<html><head><script type="text/javascript">function show_prompt(){var name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }}</script></head><body><form><input type="button" onclick="show_prompt()" value="Show prompt box" /></form></body></html>

39

Extra Credit Solution Discussion

40

Announcements: Imp dates

Dec. 2nd : HTML quiz (Regular class timing)

Dec 7th : Final exam preview and quiz answer discussion; Project Submission

Dec. 9th : No in-class meeting

Dec. 16th : Final Exam

41

HTML Quiz preview

42

1 javascript

Documents