Syllabus... Unit ts Basics of JavaScript | Programming Unit ii: Array, Function ‘end String Unit Outcomes (Uos) (in cognitive domain) 1a) Create object to solve the given problem. Develop JavaScript to implement the switch-case statement for the given problem. Develop JavaScript to implement loop for solving the given iterative problem. Display properties of the given object using getters and setters. Develop program using basic features of JavaScript to solve the given problem. Create array to solve the given problem. Perform the specified string manipulation operation on the given String(s). Develop JavaScript to implement the given function. Topics and Sub-topics 1,1 Features of JavaScript 1.2Object Name, Property, method, Dot syntax, main event. 1.3 Values and Variables 1,4Qperators and Expressions- Primary Expressions, Object and Array initializers, function definition expression, property access expressions, invocation expressions. 1.5|f Statement, if. else, if. elseif, nested if statement. 1.6 Switch ...case statement 1.7Loop statement - for loop, for...in loop, while loop, do...while loop, continue statement. 1.8 Querying and setting properties and deleting properties, property getters and setters. 2.1 Array : declaring an Array, Initializing an Array, Defining an Array elements, Looping an Array, Adding an Array elements, Sorting an Array elements, Combining an Array elements into a String, Changing elements of an Array, Objects as associative Arrays. 2.2 Function ; defining a Function, writing a Function, adding an arguments, scope of variable and arguments | 2.3Calling a function : calling a ae(Uos) (in cognitive domain) Unit Unit Outcomes Topics and Sub-top) = cg 2d) Develop JavaScript function with or Without a, argument, calling fun, | from HTML, function to convert the given funetion | Unicode to another function, Faking | character form. value from a function 2e) Develop JavaScript 2.4 String | manipulate a sting, to convert the given joining @ string, retrieving , | eharactoric) character from given Position, | Unicode the vice- retrieving a position | character in a string, dividing text, copying a substring, converting string to number, numbers to string, changing the case of string, finding a Unicode of a character charCodeAt(), fromCharCode(). versa. Unit Ill : Form 3a) Write JavaScript to | 3.1 Building blocks of a Form, and Event design a form to properties and methods of Handling \ form, button, text, text area, accept input values | checkbox, radio button, selec for the given element problem. 3.2Form events — mouse event, 3b) Use JavaScript to key events implement form 3.3 Form objects and elements fs events to solve the | 3-4Changing attribute V2 ‘A Peper dynamically fst given problem. =| 3.5Changing option 3c) Develop JavaScript dynamically von to dynamically | 3.6 Evaluating checkbox select call assign specified | 3.7 Changing a label cyan attribute value to | 3.8 Manipulating form elem a nc the given form | 3.9 Intrinsic JavaScript oe os disabling elements: re elements. control. 3d) Use the given intrinsic function with specified parameters(in cognitive domain) a Unit Outcomes (Uos) Topics and Sub-topics Unit V : Regular Expression, Rollover and Frames Geren 4a) 4b) Create cookies based on the given problem. Develop JavaScript to manage a cookie in the given manner. Write JavaScript to manipulate the specified attributes of window object in the given manner. Write JavaScript to create browser history of the given object. Compose relevant regular expression for the given character pattern search. Develop JavaScript to implement validations using the given character pattern search. Develop JavaScript to implement validations using the given regular expression. Create frames based on the given problem. Create window object as per the given problem, Develop JavaScript for creating rollover effect for the given situation. 4.1 Cookies ~ basic of cookies, reading a cookie value, writing a cookie value, creating a cookies, deleting a cookies, setting the expiration date of cookie. 4,2 Browser — opening a window, giving the new window focus, window position, changing the content of window, closing a window, scrolling a web page, multiple windows at once, creating a page in new window, JavaScript in URL’s, JavaScript security, Timers, Browser location and history. 5.1 Regular Expression - language of regular expression, finding non matching characters, entering a range of characters, Matching digits and non-digits, matching punctuations and symbols, matching words, replacing a text using regular expressions, returning the matched characters, regular expression object properties. 5.2Frames — create a frame, invisible borders of frame, calling a child window, changing a content and focus of a child window, writing to a child window, —_ accessing elements of another child window. §.3 Rollover — creating rollover, text rollover, multiple actions for rollover, more efficient rollover. aUnit VI: Menus, navigation and web page protection Refer chapter 6 Unit Outcomes (Uos) (in cognitive domain) Toples and Sub-topicg 6a) Develop JavaScript to manage the given status bar Develop JavaScript to create the given 6.1 Status bar — builds a Stati NC message, changing fe message using rollover moving the Message ajo, | the status bar 9) 6b banner. 6.2Banner — loading a | 6c) Develop JavaScript displaying banner to create the given acvertisement, linking a sae a banner advertisement to ur i 6.3 Slide show -— | 6d) Develop JavaScript a OW = creating a ads | to create the given Menu. Write JavaScript to Protect a webpage 6.4 Menus —~ creating a pull down | menu, dynamically changing 2 | menu, validating — menu | Selection, floating menu, chain 6e in the specified select menu, tab menu, pop- manner, up menu, sliding menu, highlighted menu, folding a tree menu, context menu scrollable menu, side bar menu 6.5 Protecting web page — hiding your code, disabling the right mouse button using JavaScript, concealing email address 6.6Frameworks of JavaScript and its application| Basics of JavaScript Programming Features of JavaScript Object Name, Property, method, Dot syntax, main event. Values and Variables Operators and Expressions- Primary Expressions, Object and Array initializers, function definition expression, property access expressions, invocation expressions. If Statement, if... else, if..elseif, nested if statement. Switch ...case statement Loop statement - for loop, for...in loop, while loop, do...while loop, continue statement. Querying and setting properties and deleting properties, property getters and setters. *¥ Introduction to JavaScript JavaScript? Enlist different uses of JavaScript. the need of Java script. to write JavaScript program? How to print data ‘in JavaScript? * JavaScript is a dynamic computer programming language that executes on the browser. It modifies static HTML web pages into interactive web pages by dynamically updating content, validating form data, controlling multimedia, animate images on the web pages.a i Client Side Scripting Language (MSBTE) (Basics of JavaScript Prog.) Pg an (1-2) It is a scripting language for creati i iene aaness Cre eaapemeeae apes Sonam web page content, j, creates elements for improving site visitors’ interaction with web : . i ‘i pa; such as dropdown menus, animated graphics, and i Bes i grap! and dynamic background cotors © Ic is lightweight and most commonly used as a part of web pages, wh, implementations allow client-side script to interact with the — i make dynamic pages. hy * Tt is an interpreted programming language with object-oriente, capabilities: : * JavaScript was initially created to “make web pages alive”. © The program in this language is called scripts. They can be written with, HTML in a web pages and run automatically as the page loads. e — Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run. e JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. «The browser has an embedded engine sometimes called a “JavaScript virtual machine” and the different engines have different codenames like 8 in Chrome, Opera and Edge, and SpiderMonkey in Firefox. 's commonly used for client-side scripting on the World Wide © JavaScript i rver applications and Web, and it is increasingly being used for writing se: services using Node.js. t= History : * JavaScript was invented by Bi ECMA standard in 1997. ; * JavaScript became a fully independent language with specification called ECMAScript. * ECMAScript is the official name of the language and it is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. * ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5: and BS6. Since 2016 new versions are named by year (ECMAScript 2016 / 2017/2018). ae yendan Eich in 1995, and became an its own Pil Tech-Neo Publications i (sew Syl wef academic year 19-20) (D5-16A)Client Side Scripting Language (MSBTE) (Basics of JavaScript Prog.) Pg. no. (1-3) s use JavaScript can put dynamic text into an HTML page. e JavaScript can react to events. JavaScript can read and write HTML elements. JavaScript can be used to validate data. JavaScript can be used to detect the visitor’s browser. — JavaScript can be used to create cookies & Why Study JavaScript? JavaScript is one of the three languages all web developers must learn: 1. HTML to define the content or structure of web pages. 2. CSS to specify the layout of web pages. It described the look and formatting of a document. 3. JavaScript to program defines dynamic behavior of web pages; provides programming logic for interaction with the user and handle user events. s= Editor There are different editors for writing the JavaScript program: i. Notepad 2. Visual Studio Code 3. Eclipse 4, Atom 5. Sublime Text 6, Brackets 7. NetBeans 8. Vim 5 How to write JavaScript program? * JavaScript can be inserted within the head, the body, or use external JavaScript file © The HTML tag is used to insert a JavaScript into an HTML page Syntax "yayasctipt” type" text/javascript” sre = "extemal Sscript language Jay script file pa! ef academic year 19-20) (D5-16A) (el Tech-Neo Publications (Ne(Basics of JavaScript Pre, nguage (MSBTE Javascript code gors here OR * The language and type attributes not required in new JavaScript Version It is optional “ * Ending statements with a semicolon is Optional; required when We ven to put multiple statements on a single line. J There are three different ways JavaScript can be used in HTML, such as. f 1. Inline JavaScript Inline JavaScript, the JavaScript code can be add in HTML tags in Some special JavaScript-based attributes. For example, HTML tags have event attributes that allow to execu: some code inline when an event is triggered. Example : : eeript type = "extjavaSeript"> ; const person = {fname:"Ravi", Iname:"Somwanshi”, age:25}; : for (let x in person) { document.write(person[x} + “
") : . : : Output Ravi > Object Example on 2. By creating instance of Object * Create a new JavaScript object using new Object() and tt® doe: Properties. a pga pe Be . heed : Z const panes = how Object, Exa person. names "Ray; : : eh Person.Inames: “Somwanshi"; eh enon-tge25; t Wment-write(perso, sont < : ni ; vig" + pes a years old.”); PaO 8H person.iname + "is" + P™ “1 S/scripi> a -Client Side Scripting Language (MSBTE) (Basics of JavaScript Prog.) Pg. no. (1-9) Ravi Somwanshi is 25 years old. 3. By using an Object constructor « We need to create function with arguments and each argument value can be assign in the current object by using this keyword e The this keyword refers to the current object. Example 4. nested if statement Nested if statements mean one if statement inside another if statement. Syntax 4f (condition) { #/ Executes when condition} is tue if (condition?) { / Executes when condition? is true } } Example Output 12345 » 5. Continue statement The continue statement “jumps over” one iteration in the loop. It breaks or skips iteration in the loop, if a specified condition occurs and continues executing the next iteration in the loop. Syntax continue: oe OR ; continue[label]; /f Using the label reference — Example : a ication” (New Syll. w.e.f academic year 19-20) (D5-16A) [al rech-Neo Publicatto Clie > 6. Break statement * The break statement is used to jump out of a loop. © Itcan be used to “jump out” of a switch() statement. ¢ It breaks the loop, if a specified condition occurs and continues executing the code after the loop. (New Syll, w.e.f academic year 19-20) (D5-16A) [al rech-neo Publications eeeClient Side Scripting Language (MSBTE) _(Basics of JavaScript Prog.) Pg. no. (1-49) ae ee ee ea iffie 3) break; é document.writeli + ""; + Output 1 ; : Ne Here, only values 1 and 2 are present, remaining skip using break ‘statement. TTING PROPERTIES AND To See Oren PROPERTY GETTERS AND SETTERS eg . Explain the term Que suitable example, 2. 1.8.1 Querying and Setting Properties S€ Property Access Expressions ¢ A property access expression evaluates to the value of an object property or an array element. « — JavaScript defines two syntaxes for property access: 1. expression.identifier 2. expression [expression] © The first style of property access is an expression or object nam* followed by a period or (.) dot and an identifier or property name. ¢ The expression specifies the object, and the identifier specifies the nat of the desired property. ¢ The second style of property access follows the first expressic! : with another expression i re brackets. » (the (New Syll. wef academic year 19-20) (D5-16A) fal Tech-Neo Publicatio” ae This second expression specifies the name of the desired property or the index of the desired array element Example aro = (xclyr{es3} v/ An example object o edra = fA[5.6]) /f An example array a that contains the object o ox => 1: property x of expression o oye => 3: property 2 of expression o.y ok} => 1: property x of object o afi] => 4: element at index 1 of expression a aft} => 6: element at index 1 of expression a{2] afQ}x => 1: property x of expression a[0] © If the object expression is followed by a dot and an identifier, the value of the property named by that identifier is looked up and becomes the overall value of the expression. « If the object expression is followed by another expression in square brackets, that second expression is evaluated and converted to a string. The overall value of the expression is then the value of the property named by that string. * To obtain the value of a property, use the dot (.) or square bracket ([]) operators described in Property Access Expressions. * The left-hand side should be an expression whose value is an object. ¢ If using the dot operator, the right-hand must be a simple identifier that names the property. + If using square brackets, the value within the brackets must be an expression that evaluates to a string that contains the desired property name Example var author = book.author; // Get the "author" property of the book. var name = author.surname // Get the "surname" property of the author, var title = book{"main title") // Get the "main title" property af the book. we would to * To create or set a property, use a dot or square bracket query the property, but put them on the left-hand side of an assignment expression. (New Syll. w.e.f academic year 19-20) (D5-16A) lal rech-nveo PublicationsExample book edition = 6; / Greate an “edition” property OP hook pook/"main title?) = “ECMAScript”: iy Set the “main title” propery e@ = When using square bracket notation, we have said that the Expression inside the square brackets evaluate to a string © A more precise statement is that the expression must evaluate to a String or value that can be converted to a string or to a symbol * YW 1.8.2 Deleting Properties e The delete operator deletes a property from an object. e@ The delete operator deletes both the value of the property and the property itself. e After deletion, the property cannot be used before it is added back again. « The delete operator is designed to be used on object properties. It has no effect on variables or functions. Syntax delete expression OR delete object.property delete object{ property] Example UQ. Write 2 Java script to create person object with properties firstname, lastname, age, eyecolor, delete eyecolor property and display remaining properties cf person object. Yt wef academic 9-20) A ef academic year 19-203 (05-168) al rech-nveo Publication ij -Client Side Scripting Language (MSBTE) __ (Basics of JavaScript Prog ) Pg_no. (1-43) nee neve nreunetnnsnentasseransrtonare sia oat o'3), firetname:"Ravi". lastname:"Somwanshi’, age:25, eyecolor:"black” h document.write("Before delete: "+ person.firstname +""+ person.lastname +" "+person.age +""+ person.eyecolor +"
"); delete person.eyecolor; —_//delete person eyecolor document. write("After delete: "+ person firstname +""+ person.lastname +" "+person.age +" "+ person.eyecolor); : Output Before delete: Re fl After delete: Ravi shi 25 undefined % 1.8.3 Property Getters and Setters S€ Object Properties © — Object in JavaScript is an unordered collection of Key-Value pairs. * Each key-value pair is known as property; where key is the name of the property, * JavaScript uses it to search for the property in the collection. * Properties can usually be added, updated, and deleted, excluding read- only properties, In JavaScript, there are two kinds of object properties: Data properties Accessor properties / Getters and Setters ry. Data properties * If the value of the property is a primitive value, object, or function then the property is Data Property, (New Syll. w.e.f academic year 19-20) (D5-16A) [al rech-Neo PublicationsClient Side Scripting Language (MSBTE) __(Basics of JavaScript Prog) Pg. no. (1.44 44) ¢ Note that, when the value of a property is a function, then we call the property as a method. Example const student = { firstName: “Ravi”; data property >» 2. Accessor properties / Getters and Setters © If the property consists of getter and setter methods, then we call the property Accessor Property. e In JavaScript, accessor properties are methods that get or set the value of an object. © — get - to define a getter method to get the property value * set - to define a setter method to set the property value e The accessor properties; they are essentially functions that work on getting and setting a value. Accessor properties are represented by “getter” and “setter” methods. In ° an object literal they are denoted by get and set as keywords. « An object property is a name, a value and a set of attributes. The value may be replaced by one or two methods, known as setter and a getter. = When program queries the value of an accessor property, JavaScript invoke getter method(passing no arguments). The return value of this method becomes the value of the property access expression. « When program sets the pale of an accessor Property. JavaScript invoke the setter method, passin the value of right-hand side of assignment This method is responsible for setting the property value. rand a If property has both gette! Setter method, it is read/write property. e If property has only a getter method, it is read- roperty has only a setter method, itis only property, i 4 write-only Property. “pyew Syl wef acadernic Year 19-20) (05.169) fal Tech-Neo Publications ,. £« & 7 wae apClient Side Scripting Language (MSBTE) eB © Getter Method © In JavaScript, getter methods are used to access the properties of an object Syntax get propName() { getter, the code executed on geting obj.propName } Example let student = { : firstName: "Ravi", get getName() { : return this.firstName; ; ‘et document.write(student.getName);_ // Ravi ¢ In the above program, a getter method getName() is created to access the property of an object. ¢ To create a getter method, the get keyword is used. « Also when accessing the value, we access the value as a property. Example document.write(student.getName); * When we try to access the value as a method or function, an error occurs. Example document. write(student.getName()); // error ‘= Setter Method * In JavaScript, setter methods are used to change the values of an object. (New Syll. w.e.f academic year 19-20) (D5-16A) [al rech-Neo PublicationsSere eee ee Client Side Scripting Language (MSBTE)__ (Basics of JavaScript Prog.) Py. 1. el: Syntax set propName(value) r // setter, the code executed on setting - obj.propName = value } Example let student = {— firstName: "Ravi", get getName() Getter { return this.firstName. }, set changeName(newName) Setter { . this.firstName = new Name; hk document.write(student.getName); Ravi student.changeName = 'Prashant’; documentwrite(student-getName); // Prashant «Inthe above example, the setter method is used to change the value of # object. e Tocreate a setter method, the set keyword is used As shown in the above program, the y, ale peaaier : a value is changed to Prashant Of FirstName is Ravi then? Example etudent.changeNamme = “Prashany, 5 Setter must have exactly one f ‘Ormal paran: _ Sater ot Mv sy oe eter, os ‘eademic » & <2 atl year 19-20) (D5-16a) (al, h : ech-Neo Publicatio’Client Side Scripting Language (MSBTE) (Basics of JavaScript Prog.) Pg. no. (1-47) ‘Get id Setter nme pee Jet student = { firstName: "Ravi", #/ data property get getName() // accessor property (getter) { : return thisfirstName; ~ }, ee set changeName(newName) ° //accessor property(setter) this.firstName = newName; : : } ; B ; document.write("Name by Data Property: " +student.firstName+"
"); document.write("Name by Getter Method: " +student.getName +"
"); student.changeName = 'Prashant’; // change(set) object property using a setter document.write("New Name by Setter Method: "+student.getName); S/script> Output Name by Data Property: Ravi Name by Getter Method: Ravi New Name by Setter Method: Prashant ** Object.defineProperty() Method In JavaScript, we can also use Object.defineProperty() method to add Setters and setters. (New Syil. wet academic year 19-20) (D5-16A) Tech-Neo Publications - “aREsClient Side, SB’ (Basics of Do. (1-48) Syntax © The Object.defineProperty() method takes three arguments. © The first argument is the objectName. © The second argument is the name of the property, ° ‘The third argument is an object that describes the property. i eclipeneaaama ik adem iat maaa ariel etreateeeaiieaiital oe pesting prope) # -dofinePropenycetudents "changeName", ef acader'” year 19-20) (D5 164) (al ay Syl. oer 80 Publication’ ige (MSBTE) (Basics of JavaS: “set : function (value) q this.firetName = value: ys: Gocument.write(student.firstName); // Ravi ‘student.changeName = “Prashant”; /{ changing the property value document.write(student.firstName); // Prashant Output Revi : : * In the above example, Object.defineProperty() is used to access and change the property of an object. Chapter Ends... gaa