G8LP-6JavaScript Web Programming

Lesson Plan Computer Science JavaScript Web Programming Topic- Variables and Functions Class: Period: Mode: Classroom/Lab Teacher: ____________________________________________________________________________________ Learning Support Assistant: ____________________________________________________________ S.M.A.R.T. Learning Objectives By the end of this session, students will be able to: 1. Understand what is an interactive web page. 2. Describe scripts. 3. Write JavaScript scripts on the HTML webpage. 4. Use alert and prompt methods in scripts. 5. Declare variables and use arithmetic expressions. Resources 1. video https://www.youtube.com/watch?v=BE2DHk4Mwd4 (9.59) 2. video https://www.youtube.com/watch?v=hlnpIcVldNY (0.00-4.33) 3. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Ask students what they understand from the interactive websites. A static website is one with stable content, where every user sees the exact same thing on each individual page. On the other hand, a dynamic website is one where content changes based on user preferences. For example, when a user logs in to Facebook every user sees different content. But if a user opens any newspaper site the content will be the same for everyone. Concept introduction: Explain what are scripts. A script is an instruction that can add interactivity to a website. A script could generate a pop-up alert box message, or provide various visual effects like a button changing colour when the mouse is clicked. JavaScript is used for writing such instructions. Name some other scripting languages too. Explain variable as any characteristic, number, or quantity that can be measured or counted. Age, gender, salary. date of birth, quantity, class grades, eye colour, and vehicle

type are examples of variables. Also, numeric data are integer datatypes and characters are string datatypes variables in JavaScript. Multiple variables can be declared in a script depending on our requirements. A string data type can be converted to a number using parseInt(). Variables can be used in an arithmetic operation. Concatenation is when two strings values are joined. Concept Demo/Explanation: Display alerts on an HTML web page. Write a JavaScript code using the <script> tag, save the file and run it on the browser. Use the prompt method to accept user input and store it in a variable. Write JavaScript codes to show arithmetic expressions. Write codes to show how to use comments, convert strings to integers, and concatenate strings. Concept Practice: Ask students to write code for using variables in mathematical operations like calculating age. Ask students to write code using the unary increment operator or decrement operator. Optional Activity: Watch the video in the resources section and discuss it with the teacher. Practical Application: Complete the lab activities given in the chapter Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on playground.edusoft.co.in. Guided Assignments Students can visit https://www.w3schools.com/js/js_variables.asp and get more information about variables Evaluation After completing the lesson solve the exercises given at the end of the chapter.

Lesson Plan Computer Science JavaScript Web Programming Topic-Functions and Mouse Events Class: Period: Mode: Classroom/Lab Teacher: ____________________________________________________________________________________ Learning Support Assistant: ____________________________________________________________ S.M.A.R.T. Learning Objectives By the end of this session, students will be able to: 1. Create user-defined functions in JavaScript code. 2. Call functions to execute the code. 3. Understand what are events. 4. Handle at least 4 types of mouse events in JavaScript code. Resources 1. video https://www.youtube.com/watch?v=hlnpIcVldNY (4.33 to 9.41). 2.video https://www.youtube.com/watch?v=tRU_dIavoi4 (0.00 to 4.25) 3. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Ask students have they ever used an ATM machine or seen someone using it. Discuss with them how a user uses ATMs for operations like withdrawal of money or checking balance or getting a statement of the account. The process is the same for all. However, output, e.g. the balance, and input, e.g. how much cash they want to withdraw will be different for everyone. These repeated operations which are used by users in an ATM machine are called functions in any programming language. Concept introduction: Introduce functions. Give example, to make our word documents presentable we give headings and write the heading-related content in the paragraph. In the same way, a function is a named block with a group of instructions. Functions are used for reusability. Tell students the alert and prompt are two functions defined in the JavaScript library. Explain what is a user-defined function.

Explain what is an event and when events are triggered. For e.g. when the user clicks a button on the webpage or presses the keyboard. An event handler is a JavaScript function that runs when an event fires. Event Handling is the mechanism that controls the event and decides what should happen if an event occurs. Concept Demo/Explanation: Explain why functions are important. A function can be called by writing the name of the function. Give examples of built-in functions and user- defined functions of JavaScript. Give examples of events, attending or rejecting phone calls, control buttons in media player pressing which will play, forward, replay songs, bulb turning on and off with a switch. In JavaScript, we can write code that will let us make a change when an event is fired. Example button colour changes when the mouse hovers over it, or size increases, text colour changes, etc. Concept Practice: Write a JavaScript code to declare functions and call them. Write a code to explain an event, event handler, and event handling. Complete activity 1, activity 2, and activity 3 under mouse event handling. Optional Activity: Watch the videos from the resources section. Practical Application: Ask students to complete the lab activities. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on playground.edusoft.co.in Guided Assignment Ask students to visit https://www.geeksforgeeks.org/javascript-events/ and have a discussion with teachers about their findings. Evaluation After completing the lesson solve the exercises given at the end of the chapter.

Lesson Plan Computer Science JavaScript Web Programming Topic-Handling Keyboard Events Class: Period: Mode: Classroom/Lab Teacher: ____________________________________________________________________________________ Learning Support Assistant: ____________________________________________________________ S.M.A.R.T. Learning Objectives By the end of this session, students will be able to: 1. Understand what are keyboard events. 2. Handle at least 3 keyboard events. 3. Handle onClick event of click events. 4. Use the onChange event when the value of an element has been changed. Resources 1. video https://www.youtube.com/watch?v=tRU_dIavoi4 (4.27 onwards). 2. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Recap the previous topic. Concept introduction: Discuss most browser-based games with some form of keyboard input. Whenever a user presses any key on the Keyboard, different events are fired. Like if the left or right arrow button is pressed the game object will move. We can write instructions for this in JavaScript using keyboard events. There are three keyboard events, namely keydown, keypress, and keyup. These events are applicable to virtual keyboards too. Explain other events like when a user clicks a button, an event is fired. These are called click events. onChange events are fired when selecting something from a drop-down list or any value of an element changes.

Concept Demo/Explanation: Explain the difference between different key events. The keydown event is triggered first when the user presses a key. The keyup event is triggered last when the user releases a key. In between, the keypress event is triggered. The keypress ignores keys such as delete, arrows, page up, page down, home, end, ctrl, alt, shift, esc, etc. The keydown event is fired for all keys. The keydown and keyup events provide a code indicating which key is pressed, while the keypress indicates which character was entered. For example, a lowercase \"a\" will be reported as 65 by keydown and keyup, but as 97 by keypress. Concept Practice: Write a JavaScript code to show the difference between keypress and keydown. Using the code from the book demonstrate how to display the text typed by the user, and create a dynamic marquee. Using the innerHtml property we can set or change the text of any HTML elements. Write code and demonstrate how to use onClick events for displaying messages on a webpage. Change the background of the web page using onChange event. Optional Activity: Watch the video https://www.youtube.com/watch?v=tRU_dIavoi4 and discuss it with the teacher. Practical Application: Ask students to complete the lab activities. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on playground.edusoft.co.in Guided Assignment Ask students to visit https://developer.mozilla.org/en- US/docs/Learn/Getting_started_with_the_web/JavaScript_basics and discuss with the teacher about their findings. Evaluation After completing the lesson solve the exercises given at the end of the chapter.