Clint Side Serptng Language Program Name : Computer Engineering Program Group Program Code : CO/CM/ALF/CW Semester : Fifth Course Title : Client Side Seripting Language (Elective) Course Code + 22519 1, RATIONALE Corse Coe 22519 JavaScript is limited featured client side programming language. JavaScript runs at the client end through the user's browser without sending messages back and forth to the server. It is widely used by the web developers to do things such as build dynamic web pages, respond to events, create interactive forms, validate data that the visitor enters into a form, control the browser etc, This course helps student to create highly interactive web pages using these features 2. COMPETENCY The aim of this course is to help the student to attain the following industry identified ‘competency through various teaching learning experiences: © Develop Dynamic Web Pages using JavaScript. 3 COURSE OUTCOMES (COs) The theory, practical experiences and relevant soft skills associated with this course are to be tiught and implemented, so that the student demonstrates the following industry oriented COs associated with the above mentioned competency: a) Create interactive web pages using program flow control structure, b) Implement Arrays and functions in Java script. cc) Create event based web forms using Java script. d) Use JavaScript for handling cookies. ©) Create interactive webpage using regular expressions for validations. 1) Create Menus and navigations in web Pages, 4. TEACHING AND EXAMINATION SCHEME Teaching { vn Scheme Credit Theory Practical Lf} p [tee per |_ESE PA ESE PAL Total Hes, [Max [tin | winx [Min | Max Max | Min [ Max | Min | Max | Min 3 2{s | 3 [w 30* | 00 2s# | 10 | 25 | 10 | so | 20 (*): Under the theory PA, Out of 30 marks, 10 marks are for micro-project assessment to facilitate integration of COs and the remaining 20 marks is the average of 2 tests 10 be taken during the semester for the assessment of the UOs required for the attainment of the COs. Legends: L-Lecture; T — Tutorial/Teacher Guided Theory Practice; P -Practical; C — Credit, ESE -End Semester Examination; PA - Progressive Assessment. 5. COURSE MAP(with sample COs, PrOs, UOs, ADOs and topics) This course map illustrates an overview of the flow and linkages of the topic: puis levels of outcomes (details in subsequent sections) to be attained by the studenf-B¥ the end“Bf the MSBTE, Page | of 8 1 Copy Dt. 29.03.2019Client Side Serpting Language Course Code: 22519 course, in all domains of learning in terms of the industry/employer identified competency depicted at the centre of this map. aa laces S S booms a “Bie dou é i a eee i —n w ae. € Poin cee ae og Se 7 i ome So Pine \ yy ye \, Shaan Figure 1 - Course Map 6. SUGGESTED PRACTICALS/ EXERCISES The practicals in this section are PrOs (i.e. sub-components of the COs) to be developed and assessed in the student for the attainment of the competency. xe Practical Outcomes (PrOs) 1. | Write simple javascript with HTML for arithmetic expression evaluation and messaze printing 2. | Develop JavaScript to use ing and looping statements, | 3 p_ JavaScript to implement Array functionalities. 4. [Develop JavaScript to implement functions. 5 6 Develop JavaScript to implement strings. Create a webpage using Form Elements. MSBTE ~ Final Copy Dt. 29.03.2019 Page 2 of 8 oe(tiem Side Serpting Language Course Code: 22519 |, | Approx. Sr. Practical Outcomes (PrOs) unit] i. No. No. ; Required | 7. | Create a webpage to implement Form Events, Part-l m | 02 8._ | Create a webpage to implement Form Events, Part-ll mi | __02* 9,_ | Develop a webpage using Intrinsic Java Functions. m | 02 10, | Develop a webpage for creating session and persistent cookies w | 02 |__| Observe the effeets with Browser cookie settings. 11. | Develop a webpage for placing the Window on the sereen and W | 02 working with child window. 12, | Develop a webpage for validation of form fields using regular v | 02 expressions. 13, | Create a webpage with Rollovers effect vi | 02 14. | Develop a webpage for implementing Menus. vi | 0 15, | Develop a webpage for implementing Status bars and Web Page| VI | 02 Protection. 16. | Develop a webpage for implementing Slideshow, banner. vi 0 Total 32 Note: iA suggestive list of PrOs is given in the above table. More such PrOs can be added to attain the COs and competency. A judicial mix of minimum 12 or more practical need 10 be ‘performed, out of which, the practicals marked as ‘*” are compulsory, so that the student reaches the ‘Application Level’ of Bloom's Taxonomy’ as generally required by the industry. ii, 50% of Lab assignments must be done using traditional editor and run in different browsers so as 10 build up fundamental understanding capabilities of students. iii, The ‘Process’ and ‘Product’ related skills associated with each PrO are to be assessed according to a suggested sample given below: S.No. Performance Indicators Weightage in % 1__ | Use of relevant tags and attributes 10 2 | Correctness of Coding. 40 4 _| Testing and Debugging of the Program. 30 - 5__| Appearance of Program Output. _ 10 6 _| Submission of report in time. 10 | _ Total - 100 The above PrOs also comprise of the following social skills/attitudes which are Affective Domain Outcomes (ADOs) that are best developed through the laboratory/field based experiences: a. Follow safety practices. b. Practice good housekeeping, c. Demonstrate working as a leader/a team member. d. Follow ethical practices. ‘The ADOs are not specific to any one PrO, but are embedded in many PrOs. Hence, the acquisition of the ADOs takes place gradually in the student when s/he undertakes a series of practical experiences over a period of time. Moreover, the level of achievement of the ADOs according to Krathwohl’s ‘Affective Domain Taxonomy’ should gradually increase as planned below: * ‘Valuing Level” in 1% year © ‘Organising Level’ in 2"! year MSBTE — Final Copy Dt. 29.03.2019 Page 3 of 8Client Side Sergcing Language Course Coe: 22519 © ‘Characterising Level’ in 3" year. 7. MAJOR EQUIPMENT! INSTRUMENTS REQUIRED The major equipment with broad specification mentioned here will usher in uniformity in conduct of experiments, as well as aid to procure equipment by authorities concerned. Equipment Name with Broad Specifications 1 | Browser and Notepad/any Text editor) 2__| Free Web page Designing Tool 3__[ Any IDE like Eel se 8. UNDERPINNING THEORY COMPONENTS ‘The following topics are to be taught and assessed in order to develop the sample UOs given below for achieving the COs to attain the identified competency. More UOs could be added. Unit Outcomes (UOs) Unit (in cognitive domain) Topies and Sub-topies Unit—1 Ta, Create object to solve the | 1.1 Features of JavaScript Basics of given problem, 1.2 Object Name, Property, method, Dot JavaSeript | 1b. Develop JavaScript to syntax, main event. Programmi implement the switch-case | 1.3 Values and Variables ng statement for the given 1.4 Operators and Expressions- Primary problem. Expressions, Object and Array Je, Develop JavaScript to initializers, funetion definition plement loop for solving expression, property access the given iterative problem, expressions, invocation expressions. 14, Display properties of the | 1.5 If Statement, if...clse, if.elseif, nested given object using getters if statement. and setters, 1.6 Switeh...case statement le, Develop program using 1.7 Loop statement — for loop, for...in loop, basic features of JavaScript while loop, do...while loop, continue to solve the given problem, statement. 1.8 Querying and setting properties and deleting properties, property getters and setters, Unit . Create array to solve the | 2.1 Array - declaring an Array. Initializing Array, given problem an Array, defining an Array elements, Function | 2b. Perform the specified string Looping an Array, Adding an Array and String manipulation operation on clement, sorting an Array element, the given String(s). Combining an Array elements into a 2c. Develop JavaScript to String, changing elements of an Array, implement the given Objects as associative Arrays funetion. 2.2. Function — defining a funetion, writing 2d. Develop JavaScript to a function, adding an arguments, scope convert the given Unicode of variable and arguments, to character form 2.3 Calling a function — calling a function 2c. Develop JavaScript to with or without an argument, calling convert the given character function from HTML, functioge to Unicode and vice-versa. another function. Returning’ a val | | _ froma function by S MSBTE ~ Final Copy Dt. 29.03.2019 Page 4 of 8{lien Side Scripting Language course Code: 22519 Unit Outcomes (UOs) Unit | _‘Gneognitive domain) Topics and Sub-topies | 2.4 String ~ manipulate a string, joining a string, retrieving a character from given position, retrieving a position of character in a string, dividing text, copying a sub string, converting string to number and numbers to string, changing the case of string, finding a Unicode of a character-charCodet(), fromCharCode().. Unit- 11 3a, Write JavaScript to design | 3.1 Building blocks of a Form, properties Form and a form to aceept input and methods of form, button, text, text Event values for the given area, checkbox, radio button, select Handling problem, element. 3b. Use JavaScript to 3.2 Form events- mouse event, key events. implement form events to | 3.3 Form objects and elements. solve the given problem. | 3.4 Changing attribute value dynamically. 3c, Develop JavaScript to 3.5 Changing option list dynamically dynamically assign 3.6 Evaluating checkbox selection specified attribute value to | 3.7 Changing a label dynamically the given form control. __| 3.8 Manipulating form elements 3d. Use the given intrinsic | 3.9 Intrinsic JavaScript functions, disabling function with specified elements, read only elements. parameters. Unit-1V___ |4a. Create cookies based on the | 4.1 Cookies — basic of cookies, reading Cookies and | — given problem. cookie value, writing a cookie value, Browser —_|4b. Develop JavaScript to creating a cookies, deleting a cookies, Data manage a cookie in the given] setting the expiration date of cookie manner. 4.2 Browser — opening a window, giving 4c, Write JavaScript to the new window focus, window manipulate the specified position, changing the content of attributes of window object, window, closing a window, serolling a in the given manner. web page, multiple windows at once, 4d, Write JavaScript to create creating a web page in new window, browser history of the given JavaScript. in URLs, — JavaScript object. security, Timers, Browser location and histor Unit -V 5a, Compose relevant regular | 5.1 Regular Expression - language of Regular expression for the given regular expression, finding non Expression, | character pattern search matching characters, entering a range of Rollover and |5b. Develop JavaScript to characters, matching digits and non Frames implement validations using | digits, matching punctuations and the given regular expression.) symbols, matching words, replacing a Se, Create frames based on the the text using regular expressions, given problem, returning the matched characters, 5d. Create window object as per |__ regular expression object - the given problem. | 5.2 Fr MSBTE — Final Copy Dt. 29.03.2019 Page 5 of 8lien Side Scripting Language Unit page Menus, navigation and web protection Unit ~ Unit Outcomes (UOs) (in cognitive domain) Couse Code: 22519 ‘Topies and Sub-topies Se. Develop JavaScript for creating rollover effect for the given situation, VI 6a. Develop JavaScript to manage the given status bar.| changing the message using rollover, 6b. Develop JavaScript to create] moving the message along the status bar the given banner. 6c. Develop JavaScript to create the given slide show. | _ advertisement to url 6d. Develop JavaScript to create | 6.3 Slide Show ~ creating a slide show the given Menu. 6e. Write JavaScript to protect a, dynamically changing a_—_-menu, webpage in the specified manner. Note: To attain the COs and competency, above listed UOs need to be undertaken to achieve the ‘Application Level’ of Bloom's ‘Cognitive Domain Taxonomy" borders of frame, calling a child windows, changing a content and focus of a child window, writing to a child window, accessing elements of another child window. 5.3 Rollover ~ creating rollver, text rollver, Multiple actions for rollover, more | efficient rollover. 6.1 Status bar- builds a static message, 6.2 Banner loading and displaying, banner advertisement, Linking a banner 6.4 Menus- creating a pulldown menu, validating menu selection, Floating menu, chain select menu, tab menu, pop-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, JavaScript, concealing email address. 6.6 Frameworks of javasript and its application 9. SUGGESTED SPECIFICATION TABLE FOR QUESTION PAPER DESIGN ; __., | Distribution of Theory Marks wu Unit Title preaching |R U | A | Total No | Level_| Level | Level_| Marks T_ | Basies of JavaScript Programming 10 os | o¢ | of | 12 T_| Array, Function and String 10 02 | o4 | 08 | 14 TI_| Form and Event Handling 06 oa a IV_| Cookies and Browser Data 06 a | 2 | oF | 08 vy _| Regular Expression, Rollover & os o | | 06 | 14 Frames | yp_| Menus, navigation and web page - 2 lo) wp protection 2 Total 8 4 | 24 Legends: R=Remember, U=Understand, A~Apply and above (Bloom's Re’ MSBTE — Final Copy Dt. 29.03.2019 Page 6 of 8Client Side Scripting Language Course Cote: 22519 Note: This specification table provides general guidelines to assist students for their learning and to teachers to teach and assess students with respect to attainment of UOs. The actual distribution of marks at different taxonomy levels (of R, U and A) in the question paper may vary from above table. 10. SUGGESTED STUDENT ACTIVITH Other than the classroom and laboratory learning, following are the suggested student-related co-curricular activities which can be undertaken to accelerate the attainment of the various outcomes in this course: a) Prepare journals based on practical performed in laboratory. b) Prepare powerpoint presentation or animation for understanding different Client side scripting Concepts. LL. SUGGESTED SPECIAL INSTRUCTIONAL STRATEGIES (if any) These are sample strategies, which the teacher can use to accelerate the attainment of the various outcomes in this course: a) Massive open online courses (MOOCs) may be used to teach various topies/sub topics. b) ‘L’ in item No. 4 does not mean only the traditional lecture method, but different types of teaching methods and media that are to be employed to develop the outcome: ©) About 15-20% of the topics/sub-topics which is relatively simpler or descriptive in nature is to be given to the students for self-directed learning and assess the development of the COs through classroom presentations (see implementation guideline for details) 4 With respect to item No.10, teachers need to ensure to create opportunities and provisions for co-curricular activities: ©) Use different Audio Visual materials for Concept understanding, f) Guide student(s) in undertaking micro-projects. 2) Encourage students to refer different websites to have deeper understanding of the subject. h) Observe continuously and monitor the performance of students in Lab. i) 50% of Lab assignments must be done using traditional editor and run in different browsers so as to build up fundamental understanding capabilities of students. 12. SUGGESTED MICRO-PROJECTS Only one micro-project is planned to be undertaken by a student that needs 10 be assigned to him/her in the beginning of the semester. In the first four semesters, the micro-project are group-based. However, in the fifth and sixth semesters, it should be preferably be individually undertaken to build up the skill and confidence in every student to become problem solver so that s/he contributes to the projects of the industry. In special situations where groups have to be formed for micro-projects, the number of students in the group should not exceed three. The micro-project could be industry application based, internet-based, workshop- based, laboratory-based or field-based, Each micro-project should encompass two ot more COs which are in fact, an integration of PrOs, UOs and ADOs. Each student will have to maintain dated work diary consisting of individual contribution in the project work and give a seminar presentation of it before submission. The total duration of the micro-project should not be less than 16 (sixteen) student engagement hours during the course. The student ought to submit micro-project by the end of the semester to develop the industry oriented COs, ‘A suggestive list of micro-projects is given here. Similar micro-pr guid be added by the concerned faculty: Pasa MSBTE~ Final Copy Di 29032019 Page ToSide Sexpting Language Course Code: 22519 ) Create a web page that displays buyers information entry form containing name, address, city, pin code, mail Id, Phone Number, product details . payment mode. Frame different validation rules for user inputs. Use JavaScript and regular expressions to perform error checking on user input as per validation rules. ) Build a simple slide show in JavaScript with six unique images. Design appropriate web page with at least two sections: with slide show in one section. When any image on this slide show is clicked display information about it in other section, Use features for controlling window locations. ©) Design and create web pages of an institute with different sections. Use pulldown ‘menus in one section and implement validation of menu selections. Use other sections for displaying information about respective selected menu item. 4) Create a simple animation in JavaScript : create a basic page showing circle of white marble. Using the setTimeout() method create an animation on the page that that makes an orange marble rotate around this circle by moving the orange marble to the next location in the circle every second. Allow the user to stop the animation by placing the cursor on any marble(use clearTimeout()).. 13. SUGGESTED LEARNING RESOURCES Title of Book Author Publication JavaScript Demystified | Keogh. Jim McGraw-Hill, 2015, New Delhi ISBN: Wily India, New Delhi ISBN:0-7645-5587-1 Wily India, New Delhi, 2015, ISBN:81-265-1304-7 TechMedia, New Delhi, 2015, ISBN:978-0-672-33608-9 MePeak, Jeremy and Wilton, Paul 4 JavaScript in 24 hours | Moncur, Michael (SAMS teach yourself) 1 2.| Beginning JavaScript | Wilton, Paul 3 Beginning JavaScript 14. SOFTWARE/LEARNING WEBSITES, a) hitps://www.w3schools.com b)_http://www.nptelvideos.com ©) http://www tutorialspoint.com, 4) Http:/favapoint.com MSBTE ~ Final Copy Dt. 29.03.2019 Page 8 of 8