Download presentation
Presentation is loading. Please wait.
1
14 A Brief Look at JavaScript and jQuery
2
Learning Outcomes Describe Common Uses of JavaScript
Describe the Document Object Model List Common Events Create a Simple JavaScript Use Variables, Operators, and If Control Structure Describe Common Uses of jQuery
3
JavaScript Language Introduced by Netscape and Sun in 1995
Not a Subset of Java JavaScript is an Object-oriented Language Makes Web Pages Dynamic Can Change Page Contents After it has Been Rendered
4
JavaScript Language Javascript is a Scripting Language
Executed by Interpreter from Within Web Browser Interpreter Translates Programming Code Into Executable Format Performed Each Time The Program is Run Scripting Engine Interpreter That is Part of Web Browser
5
Popular Uses Dynamic Property Changes User Feedback Popup Windows
Browser Detection Random Images, Quotes Display Current Date Display Last Modified Date Cookies Rollovers Banners Redirection Form Validation Calculations Reset Form
6
Objects Code & Data Treated as Individual Unit or Component
Item or Thing Example Noun — pen document
7
Properties Attribute that Describes an Object Example
Adjective — inkColor Get or Set an Object’s Properties Append Property to Object with Period pen.inkColor document.bgcolor
8
Methods Related Statements Associated with Object Example
Verb — write Execute, or Call, an Object’s Methods Append Method to Object with Period pen.write() document.write()
9
Arguments Information that can be Passed to Method
Text String, or Literal Text Contained Within Quotes document.write(“This is a test.”);
10
Events Specific Circumstance Monitored by JavaScript
Something that Happens when User Performs Action Page Loads Mouse Movement Mouse Click
11
Event Handlers Processes Actions Such as Mouse Movements
Executed in Response to an Event Event Event Handler click onclick load onload mouseover onmouseover mouseout onmouseout submit onsubmit unload onunload
12
Document Object Model (DOM)
Represents HTML Document Displayed in Window Enables JavaScript to Access Individual Elements Turns Each Element into its Own Programmatic Object Includes Objects, Properties, Methods
13
DOM Properties alinkColor anchors bgColor cookie fgColor
Get/Set Active Link Color anchors Array of All Named Anchors bgColor Get/Set Background Color cookie Get/Set Cookie Content fgColor Get/Set Text Color
14
DOM Properties forms images lastModified links vlinkColor
Array of All Forms images Array of All Images lastModified Returns Date Document was Last Modified links Array of All Links vlinkColor Get/Set Visited Link Color
15
DOM Methods open( ) close( ) write( ) writeln( ) Opens New Document
Content Generated Through write( ) & writeln( ) close( ) Finishes a New Document Created with open( ) write( ) Write a String of Text to an HTML Document writeln( ) Writes a String of Text to an HTML Document Appends a New Line
16
<script> <script>…</script> Attributes
Contains Statements that Make Up a Javascript Program Notifies Browser Commands Need to be Interpreted by Scripting Engine Attributes type Specifies Scripting Language Being Used <script type=“text/javascript”>
17
<script> Placement
Can be Saved in External File File Extension of .js src Attribute Accepts URL of JavaScript Source File Should Only be Declared Once In <head> Source Files Cannot Include HTML Elements Can be Coded as Part of an Event Attached to an Element
18
Data Types Loosely Typed Number String
Variable Type Declaration Not Required Number Any Numeric Value Math Can be Performed Integer 8 1, Floating Point e13 String Any Combination of Letters, Numbers, and/or Punctuation Treated as Text
19
Data Types Boolean Null Undefined NaN (Not a Number)
True (1) or False (0) Null No Value Undefined Not Declared or Value Not Assigned NaN (Not a Number) isNaN( ) myNum = isNaN(document.form.start.value);
20
Data Type Conversion eval( ) parseInt( ) or parseFloat( ) Number( )
myValue = eval(“1+2”); parseInt( ) or parseFloat( ) start = parseInt(document.form.start.value); Number( ) start = Number(document.form.start.value); String( ) num = 10; numStr = String(num);
21
Literals & Variables Literal Variable Fixed Value
Value Stored in Memory Location Can be Changed Anytime var Used to Create Variables Must Begin with a Letter, $, or _ Cannot Contain Spaces Case-sensitive
22
JavaScript Examples Literals & Variables var total = 5 + 4;
var Link = “losacco” + + “cod.edu”; Event Handler <a href="home.htm" onmouseover="alert('Click to go home')">Home</a>
23
JavaScript Examples Conditional If
if (document.forms[0].userName.value == "" ) { alert("Name field cannot be empty."); return false; }
24
jQuery Open Source JavaScript Library Functionality
Group of Ready Built Methods Functionality Manipulate CSS Properties Detect & React to Events Animate Elements
25
jQuery Compatible with Chrome, IE, Firefox, Safari Access Plugins
Download and Include with Your Own Code Link to External Site that Provides Access to It Plugins Verify Compatibility & Licensing
Similar presentations
