Introduction to Client-Side Introduction to Client-Side Web Development Web Development Introduction to Client-Side Introduction to Client-Side programming using JavaScript programming using JavaScript DOM and JavaScript; basic syntax and concepts 3 th February 2005 Bogdan L. Vrusias [email protected]
51
Embed
Introduction to Client-Side Web Development Introduction to Client-Side programming using JavaScript DOM and JavaScript; basic syntax and concepts 3 th.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
Introduction to Client-Side programming Introduction to Client-Side programming using JavaScriptusing JavaScript
• Objects are some times single, but they can also form a collection of objects.window.document.forms[0].elements[3]
• The object model can be represented with a tree structure. Each object is a node of the tree, and it has a parent node, children nodes, and siblings.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
DOM Basics: DOM as Nodes IDOM Basics: DOM as Nodes I• DOM as Nodes: where you can access any element within the tree
structure of the document. You can get, change, or add nodes to the document object model.document.childNodes[0].childNodes[0]
• The content of an element is called text node and can be accessed by:document.childNodes[0].text = "text"
• You can navigate to find any type of attributes in the same way we accessed the text node. For example to change the source of an image you would do:document.childNodes[0].childNodes[0].src = "img.jpg"
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
History: JavaScriptHistory: JavaScript• JavaScript was developed by Netscape and was then
known as LiveScript.
• JavaScript was supported only by Netscape initially, and as Netscape would only licence technology to Microsoft, Microsoft implemented JScript to run on Internet Explorer.
• The European Computer Manufacturers Association (ECMA) turned the variations of JavaScript and JScript into an international standard script language called ECMAScript.
• So the term "JavaScript" represents both Netscape and Microsoft implementation of ECMAScript.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: Introduction IJavaScript: Introduction I• With HTML only, there is no way you could perform any
kind of dynamic operation over the information within the document.
• Once the pure HTML document is displayed on the browser the page is static.
• What makes a page dynamic is the scripting language.
• The scripting language allows the creation of dynamic HTML (DHTML) pages, where the user can, for example, perform calculations, change the user interface, or generate dynamic content, all that within the same page.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: Basic Syntax IIIJavaScript: Basic Syntax III• JavaScript is case sensitive (optional for some browsers)
• Variables should be defined (optional… but recommended)
• Each statement ends with a semicolon (optional for some browsers)
NOTE: Commenting the source code is very helpful, but remember that the user can see the source code, so you may not want to give too many details about something!!!
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: How it worksJavaScript: How it works• JavaScript is inserted in the HTML document and it can be
executed on the client only.
• If a task can be performed at the client side, that will reduce the performance load of the server, and as a result it will be faster and more efficient for the user.
• JavaScript is an interpreted language, the code is not compiled, therefore each line of code is processed as the the script is executed.
• You can either execute the JavaScript code before the HTML page is displayed or after.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: How it worksJavaScript: How it works• Because the JavaScript is executed as the page is parsed by the
browser (from top to bottom), there is a possibility that some errors may occur:– If you refer to a function that has not yet been processed by the browser
you will get an error.– Once the document is fully displayed there is no way you can add
dynamic text to the document (e.g. by document.write(“abc");)
• For security reasons JavaScript cannot perform operations such as:– Read directory structures– Execute commands or applications
• JavaScript can be defined is three basic ways in the HTML document:– Inline– Embedded– External– Combination of the above
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: Embedded scriptingJavaScript: Embedded scripting• Embedded scripting is the most popular way of scripting.
• Its basic syntax is:<script type="text/javascript">
<!--
window.alert("Hello World!");
//-->
</script>
• The main body of the script is placed within <!-- and //-->. This is done for the browsers that do not support JavaScript, so that the script is not processed and displayed on the screen.
• The example above is executed when the document is parsed.
• Embedded scripting is used when we want to create functions. Functions will be executed only when they are called.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: External scriptingJavaScript: External scripting• External scripting is used when you want to reuse your code all over
your Web pages.
• Having an external JavaScript file that all of your pages use, saves you from having to update your code over every page that uses it.
• The external JavaScript file is a plain text file with the extension ".js" (e.g. highlight.js).
• The reference to an external JavaScript file from an HTML page is as follows:<script language="javascript" src="highlight.js"
/script>
• The source code from external JavaScript files is not directly visible on the HTML document, but the source files can either be found on the browser's cache directory or downloaded from the server.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: String OperatorsJavaScript: String Operators• The String Operator contains all comparison operators and
the concatenation operator (+).
• You can concatenate strings with strings, or even string with numbers. When concatenating strings with numbers the number is automatically converted into string, so the result is a string.
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: The String ObjectJavaScript: The String Object• The basic methods and properties are provided bellow:
– MethodscharAt(): Returns the character of a specific indexconcat(): Concatenates two strings into oneindexOf(): Returns the index of the first occurrence of a string passedlastIndexOf(): Returns the index of the last occurrence of a string passedmatch(): Returns an array containing the matches found, based on the
regular expression string passedreplace(): Returns the string resulting from performing a search and
replace using the regular expression and replace string passedsubstring(): Returns the string between the first and last index passedtoLowerCase(): Converts all characters in the string passed to lower case
– Propertieslength: Represents the length of the stringprototype: Provides the capability to add properties to instances of the
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: The String ObjectJavaScript: The String Object• The String Object has also some formatting methods. The basic
methods are provided bellow:anchor(): Converts the string into an instance of the <a> elementbig(): Converts the string into an instance of the <big> elementbold(): Converts the string into an instance of the <bold> elementfixed(): Converts the string into an instance of the <tt> elementfontcolor(): Sets the color attribute of an instance of the <font> elementfontsize(): Sets the size attribute of an instance of the <font> elementitalics(): Converts the string into an instance of the <i> elementlink(): Converts the string into an instance of the <a> elementsmall(): Converts the string into an instance of the <small> elementstrike(): Converts the string into an instance of the <strike> elementsub(): Converts the string into an instance of the <sub> elementsup(): Converts the string into an instance of the <sup> element
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: The Array ObjectJavaScript: The Array Object• The basic methods and properties are provided bellow:
– Methodsconcat(): Concatenates the elements passedpop(): Deletes the last element of an arraypush(): Adds elements to the end of the arrayreverse(): Reverses the order of the elements within the arrayshift(): Deletes elements from the front of an arrayslice(): Returns a subsection of the arraysort(): Sorts the elements in the arraysplice(): Inserts and removes elements from an arrayunshift(): Adds elements to the from of an array
– Propertiesindex: If the array is a result of a regular expression this property returns the index
of the matchinput: If the array is a result of a regular expression this property returns the
original stringlength: Represents the number of elements in the arrayprototype: Provides capability to add properties to instances of the Array object
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: The Date ObjectJavaScript: The Date Object• The basic methods and properties are provided bellow:
– MethodsgetDate(): Returns date within monthgetDay(): Returns day within weekgetFullYear(): Returns the four digit year in local timegetHours(): Returns the hour within the daygetMilliseconds(): Returns the millisecondsgetMinutes(): Returns the minutes within the hourgetMonth(): Returns the month within the yeargetSeconds(): Returns the seconds within the minuteset…(): Sets the respective values (as above) to a Date objecttoGMTString(): Returns the Date string in Universal format
– Propertiesprototype: Provides capability to add properties to instances of the Date
Introduction to Client-SideIntroduction to Client-SideWeb DevelopmentWeb Development
JavaScript: The Math ObjectJavaScript: The Math Object• The basic methods and properties are provided bellow:
– Methodsabs(): Absolute valuecos(), sin(), tan(): Cosine, sine, and tangent respectively (in radians)exp(): Euler's exponential functionlog(): Natural logarithm with base emax(), min(): Max and min respectively of two values passedpow(): Power of the first value to the second value passedrandom(): Random number between 0 and 1round(): Rounded (whole) number of the value passedsqrt(): Squared root
– PropertiesE: Euler's constant (e=2.718…)LN2, LN10: Natural Log of 2 and 10 respectivelyLOG2E, LOG10E: Log base -2 and -10 of EPI: Pi (=3.14…)SQRT1_2, SQRT2: Square root of 0.5 and 2 respectively