1 javascript
Post on 05-Jan-2016
216 Views
Preview:
TRANSCRIPT
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"><!--document.write("Hello World!");//--></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
top related