Introduction to JavaScript

Introduction to JavaScriptBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1OutlineWhat is JavaScript?Embedding JavaScript with HTMLJavaScript conventionsVariables in JavaScriptJavaScript operatorsInput output in JavaScriptJavaScript functionsConditional StatementsLooping StatementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.21. JavaScriptJavaScript is a client-side scripting languageJavaScript was designed to add interactivity to HTML pages JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much moreBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.31. JavaScript.JavaScript is an interpreted language (means that scripts execute without preliminary compilation) JavaScript is usually embedded directly into HTML pages Everyone can use JavaScript without purchasing a license Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.41. JavaScript.JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, OperaBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.51.1 JavaScript: Common usesJavaScript gives HTML designers a programming tool JavaScript can react to events JavaScript can read and write HTML elementsJavaScript can be used to validate dataJavaScript can be used to detect the visitor's browser JavaScript can be used to create cookiesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.62. Embedding JavaScript in HTMLThere are two methods to embed JavaScript in to HTML codeInternal Script: directly written in HTML codeExternal Script: written in separate file tag is used to tell the browser that a script followsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.72.1 Internal ScriptsThe tag is used to embed JavaScript code in HTML documents[JavaScript Statements...]JavaScript can be placed anywhere between and tagstwo possibilities are the portion and the portionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.82.1 Internal ScriptsUsing Multiple scripts[JavaScript statements...][JavaScript statements...]This is another script[JavaScript statements...]Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.92.2 External ScriptWe place script in a separate file and include this in HTML codeSRC attribute of the is used to include the external JavaScript file in HTML Are useful when you have lengthy scriptsImprove the readability Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.103. JavaScript ConventionsUsing the Semicolondocument.write("Hello"); alert("Good bye")document.write("Hello")alert("Good bye")document.write("Hello");alert("Good bye");Case SensitivityComments: single line //Multiple lines /* */Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.113. JavaScript ConventionsUsing Quotesdocument.write(“Hello World”)document.write(“Hello World”)Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.124. Writing JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.13Start of JS scriptWriting on webpageHTML code in JSEnd of JS script4. Writing JavaScriptBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.14Out put of the JS code4.1 Variables in JavaScriptVariable is the name of a memory location which holds the data of a certain type (data types)There are four common data types in JavaScript numbers, strings, Boolean, null valuesJavaScript is a loosely typed languageBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.154.1 Variables in JavaScriptThe word “var” is used to declare a variablevar LastName = “Smith”var AccountNumber = 1111Variable NamingFirst character can not be a digitOther characters may be digits, letters or underscoreReserved words can not be usedCase sensitiveBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.164.1 Variables in JavaScriptVariable Initializationvar variableName = initialValuevar variableName1 = initialValue1, variableName2 = initialValue2, Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.175. JavaScript OperatorsAn operator is simply a symbol that tells the compiler (or interpreter) to perform a certain actionAssignment Operator: =Arithmetic Operators: +, - , *, /, %, ++, --Logical Operators: &&, ||, !Comparison Operators: ==, ===, !=, !==, , =Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.186. Input Out put in JavaScriptwrite(); is used to write on browser document.write(“hello world”)document.write(a)prompt(); is used to take input from usersvar num = prompt(“Please Enter a Number”, 0)6. Input Out put in JavaScriptBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.20Start of JS codeUser inputWriting on browserEnd of Script7. JavaScript FunctionUser defined functionsPredefined functionsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.217. JavaScript FunctionFunctions are defined using the keyword function, followed by the name of the function and list of parametersfunction functionName([parameters]){[statements]}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.227. JavaScript FunctionCalling a functionThe syntax of a function call is: functionName([arguments])Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.237. JavaScript FunctionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.24Start of the functionAsks user to enter nameWrites name on the webpageCalling a function7. JavaScript FunctionCommon eventsonClickonDblClickonChangeonFocusonMouseOveronMouseOutonSubmitonloadBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.257. JavaScript FunctionSome common predefined math functionsMath.sqrtMath.powMath.absMath.maxMath.minMath.floorMath.ceilMath.roundMath.random Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.268. Conditional StatementsIf statementif (condition) statementif(condition) { statements }If-else statementif(condition) {statement} else {statements}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.278. Conditional StatementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.28Random number is generatedUser’s InputIf condition)*108. Conditional StatementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.29On click eventtext9. LoopsFor loopfor(var i=1; i<10; i++){Document.write(“hello world”)}While loopWhile(condition){}Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.309. LoopsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.31For loopDo-while loop9. LoopsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.32Output of for loopOutput of do-while loopSummaryWhat is JavaScript?Embedding JavaScript with HTMLJavaScript conventionsVariables in JavaScriptJavaScript operatorsInput output in JavaScriptJavaScript functionsConditional StatementsLooping StatementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.33Chapter 11. Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. Chapter 2, Learn JavaScript, by Chuck Easttom, Wordware Publishing; 2002, ISBN 1-55622-856-234Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References