1 / 31

Introduction to JavaScript Programming

Introduction to JavaScript Programming. World Wide Web. Original purpose was locating and displaying information Small academic and scientific community Commercial applications Static HTML Need for more interactive and appealing. JavaScript. Joint venture – Sun & Netscape

aulii
Download Presentation

Introduction to JavaScript Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to JavaScript Programming

  2. World Wide Web • Original purpose was locating and displaying information • Small academic and scientific community • Commercial applications • Static HTML • Need for more interactive and appealing

  3. JavaScript • Joint venture – Sun & Netscape • Netscape Communications • LiveScript • Sun Microsystems • Simplify its Java language • Open language – anyone can use • Embedded in the HTML document

  4. JavaScript vs. Java • Java is full-fledged, object-oriented language • Can be used to create applets • Applets – small programs designed to execute within another application • Must use some type compiler, such as Sun’s JDK

  5. JavaScript • Statements/variables are case sensitive • Interpreted language – code runs only on a JS interpreter built into browser • Version of JS depends on browser version • IE supports additional features – Microsoft calls its version Jscript • Older browsers may not handle newer JS codes

  6. JavaScript and HTML Tags • HTML (hypertext markup language) • Microsoft FrontPage • Macromedia Dreamweaver • Microsoft Word • Netscape Composer • Text editor, such as Notepad • Tag – instruction surrounded by ‘<‘ and ‘>’ symbols • The instructions are call attributes and have values assigned to them

  7. JavaScript and HTML Tags Tag Attributes <BODY TEXT = “00008B” BACKGROUND = “image.gif”> Tag Attributes <INPUT Type = “text” Name = “PhoneNumber” Value = “ “ Size = 17>

  8. SCRIPT Tags • Four attributes • LANGUAGE – identifies version of JavaScript • SRC – text string for URL/filename of JS source file • TYPE – specify the scripting language • DEFER – beyond the scope

  9. SCRIPT Tags Tag Attributes <SCRIPT LANGUAGE = “JavaScript”> <!– Hide from old browsers Place your JS code in this area //--> </SCRIPT>

  10. HTML Comments • Embedded JS code needs to be hidden from incompatible browsers • <!-- beginning comment block • --> ending comment block

  11. JavaScript Comments • Line Comments • // This is a line comment • Block Comments • /* Beginning line • Still a comment • Ending line */

  12. JavaScript Benefits • Web Standard • Alternative – Microsoft VBScript • Follows Visual Basic syntax • VBScript not supported in Netscape Navigator • Provide instant feedback without CGI (Common Gateway Interface) scripts

  13. JavaScript Cookies • Cookies – data sent and stored in files on user’s computer • Navigator – cookies.txt • IE – Cookies folder • Track user’s preferences • JavaScript code limits access to user’s hard drive – browser controls cookie location

  14. JavaScript Basics • Common types of variables • Numeric - numbers • Strings - letters • Boolean – true/false or yes/no

  15. JavaScript Basics • Variables – Naming Conventions • Name must begin with letter or underscore • Rest of name – letters, numbers, or underscores • Avoid reserved words (appendix A) • No spaces or punctuation • Variables are case sensitive • Defined by keyword var

  16. JavaScript Basics • Literal – actual number or char text, rather than a calculated result or value input from a keyboard var width = 3 String literal: var browserType = “Netscape” Special characters (table I-2): var Test = “\”Hey there!\” she said.”

  17. JavaScript Basics • write() – method used to write text to the Web page • alert() – method used to display messages in a dialog box • Discussed in more detail in Project 1

  18. JavaScript Basics • Expression – formula to assign values to variables average = totalValue/Count var Count = 0

  19. JavaScript Basics • Arithmetic operators – Table I-3 • Increment/decrement – Table I-4 • Arithmetic expressions – Table I-5 • Mathematical order – Table I-6 • Concatenation

  20. Conditionals • Allow comparisons of values • See Table I-7 • If and While statements

  21. Conditionals var todaysDate = new Date() var numHours = todaysDate.getHours() if(numHours >= 12) { document.write(“Good Afternoon”) } else { document.write(“Good Morning”) } the rest of your code…

  22. Conditionals while (condition) { the JavaScript code to be executed while the condition is True } the JavaScript code to be executed when the loop is finished

  23. Functions • Way to write several lines of script and use them repeatedly as needed function Greetings() { alert(“Hello, this is a friendly message.”) } messageStr = “This is a customized message.” function Greetings(messageStr) { alert(messageStr) } All-purpose message:

  24. Objects, Properties, and Methods • Object – real-world entity (book, car) • JS is object oriented (OO) • Object-Oriented Programming (OOP) • Object is described by its properties • Properties are attributes that help differentiate one object from another • Separate object and property with a period • Ex. car.color = “red”

  25. Objects, Properties, and Methods • Method – function or action you want the object to perform (behavior) • Ex. car.drive() • Some methods require an argument • Argument is a value passed to the method

  26. Objects, Properties, and Methods • JS uses many objects, but not a complete OOP language • JS provides many built-in objects • Ex. Date, Arrays, windows, and forms • JS allows you to define and create your own • When defining objects, assign unique and meaningful names (not form1)

  27. Events • Action that occurs, such as a user clicking a link or button, or user entering data in a form textbox • JS reacts to events by Event Handlers • Table I-8 • JavaScript Quick Reference (page J A.5) • Events are “triggered” • Ex. onMouseOver

  28. Events:Forms • Many event handlers work with forms • Ex. onFocus, onBlur, onChange, onSubmit, and onReset <INPUT TYPE = “Button” Value = “White” onclick = “document.bgColor = ‘White’”> <BODY bgColor = “White” onload = “timeLine()”> <INPUT TYPE = “Button” Name = “SubmitText” Value = “Submit” onclick = “Transmit()”>

  29. Frames • Frame is a feature that allows a browser window to be split into smaller units. • http://home.mcom.com/assist/net_sites/frames.html <FRAMESET COLS = “25%,75%”> <FRAME SRC = “TOC.HTML”> <FRAME SRC = “MAINPAGE.HTML”> </FRAMESET>

  30. Arrays • Collection of data items identified by a singular name • Defined by using built-in Array object var currMonth = new Array(13) currMonth[1] = “January” currMonth[2] = “February” … currMonth[12] = “December” Length

  31. Arrays • Thirteen (13) elements defined because JS first array element is [0] • Older browsers use [0] to hold the length • Good practice to leave element [0] empty and start with element [1] • Creating arrays discussed in Project 3

More Related