Download
1 / 23
240 likes | 325 Views
EEE3112 Introduction to Multimedia Application & Technology Chapter 4: Web Development – Part 2: JavaScript by Muhazam Mustapha, October 2012. Learning Outcome. By the end of this chapter, students are expected to be ready to demonstrate the required second part skills for CO4:
E N D
EEE3112Introduction to Multimedia Application & TechnologyChapter 4: Web Development– Part 2: JavaScript by Muhazam Mustapha, October 2012
Learning Outcome • By the end of this chapter, students are expected to be ready to demonstrate the required second part skills for CO4: • Writing simple JavaScript code
Chapter Content • Syntax & Structure • JavaScript in HTML • Event Handling
JavaScript In MVC design pattern, JavaScript plays the role as Control JavaScript Resembles C programming language Embeddable into HTML text The most popular language for automating HTML – second one is Microsoft’s VBScript A very light weight OBJECT-ORIENTED language and easy to learn Despite the name, JavaScript has nothing to do with Oracles / Sun Microsystem’s Java programming language
JavaScript The source code of JavaScript is embedded into HTML, and the translation is done by the browser (not by the server that transferred it) For this reason, JavaScript programming is called client-side programming – as opposed to server-side programming that is translated/compiled at the server JavaScript was initiated by Netscape (no more in business) but standardized by ECMA International as ECMAScript
<script> Tag Can be inserted into HTML either in <head> or <body> tags as <script> tag: <script language="JavaScript">...javascript code...</script> It can also be inserted as link / reference to an external file: <script language="JavaScript" src="myjs.js" />
Language Structure Variable declaration: Optional Syntax: var variable_name; Only as generic type var – no specific type like integer, float, etc Semicolon (;) at the end of each statement is optional but recommended to be put for safety Most of other structures follow the syntax of C programming language
Language Structure for and while loops: Syntax: for (initial; condition; increment) {statement; } while (condition) {statement; } break and continue work the same way as in C language
Language Structure if-else structure: Syntax: if (condition) {statement; }else if (condition) {statement; }else {statement; } Follows the same behavior as C language
Language Structure switch-case structure: Syntax: switch (selector)case value1: statement; break;case value2: statement; break;...default: statement; break; Follows the same behavior as C language, but selector values can be non-integer (like string)
Object Structure Objects in OOP are entities that can have properties and behavior As an OOP, JavaScript can declare object: Syntax: var myObj = new Object(); Properties and behaviors can be accessed through dot (.) operator Syntax: myObj.prop1 = 235; For our scope we won’t be creating so much of our own object, but will only use predefined objects
Array Array is declared as follows: Syntax: var myArr = new Array(); Then it can accessed using index as follows: Syntax: myArr[0] = 10;myArr[1] = 20;... Unlike C, JavaScript array has ‘associative’ index which may not be integer – it can also be string: myArr["last"] = "Last";
Functions Functions are declared as follows: Syntax: function myFunc(parameters){...} To return value to the caller, use return keyword
String Manipulation String is an object and can be declared like other variables Getting string length: myStr.length Chaining string: just by adding (+) longStr = shortStr1+shortStr2; Learn more from: http://www.w3schools.com/jsref/jsref_obj_string.asp
Conversion to & from String To string: nonStr.ToString(); To integer: Decimal integer: parseInt(aStr, 10) Hexadecimal integer: parseInt(aStr, 16) Octal integer: parseInt(aStr, 8) To float: parseFloat(aStr)
Mathematical Calculation For our class you are to learn on your own how to use JavaScript Math object from: http://www.w3schools.com/js/js_obj_math.asp http://www.w3schools.com/jsref/jsref_obj_math.asp Examples: Square root: Math.sqrt(value) π (Pi): Math.PI Natural Log: Math.log(value) etc
JavaScript Embedding Example:...other HTML...<script>var a = 5;alert(a+7);</script>...other HTML... Function alert() is to pop-up a dialog to show some values that may include debugging values
Document Object Model DOM is the hierarchy of objects that is used by the browser to keep information of a webpage Like information about tables, rows, images, etc To access to a particular object in a web page we can use DOM However DOM is very complicated and hard to learn, and they are different among different browsers
Referencing an HTML Object The best way to access objects in web page is by a short-cut function access: document.getElementById("idName"); Example: <a id="sample" href="target">A Link</a>...<script language="JavaScript">var aLink = document.getElementById("sample");</script>
Accessing an HTML Object Once the object / element is referenced, we can use methods (function) setAttribute and getAttribute to read from and write to attributes: getAttribute("attrName"); setAttribute("attrName", "newValue"); The content of the tag can be accessed using innerHTML function
