JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.

Slides:



Advertisements
Similar presentations
Introducing JavaScript
Advertisements

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Introduction to PHP MIS 3501, Fall 2014 Jeremy Shafer
The Web Warrior Guide to Web Design Technologies
1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.
Working with JavaScript. 2 Objectives Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page Working with Variables.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Tutorial 10 Programming with JavaScript
XP 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial 10.
JavaScript, Fourth Edition
ASP.NET Programming with C# and SQL Server First Edition
JavaScript, Third Edition
XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding Addresses from Spammers.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to scripting
CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346.
Introduction to JavaScript 11 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 14.
Programming with JavaScript (Chapter 10). XP Various things Midterm grades: Friday Winter Career Fair – Thursday, April 28, 2011 (11 am to 3 pm). – MAC.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
1 JavaScript in Context. Server-Side Programming.
XP Tutorial 10New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with JavaScript Creating a Programmable Web Page for North Pole.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
Tutorial 10 Programming with JavaScript
Done by: Hanadi Muhsen1 Tutorial 1.  Learn the history of JavaScript  Create a script element  Write text to a Web page with JavaScript  Understand.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
JavaScript Tutorial 1 - Introduction to JavaScript WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Introduction to JavaScript – A First.
XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial.
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2000 Deitel & Associates, Inc. All rights reserved. Outline 8.1Introduction 8.2A Simple Program: Printing a Line of Text in a Web Page 8.3Another JavaScript.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
XP Tutorial 10 Section 1 1 Programming with JavaScript.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
1 Server versus Client-Side Programming Server-SideClient-Side.
Introduction into JavaScript Java 1 JavaScript JavaScript programs run from within an HTML document The statements that make up a program in an HTML.
1 JavaScript in Context. Server-Side Programming.
JavaScript, Sixth Edition Chapter 1 Introduction to JavaScript.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Chapter 1 Introduction to JavaScript JavaScript, Third Edition.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
JavaScript and AJAX 2nd Edition Tutorial 1 Programming with JavaScript.
XP Tutorial 10New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
Chapter 1 Introduction to JavaScript.  Study the history of the World Wide Web  Work with well-formed Web pages  Learn about Web development  Learn.
Module 1 Introduction to JavaScript
Chapter 6 JavaScript: Introduction to Scripting
Tutorial 10 Programming with JavaScript
JavaScript is a programming language designed for Web pages.
Introduction to Scripting
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
About the Presentations
WEB PROGRAMMING JavaScript.
T. Jumana Abu Shmais – AOU - Riyadh
Tutorial 10 Programming with JavaScript
JavaScript CS 4640 Programming Languages for Web Applications
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
An Introduction to JavaScript
JavaScript: Introduction to Scripting
CIS 136 Building Mobile Apps
JavaScript CS 4640 Programming Languages for Web Applications
Presentation transcript:

JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript

Development of JavaScript JavaScript is a subset of Java Differences between Java and JavaScript:

Development of JavaScript Jscript is a version of JavaScript supported by Internet Explorer The European Computer Manufacturers Association (ECMA) develops scripting standards ◦The standard is called ECMAScript but browsers still generally call is JavaScript

Running script Two places where script executes: ◦Server-side - programs that run on the server that hosts a Web site ◦Client-side - programs that run on each user’s computer

Adding JavaScript to Your Web Pages JavaScript, Fifth Edition5

6 Using the Element Scripts –JavaScript programs contained within a Web page –A JavaScript program can either be placed directly in a Web page file or saved in an external text file element –Tells the browser that the scripting engine must interpret the commands it contains – Tells the browser which scripting language and which version of the scripting language being used

JavaScript, Fifth Edition7 Using the Element script statements; –Each statement inside the script tags is a single line that indicates an action for the browser to take –The semicolon notifies the browser that it has reached the end of the statement

Understanding JavaScript Objects Object –any item—from the browser window itself to a document displayed in the browser to an element displayed within the document –Programming code and data Treated as an individual unit or component Procedures –Individual statements used in a computer program grouped into logical units –Used to perform specific tasks Methods –a process by which JavaScript manipulates or acts upon the properties of an object –Procedures associated with an object JavaScript, Fifth Edition8

Understanding JavaScript Objects (cont’d.) Property –Piece of data associated with an object –Assign value to a property using an equal sign Argument –Information that must be provided to a method Passing arguments –Providing an argument for a method JavaScript, Fifth Edition9

10 Using the write() and writeln() Methods Document object – Represents content of a browser’s window To write text to a Web page, use the following JavaScript commands: document.write(“text”); or document.writeln(“text”)’ where text is the content to be written to the page.

JavaScript, Fifth Edition11 Using the write() and writeln() Methods document.write(“text”); or document.writeln(“text”)’ The document.write() and document.writeln() methods are identical, except that the document.writeln() method preserves any line breaks in the text string –Both methods require a text string as an argument –Text string (aka literal string) Text contained within double or single quotation marks

JavaScript, Fifth Edition12 Figure 1-6 Output of a script that uses the writeln() method of the Document object Using the write() and writeln() Methods (cont’d.)

Case Sensitivity in JavaScript JavaScript is case sensitive Ignores most occurrences of extra white space Do not break a statement into several lines Within JavaScript code: –Object names must always be all lowercase JavaScript, Fifth Edition13

Let’s Practice Write a basic HTML page containing script tags. Inside the script, use the document object to write out your name Syntax is: objectname.methodname document.write JavaScript, Fifth Edition14

