Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Javascript - NCSA Wiki
Document related concepts
Transcript
Javascript
Prof. Wenwen Li
School of Geographical Sciences and Urban Planning
5644 Coor Hall
wenwen@asu.edu
Outline
1. Overview
2. Function/Application
3. Javascript & HTML & CSS
4. Programming Methods
5. Programming Syntax
6. Javascript Libraries
7. DOM & Javascript
Overview
What is Javascript?
•
•
•
•
•
•
dynamic programming language
client-side scripts
Interactive supported
prototype-based scripting language
multi-paradigm language
object-oriented supported
Overview
History
Beginning
• was originally developed by Brendan Eich at Netscape Communications
Corporation in 10th, May 1995.
• The named Javascript was adopted in December
Standardization
• ECMAScript in 1997
• ECMAScript 2 in 1998
• ECMAScript 3 in 1999
• ECMAScript 4 in 2007
• ECMAScript 5 (ECMAScript 3.1) in 2009
• Latest version: ECMAScript 5.1 in 2011
VBScript & JScript
Overview
Differences between Javascript and Java
• Completely different
• The term “Javascript”: marketing deal
Java:
• full programming language
• Complied language
• Stand-alone/web
• Much harder programming language
Function/Application
• Web pages development
• Desktop/mobile platform
• Web environment
• Client-side processing
Function/Application
Client-side processing & web environment
• Web pages development
• Desktop/mobile platform
• Browser based
Function/Application
Differences between Javascript and JSP, ASP, PHP
• JSP (JavaServer Pages): a Java based tool to develop web pages by serverside processing
• ASP (Active Server Pages): a Microsoft scripting language of server-side
processing for dynamic web pages development
• PHP (PHP: Hypertext Preprocessor): a free scripting language of server-side
processing for web pages development but also used as a general-purpose
programming language.
Function/Application
Differences between Javascript and JSP, ASP, PHP
• Javascipt: client-side scripting
• JSP, ASP, PHP: server-side scripting
• Javascipt: without compiling
• JSP, ASP, PHP: require compile
• Javascipt: easy
• JSP, ASP, PHP: hard
• Javascipt: low-level security
• JSP, ASP, PHP: enable security setting
Function/Application
Javascript & HTML & CSS
• HTML tags create objects; JavaScript manipulates those objects.
• JavaScript enables accessing HTML objects, browser- specific objects and
platform-specific objects.
*
* http://www.dummies.com/how-to/content/javascript-and-html.html
Function/Application
Javascript & HTML & CSS
CSS (Cascading Style Sheets): supports to dsign the appearance of web pages
Javascript, HTML and CSS generally are combined for web based development:
• HTML to define the content of web pages
• CSS to specify the layout of web pages
*
• JavaScript to program the behavior of web pages
Programming Method
Structure
• <script> Tag: covers JavaScript codes
• <head> Tag
• <body> Tag
• External Javascript
Programming Method
Environment
Free integrated development environment (IDE)
• Eclipse
• NetBeans
• …
Free lightweight editors
• SciTe
• Komodo Edit
• Notepad++
Browsers
• Firefox
• Chrome
• Internet Explorer
Programming Syntax
Data type
•
•
•
•
•
•
Boolean
Float & Double
No integer
NAN & Infinity
string
null & undefined
Programming Syntax
Program/statement
• Are separated by semicolons
• Consists of values, operators, expressions, keywords and comments
Values: Fixed values (literals) and variable values (variables)
• Literals: number, string, expression
• Variables:
Keyword: var
Assign values: equal sign
Operators
• assignment operator: =
• arithmetic operators : + - * /
Programming Syntax
Program/statement
Keywords:
Comments
double slashes //
between /* and */
Programming Syntax
Program/statement
White space: enables multiple spaces
Case sensitive
Line length: less than 80 characters (recommendation)
Code blocks: {...}
Identifiers:
• Letters, digits, underscores, and dollar signs.
• Must begin with a letter, or $ and _.
• Case sensitive (y and Y are different variables)
• Avoid reserved words (e.g. keywords)
Programming Syntax
Operators
Arithmetic operators:
Assignment operators:
Programming Syntax
Operators
String operators & strings and numbers:
Difference?
• x1 = 1 + 2;
• x2 = “1" + 2;
• x3 = “JavaScript" + 1;
Comparison and logical operators:
Programming Syntax
Function
Function syntax:
• Keyword: function
• Name of function + parentheses ()
• Function names follows the same rules as variables
• Parameter names separated by commas: (parameter1, parameter2, ...)
• Codes of function are included inside curly brackets: {}
Function invocation
Function return
• Return statement
• Return value
Programming Syntax
Object
Example:
Object: Boeing 787
Properties:
airplane.name: Boeing 787
airplane.range: 9,439 miles
airplane.topSpeed: 593 mph
airplane.wingspan: 197'
airplane.cruiseSpeed: 567 mph
Method:
airplane.landing
airplane.takeoff
airplane.fly
Javascript Libraries
JavaScript Frameworks (Libraries)
Reduce the burden of advanced JavaScript programming.
•
•
•
•
jQuery: http://www.w3schools.com/js/js_lib_jquery.asp
Prototype: http://www.w3schools.com/js/js_lib_prototype.asp
MooTools
Content Delivery Networks (CDN): a network of servers containing shared
code libraries.
DOM & Javascript
HTML DOM (Document Object Model)
a standard to access and modify HTML elements.
• Defines HTML elements as objects
• Defines properties of HTML elements
• Defines methods of HTML elements
• Defines events of HTML elements
• Method
• Property
DOM & Javascript
Basic methods
Access HTML elements:
• .getElementById
• .getElementsByTagName()
• .getElementsByClassName()
Modify the content of HTML elements:
• element.innerHTML=
• element.attribute=
• element.setAttribute(attribute,value)
• element.style.property=
Modify HTML elements:
• .createElement()
• .removeChild()
• .appendChild()
• .replaceChild()
• .write()
DOM & Javascript
Basic methods
Access HTML objects:
• .anchors
• .baseURI
• .body
• .cookie
• .documentElement
• .documentURI
• …
Conclusion
• Overview
• Function/application
• Javascript & HTML & CSS
• Programming methods
• Programming syntax
• Javascript Libraries
• DOM & Javascript
