added dom
This commit is contained in:
166
FromJavaScriptTojQuery-master/student_instruction_sheet.txt
Normal file
166
FromJavaScriptTojQuery-master/student_instruction_sheet.txt
Normal file
@@ -0,0 +1,166 @@
|
||||
JavaScript to jQuery Programming Lab - Student Instruction Sheet
|
||||
|
||||
================================================================================
|
||||
|
||||
Welcome to the JavaScript to jQuery Conversion Lab! This lab will guide you through
|
||||
converting plain JavaScript code to jQuery, helping you understand the benefits and
|
||||
syntax differences between these two approaches to DOM manipulation.
|
||||
|
||||
DIRECTORY STRUCTURE OVERVIEW:
|
||||
|
||||
The course is organized in 4 main modules:
|
||||
1. 01-FromJavaScriptTojQuery - Introduction and basic DOM manipulation
|
||||
2. 02-jQueryIntroduction - Core jQuery concepts and selectors
|
||||
3. 03-jQueryEvents - Event handling and effects with jQuery
|
||||
4. 04-jQuery-TraversingMtDOM - DOM traversal techniques
|
||||
|
||||
DETAILED VIDEO MAPPINGS AND EXERCISES:
|
||||
|
||||
MODULE 1: From JavaScript to jQuery (Starting Point)
|
||||
----------------------------------------------------
|
||||
Video: JavaScript to jQuery.mp4
|
||||
Location: 01-FromJavaScriptTojQuery/03-manipulating_the_dom/
|
||||
|
||||
Exercises:
|
||||
1. Examine index.html to understand the HTML structure
|
||||
2. Review js/app.js and js/transcript.js to see pure JavaScript implementation
|
||||
3. Identify areas where DOM manipulation could be simplified with jQuery
|
||||
4. Note the difference in syntax and complexity between standard JS and what jQuery offers
|
||||
|
||||
MODULE 2: jQuery Introduction
|
||||
-----------------------------
|
||||
Videos:
|
||||
- jQuery Introduction.mp4
|
||||
- 02-jQuery-selectors.mp4
|
||||
- jQuery1.mp4
|
||||
|
||||
Location: 02-jQueryIntroduction/
|
||||
|
||||
Sub-modules and exercises:
|
||||
1. 02-downloading_jquery/
|
||||
Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project
|
||||
|
||||
2. 03-jquery_selectors/
|
||||
Video Solution: Review video_solution folder files to see jQuery selector examples
|
||||
Challenge: Try the challenge_solution to practice selectors independently
|
||||
|
||||
3. 04-changing_html_and_css_with_jquery/
|
||||
Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery
|
||||
Challenge: Try the challenge_solution to practice HTML/CSS manipulation
|
||||
|
||||
4. 05-changing_html_and_css_with_jquery_challenge_2/
|
||||
Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes
|
||||
|
||||
5. 06-changing_html_and_css_with_jquery_challenge_3/
|
||||
Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation
|
||||
|
||||
6. 07-writing_our_first_jquery_script/
|
||||
Video Solution: Review files in video_solution to see first jQuery scripts
|
||||
Challenge: Try challenge_solution to practice writing jQuery scripts from scratch
|
||||
|
||||
MODULE 3: jQuery Events
|
||||
-----------------------
|
||||
Videos:
|
||||
- jquery events introduction.mp4
|
||||
- 05-events-in-jQuery.mp4
|
||||
- 06-jQuery-effects.mp4
|
||||
- 07-jQuery-method-chaining.mp4
|
||||
- 08-the-importance-of-this-jQuery.mp4
|
||||
|
||||
Location: 03-jQueryEvents/
|
||||
|
||||
Sub-modules and exercises:
|
||||
1. 02-events_in_jquery/
|
||||
Video Solution: Review video_solution files to see jQuery event handling
|
||||
Challenge: Try challenge_solution to practice event handling
|
||||
|
||||
2. 03-jquery_effects/
|
||||
Challenge: Work with challenge_solution files to practice jQuery built-in effects
|
||||
|
||||
3. 04-jquery_effects_challenge_2/
|
||||
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects
|
||||
|
||||
4. 05-jquery_effects_challenge_3/
|
||||
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects
|
||||
|
||||
5. 06-jquery_effects_challenge_4/
|
||||
Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects
|
||||
|
||||
6. 07-method_chaining/
|
||||
Video Solution: Review video_solution files to see jQuery method chaining
|
||||
Challenge: Try challenge_solution to practice method chaining
|
||||
|
||||
7. 08-method_chaining_challenge_2/
|
||||
Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
|
||||
|
||||
8. 09-method_chaining_challenge_3/
|
||||
Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
|
||||
|
||||
9. 10-the_importance_of_this/
|
||||
Challenge: Review challenge_solution files to understand "this" in jQuery
|
||||
Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes
|
||||
|
||||
MODULE 4: Traversing the DOM with jQuery
|
||||
----------------------------------------
|
||||
Videos:
|
||||
- jQuery_ Traversing Mt. Dom Introduction.mp4
|
||||
- Traversing up the DOM.mp4
|
||||
- Traversing Sideways.mp4
|
||||
- jQuery_ Other Traversing Methods.mp4
|
||||
|
||||
Location: 04-jQuery-TraversingMtDOM/
|
||||
|
||||
Sub-modules and exercises:
|
||||
1. 01-jquery_traversing_mt_dom/
|
||||
Exercise: Work with button.html, css/, and js/ files to practice basic traversal
|
||||
|
||||
2. 02-traversing_up_and_down_the_dom_tree/
|
||||
Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal
|
||||
|
||||
3. 03-traversing_sideways/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice sibling traversal
|
||||
|
||||
4. 04-traversing_sideways_challenge_2/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice sideways traversal
|
||||
|
||||
5. 05-traversing_sideways_challenge_3/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal
|
||||
|
||||
6. 06-traversing_sideways_challenge_4/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal
|
||||
|
||||
7. 07-other_traversing_methods_challenge_1/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice other traversal methods
|
||||
|
||||
8. 08-other_traversing_methods_challenge_2/
|
||||
Exercise: Work with index.html and js/ files to practice additional traversal methods
|
||||
|
||||
9. 09-other_traversing_methods_challenge_3/
|
||||
Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods
|
||||
|
||||
LAB EXERCISE WORKFLOW:
|
||||
|
||||
For each module/sub-module:
|
||||
1. Watch the corresponding video listed in the module section
|
||||
2. Open both the "video_solution" and "challenge_solution" folders when available
|
||||
3. Study the HTML and CSS files to understand the base structure
|
||||
4. Analyze the JavaScript/jQuery code in the script files
|
||||
5. Identify how jQuery simplifies the code compared to plain JavaScript
|
||||
6. Try modifying the code to reinforce learning
|
||||
7. Complete challenges when provided
|
||||
|
||||
HELPFUL TIPS FOR SUCCESS:
|
||||
|
||||
1. Start with simple examples and gradually move to complex ones
|
||||
2. Always compare the vanilla JavaScript approach with the jQuery approach
|
||||
3. Take notes on syntax differences and shortcuts jQuery provides
|
||||
4. Test your code frequently in the browser
|
||||
5. Don't hesitate to experiment - try different jQuery methods
|
||||
6. Refer to jQuery documentation when exploring new methods
|
||||
|
||||
ASSESSMENT CRITERIA:
|
||||
|
||||
By the end of this lab, you should be able to:
|
||||
1. Explain the advantages of using jQuery over vanilla JavaScript
|
||||
2. Convert basic JavaScript DOM manipulations to jQuery equivalents
|
||||
3. Use jQuery selectors effectively to target elements
|
||||
Reference in New Issue
Block a user