Javascript & JQuery
15 Days
Embedded Files
Overview
Overview
Students should be able to write basic JS and JQuery code in order to manipulate HTML elements. Focus should be placed on targeting an html element by an id, affecting basic attributes and styles, and listening for events such as a click or a mouseover. Take some time to show students the browser tools that allow them to see the console as well as all HTML and JS code on a page. None of the code is secure since all users have... and by design, need... full access to these codes. This is known as "client side scripting" as all lines of code are sent to the users machine and runs on the users computer.
Online Tutorials:
10 to 15 days (90 min blocks)Online Tutorials:
Teacher Resources
Teacher Resources
Khan Academy tutorials do well relating the code to web design. It is more clear that the scripts students are writing is tied to HTML elements.
Codecademy has great tutorials on the basics of Javascript and Jquery. Students can work at their own pace. Do not expect mastery from the tutorials, but instead, use them to create a foundation that you can use to branch off on your own lessons and projects.
You need to understand the difference between using the DOM and using JQuery. You don't need to spend a ton of time on the DOM, but just know what it is. So much can be done with JQuery and it is easier to use, so make that your focus.
Stress the use of the JavaScript Documentation
Topics
Topics
JavaScript
JavaScript
variables
operators (+ - * / %)
Conditionals (if...else)
Loops
for(var x=0; x<20; x++){ ... }
JQuery
JQuery
Use of id and class to refer to elements on the page
$("#myParagraph")
$(".listitems")
$(body)
$(this)
Events: click, change, mouseout, etc.
.val()
.html()
.attr()
.css()
xmlhttprequests (Ajax) for when you are ready to send and get data from the server (after PHP and SQL)
Assessment: What Animal are You?
Assessment: What Animal are You?
Teacher Resources
Teacher Resources
Students will create a page that will update with user interaction. The project is explained in the video, but the solution is up to the students.
This is one idea for a project to demonstrate student mastery of the concepts, but it could easily be adapted to many other choices.
Student Resources
Student Resources
firstJavascript.mp4Grocery List Project
Grocery List Project
Teacher Resources
Teacher Resources
The Grocery List project is a segue into the use of PHP in order to authenticate a user into a secure site where they can create a list that saves to the server.
We begin with what is called the "Front End", meaning, the page that the user will see. Students will create a web page with an input and a button where the user can type in a grocery item and submit it to a list on the page. The list will then update with a price, a delete button for each item, and an updated total.
Student Resources
Student Resources
Tutorial 1:
groceryList(revised).mp4Tutorial 2: Adding the delete buttons
deleteButtons.mp4Additional Resources
Additional Resources
Report abuse