CSCI 4448/5448 JavaScript!Lei Tian!Your company slogan Table of Contents 1. Introduction 2. Preparation 3. Basic Syntax 4. FunctionsYour company slogan Table of Contents 5. Objects 6. JSON 7. Advanced JavaScript 8. ReferencesYour company slogan Introduction History Developed by Brendan Eich Name: Mocha -> LiveScript -> JavaScript Appear since 1996 Adopt by ECMA in 1997 Become standardized version: ECMAscript JavaScript = ECMAscript HistoryYour company slogan Introduction What is JavaScript? A scripting Language An interpreted language (execute without pre-compilation) An object-oriented language Weakly type language Designed to add interactivity to HTML DefinitionYour company slogan Introduction What can a JavaScript do? Give HTML design a programming tool Put dynamic text into HTML page React to events Read and modify HTML elements Detect browser environment Validate information before submission AdvantagesYour company slogan Features Dynamic type Object based Run-time evaluation Dynamics First-class function Nested function Closure Functional Prototypes Function as constructor Function as method Prototype-basedYour company slogan Let’s We Get Started!Your company slogan Preparations " Background • HTML / XHTML language " Edit Tools • JavaScript editor • Dreamweaver • WordPad / NotePad " Debugging Plug-in • Firebug for Firefox !Your company slogan Get Stated – Using JavaScript • External file, eg: “my-script.js” • <script src="my-script.js" type="text/javascript"></script> • Define all the variables, objects and functions • <script type="text/javascript">JavaScript code</script> • Put in <head>…</head> • Call when you want or invoke when it triggered • Put in <body>…</body> • Invoke when page load External JavaScript Internal JavaScriptYour company slogan Basic Syntax Case sensitive “var a”, “var A” are two different variables Declare variable Keyword: var, eg: var x Dynamic type type associate with value, no type declaration Scope Local: within the function Global: declare out of function, all page could access VariableYour company slogan Type of Data " Numeric • Integer: -2^53 ~ 2^53 • Float " String • Define by “” or ‘’ • Escape Character “\”, same as C and Java " Boolean • True, False " Array !Your company slogan Elements could be different types Array " Declare • var myArray = new Array() / new Array(6); " Assign Value • var myArray = new Array(“Tom”,12); • var myArray = [“Tom”, 12, “Mike”]; • myArray[1] = “Mike”; " Multiple Dimensions • var personal = new Array(); • Personal[0] = new Array(); A Object, A Container! Like Java! Your company slogan Array " Can be sparse • var myArray = new Array() ; • myArray(0) = 12; myArray(100) = 15; • others will be undefined " Methods • pop, push, join, reverse, sort, split, etc. • Array can be resized and modified " Regular Objects as Arrays • number as index of propertiesYour company slogan Operations " Numeric • +, -, *, /, %, ++, --, +=, -=, *= etc " String • +: string merge or append with string/number " Boolean • ==, !=, >, >=, <, <= " Conversion • parseInt()/parseFloat() • isNaN() – check conversion !Your company slogan Conditional and Loops " If/Else • Not strict True / False like Java • False: false, null, undefine, “”, 0, NaN " For in Loops • For array, value are index not array value • For object, value are property " Switch • “Case” could be an expression • Value need not be int !nearly identical to Java Your company slogan Functions " A function is an object • A function could have objects, properties • Type: Normal function, Anonymous function " Normal Function • Declaration: keyword: function • function functionname (param1, param2, …, paramN){…} • Call/Invocation: • functionname (param1, param2, …, paramN); • Could have return value but not necessityYour company slogan Functions " Anonymous Function • Capture local variables inside the function • Constructor/Declaration: 1. Function Literals 2. Constructor Function Code Param Your company slogan Functions – args number " Could call function with any number of argument " Fixed Number • args fewer, extra agrs are “undefined” • typeof args == “undefined” to check " Arbitrary Number • Discover number by arguments.length • Access by arguments[i] /*varargs*/ tell arbitrary number Your company slogan Functions Could have global functions Functions are first-class datatypes Don’t need declare return type Pass multiple types of parameters Could supply any number of arguments Create anonymous functions Differences from Java Dynamic types Functions are Objects Your company slogan Functions - Recall " Location • External function: in extern file - .js file • Internal function: in current file - .html file In header: execute when called – mostly event function In body: execute when page load that " Lifetime • Create once page load to it • Destroy when page is destroyedYour company slogan Objects " JavaScript is an Object-Oriented Programming Language !!! " Properties • Values associated with the objects • " Methods • Actions performed on the objects • !Your company slogan Objects String Date Array Math RegExp - Regular Expression • An object that describes a pattern of characters • Function: Search + Replace Build-In ObjectsYour company slogan Basics for Objects " Constructor • Function name is class name; keywords: new • Property define must use this " Properties • Can be create and refer in outside code " Methods • Properties whose value are function !Your company slogan Basics for Objects " Example !Property Method Now, m has two properties:
View Full Document
Unlocking...