Adding Comments to a JavaScript Program Comments –Nonprinting lines placed in code containing various types of remarks Line comment –Hides a single line of code –Add two slashes // before the comment text Block comments –Hide multiple lines of code –Add /* before the first character included in the block and */ after the last character in the block JavaScript, Fifth Edition15

Variables JavaScript, Fifth Edition16

Using Variables Variables –A variable is a named item in a program that stores information –Values a program stores in computer memory Assigning a value to a variable –Same as storing a value in a variable JavaScript, Fifth Edition17

Declaring a variable You can declare variables with any of the following JavaScript commands: var variable; var variable = value; variable = value; where variable is the name of the variable and value is the initial value of the variable. Use reserved keyword var to create variables The first command creates the variable without assigning it a value; the second and third commands both create the variable and assign it a value Assignment operator: equal sign ( = ) –Assigns value on the right side of the expression to the variable on the left side of the expression JavaScript, Fifth Edition18

Assigning Variable Names Identifier –Name assigned to a variable –Rules and conventions Must begin with an uppercase or lowercase ASCII letter, dollar sign ( $ ), or underscore ( _ ) Can use numbers in an identifier: not as the first character Cannot include spaces in an identifier Cannot use reserved words for identifiers Reserved words (keywords) –Special words: part of the JavaScript language syntax JavaScript, Fifth Edition19

JavaScript, Fifth Edition20 Table 1-2 JavaScript reserved words Assigning Variable Names (cont’d.)

JavaScript variable types Numeric variables –any number, such as 13, 22.5, etc String variables –any group of text characters, such as “Hello” or “Happy Holidays!” –Must be enclosed within either double or single quotations (but not both) Boolean variables –accepts only true and false values Null variables –has no value at all You must declare a variable before using it JavaScript, Fifth Edition21

JavaScript, Fifth Edition22 Printing variables Printing a variable –Pass variable name to document.write() or document.writeln() method –Do not enclose it in quotation marks Figure 1-8 Results of script that assigns the value of one variable to another

The + sign JavaScript is a weakly typed language The + symbol can be used with either numeric values or text strings var total = 5 + 4; var emLink = "cadler" + + "mpl.gov"; JavaScript, Fifth Edition23

JavaScript, Fifth Edition24 The + sign –The plus sign can be used to perform arithmetic operations involving variables containing numeric values Figure 1-9 Results of script that adds the values of two variables

Modifying variables –Change a variable’s value at any point in a script Use a statement including the variable’s name Followed by an equal sign Followed by the value to assign to the variable var total = 5 + 4; var total = 22; JavaScript, Fifth Edition25

Building Expressions var total = 5 + subtotal; Variables and data are useful when used in an expression Expression –Literal value or variable or a combination of literal values, variables, operators, and other expressions Can be evaluated by JavaScript interpreter to produce a result JavaScript, Fifth Edition26

Building Expressions var total = 5 + 4; Use operands and operators to create expressions –Operands Variables and literals contained in an expression Literal –Value such as a literal string or a number –Operators Symbols used in expressions to manipulate operands +, -, *, / JavaScript, Fifth Edition27

Lets Practice Write a basic HTML page containing script tags. Inside the script, create a variable to store your name in. Use the document object to write out the variable’s contents Syntax is: objectname.methodname, as in document.write() JavaScript, Fifth Edition28

JavaScript, Fifth Edition29 Understanding Events Event –Specific circumstance monitored by JavaScript –Script can respond to in some way –Allows users to interact with Web pages Common events: actions users perform Can also monitor events not resulting from user actions

JavaScript, Fifth Edition30 Table 1-3 JavaScript events Understanding Events (cont’d.)

JavaScript, Fifth Edition31 Understanding Events (cont’d.) Working with elements and events –Events: associated with HTML elements –Event handler Code that executes in response to a specific event –JavaScript code for an event handler Can be contained within the quotation marks following the name of the JavaScript event handler

JavaScript, Fifth Edition32 Table 1-4 XHTML elements and their associated events Understanding Events (cont’d.)

JavaScript, Fifth Edition33 Referencing web page elements –Append element’s name to the name of any elements in which it is nested Start with the Document object –Specific element properties Appended to the element name –Allows for the retrieval of information about an element or the ability to change the values assigned to its attributes

Structuring JavaScript Code JavaScript, Fifth Edition34

JavaScript, Fifth Edition35 Including a Element for Each Code Section Can include as many script sections as desired –Must include a element for each section –Example code below See Figure 1-13 for results

JavaScript, Fifth Edition36 Placing JavaScript in the Document Head or Document Body element placement varies –Can place in the document head or document body –Statements in a script Rendered in the order in which they appear in the document –General rule Place as much JavaScript code as possible in the document head Important if code performs behind-the-scenes tasks required by script sections located in the document body

JavaScript, Fifth Edition37 Creating a JavaScript Source File External file containing JavaScript code –Usually designated by the.js file extension Can legally have any extension –Contains only JavaScript statements No element and no XHTML elements –Use the src attribute of the element Advantages –Neater code; code sharing; ability to hide JavaScript code from incompatible browsers Can use embedded JavaScript code and JavaScript source files combination

JavaScript, Fifth Edition38 Validating Web Pages Validating parser –Checks for a well formed Web page –Verifies document conforms to a specific DTD Validation –Process of verifying a well-formed document and checking the elements in your document Web development tools offer validation capabilities Validating services found online –W3C Markup Validation Service:

JavaScript, Fifth Edition39 Writing Valid JavaScript Code JavaScript statements contain symbols –Prevents HTML document from being well formed –Web pages will not validate when they contain script Two options to resolve validation issue –Move code into a source file –Keep JavaScript code within the document Enclose code within a element within a CDATA