Clie Side Scripting Language in Artificial Program Name: Computer Engineering Progiam Group / Diplou Intelligence and Machine Learning / Diploma in Cloud Computing and Big Data / Diploma in Computer Hardware & Maintenance Program Code: CO/CM/F/CW/AN/BD/HA Semester : Fifth Course Title : Client Side Seripting Language (Elective) Course Code 222519 1. RATIONALE 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. uCOMPETENCY 2. COMPETENCY The aim of this course ia 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 taught 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. ©) Create event based web forms using Java script. 4) Use JavaScript for handling cookies. ©) Create interactive webpage using regular expressions for validations. £) Create Menus and navigations in web Pages. 4. TEACHING AND EXAMINATION SCHEME ng amination Scene Credit Theory Practical Lu] Tt] p [OTP [ESE PA Total ESE PA Total re [ax Min [Max [Min [Max | Mx | Min [Max | tin Mo | Min S]=[ es Ls [7 [a8 [30° [00 [100 [a0 | 25e | 10 | 28 | 10 | 50 | 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. senor 5. COURSE MAP(with sample COs, PrOs, UOs, ADOs and topics) MSBTE — Final Copy Dt. 11.07.2023 Page 1 of 8Client Side Scripting Language Course Code: 22519 This course map illustrates an overview of the flow and linkages of the topics at various levels of outcomes (details in subsequent sections) to be attained by the student by the end of the course, in all domains of learning in terms of the industry/employer identified competency depicted at the centre of this map. 7 a ey ea ioe {cama y WT... ~~ fines 7 Boma C Siti S28 oaN See? aoe Gey; ra! 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. _ | Approx. S Practical Outcomes (PrOs) Unit | rs. No. No. : Required T._| Write simple javascript with HTML for arithmetic expression T | 92 evaluation and message printing GET Develop JavaScript to use decision making and looping statements. Develop JavaScript to implement Array functionalities. Develop JavaScript to implement functions. sels] MSBTE — Final Copy Dt. 11.07.2023 Page 2 of 8Client Side Serpting Language ‘Course Code: 22519 Practical Outcomes (PrOs) - '5._| Develop JavaScript to implement strings. aie Se On 02 6._| Create a webpage using Form Elements. (air 02" 7._| Create a webpage to implement Form Evenis, Part-I m | 02* 8._| Create a webpage to implement Form Events. Part-II m | _0* . | Develop a webpage using Intrinsic Java Funetions. m [0 10. | Develop a webpage for creating session and persistent cookies. v | 0" Observe the effects with Browser cookie settings. 11. | Develop a webpage for placing the Window on the screen and vv | 0 working with child window. 12. | Develop a webpage for validation of form fields using regular Vv 02 expressions 13, | Create a webpage with Rollovers effect. VI 2 14, [ Develop a webpage for implementing Menus. avi =matg3* 15. | Develop a webpage for implementing Status bars and Web Page VI 02 Protection. 16. | Develop a webpage for implementing Slideshow, banner. vi [__ 03 Total 32 Note: i A 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 to 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 0 as to build up fundamental understanding capabilities of students, iti 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 Pj acquisition of the ADOs takes place gradually in the student when s/he un, practical experiences over a period of time. Moreover, the level of achie according to Krathwohl’s ‘Affective Domain Taxonomy’ should graduall below: MSBTE — Final Copy Dt. 11.07.2023 Page 3 of 8(tiem Side Scrping Language Course Code: 22519 * ‘Valuing Level’ in 1* year * ‘Organising Level’ in 2" year © ‘Characterising Level’ in 3 year. 7. MAJOR EQUIPMENT/ INSTRUMENTS REQUIRED The major equipment with broad specification mentioned here will usher in uniform conduct of experiments, as well as aid to procure equipment by authorities concerned. A Equipment Name with Broad Specifications xO: |_| Browser and Notepad/any Text editor? All 2_| Free Web page Designing Tool All 3__| Any IDE like Eclipse All 8. __ UNDERPINNING THEORY COMPONENTS The fallowing topies are ta be tanght and assessed in artder to develop the sample. 110s given below for uchieving the COs to allain the ideutified competency. More UOs could be added. Unit era Topics and Sub-topics Unit=1 | Ta. Create object to solve the | 1.1 Features of JavaScript Basics of given problem. 1.2 Object Name, Property, method, Dot JavaScript | 1b. Develop JavaScript to syntax, main event. Programmi | implement the switch-case | 13 Values and Variables ng statement for the given 14 Operators and Expressions Primary problem. | Expressions, Object and Array Ie. Develop JavaScript to initializers, function definition implement loop for solving | expression, property —_access the given iterative problem expressions, invocation expressions. 1d. Display properties ofthe | 1.5 If Statement, if...else, if..elseif, nested given object using getters if statement. and setters. 1.6 Switch...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 2a, 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 element, 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 | function. 2.2 Function — defining a function, writing 2d. Develop JavaScript to a funetion, adding an arguments, scope convert the given Unicode of variable and arguments 67; to character form. Calling a funetion — 2e. Develop JavaScript to convert the given character MSBTE — Final Copy Dt. 11.07.2023 Page 4 of 8Client Side Scriping Language Course Code: 2519 Unit Unit Outcomes (UOs) Topies and Sub-topies (incognitive domain) | to Unicode and vice-versa another function, Returning a value | from a function 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-charCodeAt(), fromCharCode(). Unit iT 3a. Write JavaScript to design | 3.1 Building blocks of a Form, properties Form and a form to accept 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 a Cookies and | — given problem. cookie value, writing a cookie value, Browser —_|4b. Develop JavaScript to creating cookies, deleting a cookies, Data manage a cookie in the given] _setting the expiration date of cookie manner. 42 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, scrolling 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. , Timers, Browser location and Unit-V__|5a. Compose relevant regular | 5.1 Regular Expression - language of Regular expression for the given regular expression, _finging non Expression, character pattern search. matching characters, exf@ring of Rollover and |5b. Develop JavaScript to characters, matchip@ digits ‘and i Frames implement validations using the given regular expression. digits, matching/=punctuations symbols, matching? (éfai.tep MSBTE ~ Final Copy Dt. 11.07.2023 Page 5 of 8‘lien Side Scripting Language Course Code: 22519) nied] ee omtenmacs (O08) Topics and Sub-topics (in cognitive domain) Se, Create frames based on the the text using regular expressions, given problem. returning the matched — characters, Sd. Create window object as per | _ regular expression object properties. the given problem. | 5.2 Frames — create a frame, invisible Se. Develop JavaScriptfor_|-—borders. of frame, calling a child creating rollover effect for _| windows, changing a content and focus the given situation. 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. Unit-VI__| 6a. Develop JavaScript to 6.1 Status bar builds a static message, Menus, manage the given status bar.| changing the message using rollover, navigation | 6b. Develop JavaScript to create| _ moving the message along the status bar aud web, the given banuet. 6.2 Bauer luudiug aud displayis page 6c. Develop JavaScript to advertisement. Linking a banner protection create the given slide show. | _ advertisement to url 6d. Develop JavaScript to create the given Menu. 6e. Write JavaScript to protect a webpage in the specified manner. 6.3 Slide Show — creating a slide show 6.4 Menus- creating a pulldown menu, dynamically changing a 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 application its 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’ 9. SUGGESTED SPECIFICATION TABLE FOR QUESTION PAPER DESIGN . ~—|_Distribution of Theory Marks iy Unit Title ee (pak U | A | Total a Level_| Level | Level | Marks T_| Basics of JavaScript Programming 70 o4 | 04 | 04 | 12 TL_| Array, Funetion and String 10 2 | 04 | 08 | 14 TH_| Form and Event Handlin, 06 2 | of | 04 | 10 IV_| Cookies and Browser Data 06 | 02 ‘y__| Regular Expression, Rollover & a area Frames Vy_| Menus, navigation and web page = ar protection MSBTE - Final Copy Dt. 11.07.2023 Page 6 of 8 —_{Client Side Scripting Language Course Code: 22519 Unit a; Teaching Distribution of Theory Marks | No. Unit Title Hours” R | U | A | Total Level_| Level | Level | Marks _ Total 8 14 24) 32 70 Legends: R=Remember, U=Understand, A=Apply and above (Bloom's Revised taxonomy) Note: This specification table provides general guidelines to assist students for their learning and 10 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 ACTIVITIES 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: ) Prepare journals based on practical performed in laboratory. b) Prepare powerpoint presentation or animation for understanding different Client side ing Concepts. 11, 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 topics/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 outcomes. ©) About 15-20% of the topies/sub-topics which is relatively simpler or descriptive in nature is to be given to the students for selfdirected 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. £) 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 to 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 grou be formed for micro-projects, the number of students in the group should noj The micro-project could be industry application based, inter: based, laboratory-based or field-based. Each micro-project should encgpi COs which are in fact, an integration of PrOs, UOs and ADOs. Each maintain dated work diary consisting of individual contribution in the prdi MSBTE ~ Final Copy Dt. 11.07.2023 Page 7 of 8(lies Side Siting Course Code: 22519 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-projects could be added by the concemed faculty a) 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. b) 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, ‘males an orange marble rotate around thio cirolo 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 S. No. 1, Title of Book Author JavaScript Demystified | Keogh, Jim McGraw-Hill, 2015, New Delhi ISBN-0-07-060347-2 Wily India, New Delhi, 2015, ISBN:0-7645-5587-1 McPeak, Jeremy and | Wily India, New Delhi, 2015, 2.| Beginning JavaScript | Wilton, Paul 3,| Beginning JavaScript | Witton, Paul ISBN:81-265-1304-7 JavaScript in 24 hours | Moncur, Michael TechMedia, New Delhi, 2015, (SAMS teach yourself) ISBN:978-0-672-33608-9 14. SOFTWARE/LEARNING WEBSITES a) hitps://www.w3schools.com b)_http://www.nptelvideos.com ©) http:/Awww.tutorialspoint.com. 4) Hitp:/javapoint.com MSBTE — Final Copy Dt. 11.07.2023 Page 8 of 8