CLIENT SIDE SCRIPTING Course Code : 316005 : Computer Technology/ Computer Engincering/ Computer Science & Engincering/ Programme Name/s Information Technology/ Computer Science & Information Technology/ Computer Science Programme Code : CM/ CO/ CW/ Semester sixth Course Title : CLIENT SIDE SCRIPTING Course Code + 316005, 1. RATIONALE Client-side scripting plays a fundamental role in modern web development by enhancing user interactions and improving the overall experience of websites and applications. Web developers utilize it extensively to accomplish tasks like creating dynamic webpages, reacting to events, making interactive forms, verifying information entered by visitors, managing the browser, and more. Using these characteristics, this course assists students in creating highly dynamic web pages. Il. INDUSTRY / EMPLOYER EXPECTED OUTCOME The aim of this course is to help the student to attain the following industry identified outcomes through various teaching learning experiences : Develop web application using AngularJS and React Framework, II, COURSE LEVEL LEARNING OUTCOMES (COS) Students will be able to achieve & demonstrate the following COs on completion of course based learning + COI - Develop web page using client side scripting technology. CO2 - Design dynamic web pages using AngularIS. CO3 - Implement the built-in functions and objects in AngularJS, + CO4- Develop web application using React. COS - Apply event handling in React Framework. IV. TEACHING-LEARNING & ASSESSMENT SCHEME earning Scheme I ‘Assessment Scheme ‘Actual Contact a Based on 18 tpased on [Course] Coursectitle labbe| Course [His/Week lereit ad SU saat Code | COMPETI AMT categoryi [sear nnfreeis Paper Practical | total cure jux FASA] tot [rar | sare | sta [Max| Max ax[ in| ax Min] Max| in| Max] Mia GLIENTSIDE |, 5 frsoosfLENTSIDE Jess arc f2|-[a]-] 6] 3 | - [-]-|-]-|25]1obsalio] - | -] so MSBTE Approval Dt. 04/09/2025 Semester - 6, K SchemeCLIENT SIDE SCRIPTING Course Code : 316005 Total IKS Hrs for Sem. : 0 Hrs Abbreviations: CL- Cl: earning , TL- Tutorial Learning, LL-Laboratory Learning, SLH-Self Learning Hours, NLH-Notional Learning Hours, FA - Formative Assessment, SA -Summative assessment, IKS - Indian Knowledge System, SLA - Self Learning Assessment Legends: @ Internal Assessment, # E Examination Note: ternal Assessment, *# On Line Examination , @$ Internal Online 1, FA-TH represents average of two class tests of 30 marks each conducted during the semester. If candidate is not securing minimum passing marks in FA-PR of any course then the candidate shall be declared as "Detained" in that semester. 3. If candidate is not securing minimum passing marks in SLA of any course then the candidate shall be declared as fail and will have to repeat and resubmit SLA work. 4 Notional Learning hours for the semester are (CL+LL+TL+SL)hrs.* 15 Weeks 5. | credit is equivalent to 30 Notional hrs. 6. * Self learning hours shall not be reflected in the Time Table. 7.* Self leaming includes micro project / assignment / other activities. V. THEORY LI RNING OUTCOMES AM D ALIGNED COURSE CO) Theory Learning , a ; Suggested 5 besos arte Learning content mapped with Theory Learning ; |[Link]|Outcomes (TLO's)aligned| ‘Outcomes (TLO's) and CO's. Learning to CO's. Pedagogies. TLO 11 Explain purpose of scripting language. TLO 1.2 Differentiate between static and dynamic web pages. TLO 1.3 Describe the evolution of scripting 1 | technologies. TLO 1.4 Tilustrate the AJAX architecture, TLO 1.5 Create JSON objects for accessing data in JavaScript program. TLO 1.6 Explain feature of Django and Flask framework. Unit - I Fundamental of Client Side Scripting 1.1 Introduction to the Scripting: Basic web architecture, Role of the client and server, Static vs. dynamic web pages | + sre Usin 1.2 History of Scripting Technologies: HTML as a Chalk-Boar ia foundation, Early use of inline scripting, Limitations of statie| 5" resentations HTML, JavaScript ee 1.3 Introduction to AJAX : AJAX Architecture, Actions 1.4 Basies of SON: Objects, Scheme 1.5 Webpage with Python: Django and Flask framework MSBTE Approval Dt. 04/09/2025 ‘Semester - 6, K SchemeCLIENT SIDE SCRIPTING Course Code : 316005 Theory Learning ; 5 “Learni Suggested IseNoloutcomer yr" Jutznea] ‘Learning content mapped with Theory Learning ee Ae Outcomes (TLO's) and CO's. rene 0 CO's. edagogies. Nee aepeketbe he | Unit - 11 Angular Basies ’ ae 2.1 Introduction to AngularJS: AngularJS Extends HTML, TLO 2.2 State structure of| : Th aiven Anculuas ae, | Expressions, MVC Architecture, Application in Angularls, ne Variables Scope pie 3 Describe the | 22 AngularJS Forms: FORM tag, Form fields: Single line Tre ee Deserve the | text field, password field, multiple line textarea, radio Lecture Using | netion of diferent gp Buttons, and check boxes. Pull down menus: SELECT and | Chalk-Board Aa OPTION tags. Buttons: submit, reset and generalized Presentations : buttons, Form Validation Hands-on TLO 2.4 Implement the filters and directives in given page. TLO 2.5 Write AngularJS program to handle the web| age events, TLO 3.1 Identify the table attributes to organize data in web page, TLO 3.2 Write CSS code for applying type of formatting in web page. ‘TLO 3.3 Describe the use of controllers and its method. ‘TLO 3.4 Write AngularJS program using filters. TLO 3.5 Write AngularJS program to show use of external files in controller. TLO 4.1 State the features 2.3 AngularJS Data Binding :Two-way Binding and ng- model directive 2.4 Filters: Built-In Filters, Custom Filter, Chaining Multiple Filters 2.5 AngularJS Events: ng-mousedown, ng-mouseup, ng-click Unit - IIL Working with AngularJS 3.1 AngularJS Tables: Display Data in a Table, Adding style to the Table data, orderBy Filter, uppercase Filter, Table Index, using Seven and $odd 3.2 AngularJS Controllers: Initializing the Model with Controllers, Role of a Controller, Controllers & Modules, Controller Business Logic, Presentation Logic and Formatting Data 3.3 Attaching Properties and functions to scope 3.4 Nested Controllers, Using Filters in Controllers 3.5 Controllers in External Files Lecture Using Chalk-Board Presentations Hands-on of React. Unit - IV Introduction of React Framework ‘TLO 4,2 Describe the life | 4.1 Introduction to React Framework, features, architecture Lecture Using cycle of React. & Form Chat Bon 4 | TLO 4.3 Explain the use_| 4.2 Components: Functional components, Class components, | 51 aong of different components in Passing and using props a a form. 43 Lifecycle - Mounting, Updating and Unmounting ae ‘TLO 4.4 Implement the | 4.4 React Hooks — useState,useE flect, useContext state of React Hooks. MSBTE Approval Dt. 04/09/2025 ‘Semester - 6, K SchemeCLIENT SIDE SCRIPTING Course Code : 316005 [Link] Se g| Learning content mapped with Theory Learning ae on ‘Outcomes (TLO's) and CO's. we og TLOS.1 Write JavaScript to design a form to accept | Unit - V Working with React Framework input values using React. | 5.1 Event handling, Binding event handlers, Arrow functions TLO 5.2 Write event | vs. regular functions driven program for the | 5.2 Working with Forms - Adding components, Handling _| Lecture Using 5 | given problem using | form, Submitting Forms, Form validation Chalk-Board React 5.3 Lists and Keys - Rendering Lists, List with Key, Using | Presentations TLO 5.3 Explain the use| map() to render lists of elements Hands-on of lst and keys in web | 5.4 Cascading Style Shects- Different types of Style Sheets, pages Styling Libraries, Popular CSS frameworks (c.g., Bootstrap, TLO 54 Write CSS for | Material-Ul) React application, VI. LABORATORY LEARNING OUTCOME AND ALIGNED PRACTICAL / TUTORIAL EXPERIE! Practical / Tutorial / Laboratory [Sr] Laboratory Experiment / Practical Titles/ | Number | Relevant Learning Outcome (LLO) —_|No| Tutorial Titles ofhrs. | COs * Write a program to display " Hello World LLO 1.1 Create web page using "using: structure tags to display sample 1 | + [Link]() 2 cor message. + [Link]) + alert () TO 2:1 Create Python script to Write a program to display "Welcome" using , 2 ; 2 cot display sample message. Python script LO 3.1 Write programs a JSON : Object with properties and access the | 3 | Stem” obiees forthe given problem with 4 col object using JSON, T, Setup Angular development environment using: + Installation of Node,js and npm LLO 4.1 Install Angular software a I iP DB Foo application. + Installation of Angular CLI 2. Write a program to display "Good Morning "Message on web page * Write AngularJS program to design f LLO 5.1 Use forms controls 5 | using various controls and apply validations on | 4 co2 input TLO 6.1 Implement data binding in |; | * Witea program to display data model view |, con AngularIS. and display data for given problem LO 7.1 Implement data binding " synchronization between the modet | 7 | Write program to display two - way data 2 co2 binding and the view. LLO 8.1 Use filters in AngularlS. | 8 | Wiaeygonn plement diferent filters) co2 TO 9-1 Implement various keys and| . | * Write a program to implement different 9 2 co2 mouse events events in Angular JS MSBTE Approval Dt. 04/09/2025 ‘Semester - 6, K ichemeCLIENT SIDE SCRIPTING Course Code : 316005 where user can get the Album with signer and play the music. Practical / Tutorial / Laboratory ]St] Laboratory Experiment / Practical Titles/ ] Number | Relevant Learning Outcome (LLO) _|No| Tutorial Titles ofhrs. | COs TLO 10.1 Create a web page to a ying da ; 203 aoe eae 10] Write a program displaying data in a table 2 03 LLO 11.1 Implement table operation | ,, | * Write a program to implement CSS to table i u 2 cos using filters data-odd and even rows LLO 12.1 Develop Angular JS a) * Wie programs for implementation of > cos applications using controllers. different methods of AngularJS Controllers ma LLO 13.1 Use concept of controllers | ,,| * Write programs to demonstrate use of 5 1B 5 4 cos external files. controllers in external files LLO 14.1 Execute after writing a ; ; program to handle data using React |14] ¢ Wate 8 Program 0 bendis)data using React 2 co4 oe form LLO 15.1 Execute after writing ; a Troma pescine furcion aeenent {15 | Write program to pass function argument into] on Pas React component into React component. Be nef tool Write a program fo pass function argument LLO 16.1 Implement the concept of | 16) into React program and implemnt the life eycle| 2 co4 React life eyele. of React LLO 17.1 Implement states of React | |_| * Write a program to implement states of React 7 4 cos Hooks Hooks LO 18:1 Use React components to Write a program to design real time form using| 18 4 cos design real time form, react components LO 19.1 Apply validations for React] ,| Write a program to apply validations for React 5 19 4 cos form. form LLO 20.1 Use concept of List using |, | * Write a program to manipulate List using key 5 React, 20 and without key in React 2 op LLO 21:1 Greate a page fo use map Write a program to render a list using map a 2 cos function in React function in React * Write a program to apply following approaches of ess to @ React web page LLO 22.1 Implement different approaches for styling a React web |22] Inline styling 2 cos page + CSS stylesheets + CSS Modules * The microproject has to be web based real time application suggested by teacher such as + Develop a web "Chat Application” having Poe LLO 23.1 Carry outa microproject|,,] Chat window with send and recive the 4 cos on the given problem statement. io | co4 + Develop a web "Music Player application eo MSBTE Approval Dt. 04/09/2025CLIENT SIDE SCRIPTING 16005 Practical /Tutorial /Laboratory [St] Laboratory Experiment /Practical Titles/ | Number ] Relevant Learning Outcome (LLO) __|No Tutorial Titles of hrs. | COs Note : Out of above suggestive LLOs - + '* Marked Practicals (LLOs) Are mandatory. ‘+ Minimum 80% of above list of lab experiment are to be performed. + Judicial mix of LLOs are to be performed to achieve desired outcomes. VII. SUGGESTED MICRO PROJE SKILLS DEVELOPMENT (SELF LEARNING) : » 1 ASSIGNMENT/ ACTIVITIES FOR SPECIFIC LEARNING / (OT APPLICABLE, VIII. LABORATORY EQUIPMENT / INSTRUMENTS / TOOLS / SOFTWARE REQUIRED [[Link]] Equipment Name with Broad Specifications Relevant LLO Number ‘Computer system with all necessary peripherals and intemet connectivity Node,js and npm Angular CLI OR Visual Studio Code IDE All IX. SUGGESTED WEIGHTAGE TO LEARNING EFFORTS & ASSESSMENT PURPOSE (Specification Table) ; i ‘Aligned | Learnin, R | U- | A | Total feaecicast gait Tie Cos Hours | Level | Level | Level | Marks Par teal of Client Side 2. _ 7 n a 0 2 [A | Angular Basics ‘coz 6 0 0 0 0 3 [iil | Working with AngularlS 6 0 0 0 0 4 [IV [Tntroduction of React Framework 6 0 0 0 0 3_[W [Working with React Framework 7 0 0 0 0 Grand Total 30. 0 0 0 0 X. ASSESSMENT METHODOLOGIES/TOOLS Formative assessment (Assessment for Learning) + Continous assessment based on process and product related performance indicators. Each practical will be assessed considering- -60% weightage to process -40% weightage to product Summative Assessment (Assessment of Learning) + End Semester Examination (Lab. performance), Viva-voce XI. SUGGESTED COS - POS MATRIX FORM MSBTE Approval Dt. 04/09/2025 ‘Semester - 6, K Scheme16005 CLIENT SIDE SCRIPTING Course Cod Programme Programme Outcomes (POs) werd (S05) Course POS Joutcomes|PO-1 Basic Engineering PO-3 PO-7 (COs) )) and | PO? | Design’ PO-4 Practices for Ipo.6 Project] Life |PSO-|PSO-PSO- Discipline [Problema lEngincering| Society, iscip| ™ Development| "2 pases Management| Long | 1 | 2 | 3 Specific [Analysis pr enPmen “Tools Sustainabi yan Knowledge and i Environment col T 5 I H - : I co2 2 2 z 2 I E 1 CO3 2 2 3 3 2 = 1 Cos 2 2 z 3 2 Fi 1 Cos 2 2 3 3 2 5 1 Legends :- High:03, Medium:02,Low:01, No Mapping: - *PSOs are to be formulated at institute level XI. SUGGESTED LEARNING MATERIALS / BOOKS [SxNol__ Author Title Publisher with ISBN Number rs MeGraw Hill Education; 5th edition (I 1 Pal f HTML & CSS: The Complete Reference July 2017), ISBN-13 : 978- 0070701946 3 | Valeri Karpov: Professional AngularJS (WROX) Wiley (I January 2015), ISBN-13 Diego Netto 978-8126556434 Brad Green, _ | AngularJS: Less Code, More Fun, And Enhanced | ShrofffO'Reilly, First Edition (1 3. | Shyam Productivity With Structured Web Apps January 2013), ISBN-13 : 978- Seshadri (Greyscale Indian Edition) 9351101260 4. | Mayur Patil React js For Beginners Notion Press (11 January 2023), ISBN-13 : 979-8889355106 e = Shrofi/O’Reilly; Second edition (16 5 | Alex Banks | Lesmine React: Modem Patems for Developing | 197020) {SBN 13 978 ps 9385889158 XIII, LEARNING WEBSITES & PORTALS SENo Link / Portal Description 1 _ | [Link] Designing web page using AngularIS. (All contents) 2__[hntips://[Link]/angular “Angular Tutorial for beginners 3_ | https:/[Link]/REACT/[Link] React Tutorial for beginners 4 || hetps://[Link]/reactisvindex htm Designing WebPage using React. (All contents) 3 _| tps: javascript info) ‘The Modem JavaScript Tutorial 6 | hutps:/twww javascripttutorial nevreact-tutrial Fein Rene Angular ony 7_[ https:7iwww youtube. comiwatch?v-NS Was-h65w ‘Angular JS for Beginners MSBTE Approval Dt. 04/09/2025 Semester - 6, K SchemeCLIENT SIDE SCRIPTING Course Code : 316005 ‘[Link] Link / Portal Description Note: ‘+ Teachers are requested to check the creative common license status/financial implications of the suggested ‘online educational resources before use by the students MSBTE Approval Dt. 04/09/2025 ‘Semester - 6, K Scheme