SlideShare a Scribd company logo
Front-End
Web Development
Lesson 9
jQuery
Agenda
● Review JavaScript
● Intro to jQuery
● jQuery Documentation
● jQuery Plugins
● Lab: Divided Times (basic)
● A Few jQuery Functions
● Lab: Divided Times (advanced)
What is jQuery
jQuery is a cross-browser JavaScript library
designed to simplify the client-side scripting of
HTML.
“Cross browser” - works the same in all*
browsers.
What is jQuery?
Allows for the following:
● Document traversal
● CSS manipulation
● Event handling
● Animation
● and more!

Recommended for you

Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019

Vue.js is a JavaScript framework for building user interfaces that has gained popularity recently. It is smaller in size than Angular and React but provides similar functionality like virtual DOM and one-way data binding. Vue.js applications can range from simple single-page apps to complex projects with nested components. Key aspects of Vue.js include reusable components, templates with directives like v-if and v-for, lifecycle hooks, and the use of Vuex for state management and Vue Router for routing. The ecosystem around Vue.js continues to grow with tools, libraries, and support from companies using it in production.

vue.js
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners

This is a laconic presentation on Angular JS for beginners only. I have emphasized on example rather than theory. There are self explained source code urls attached with slides. In the last slide I have attached source code for a real life example using Angular JS an BootStrap which may be very helpful to understand the concept of Angular JS.

angularjsangular js real life exampleangular js controller
Web Workers
Web WorkersWeb Workers
Web Workers

The presentation about Web Workers from Maksim Yakusik - IntexSoft software engineer. Learn how to design Web Workers, how to kill them and much more!

softwaresoftware developmentweb workers
Where is jQuery?
Download code at jquery.com
version 1.x versus version 2.x
Remote hosting:
http://code.jquery.com/jquery-1.11.0.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
Applying jQuery
$(document).ready()
is a built-in jQuery function that waits until the
HTML for a page loads before it runs your
script.
Shorthand for jQuery Document Ready Event
Applying jQuery
Standard version:
<script type=”text/javascript”>
$(document).ready(function() {
// your code goes here
}); // end ready
</script>
Applying jQuery
Shorthand version:
<script type=”text/javascript”>
$(function() {
// your code goes here
}); // end ready
</script>

Recommended for you

JavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM ManipulationJavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM Manipulation

This document provides an agenda for a JavaScript roadmap covering DOM manipulation. It will discuss what the DOM is, how JavaScript can select, modify, and react to DOM elements, and provide examples building a static to-do application and background generator. Participants will learn how to access and update HTML, CSS, and attributes through the DOM, enabling dynamic interactivity on web pages.

javascriptweb developmentweb design and development
MEAN stack
MEAN stackMEAN stack
MEAN stack

The document discusses the MEAN stack, including its components (MongoDB, Express, AngularJS, Node.js) and how they work together. It notes that the MEAN stack allows building full-stack web applications using only JavaScript, and that it offers advantages like increased productivity, ease of debugging, and support for MVC architecture. Some disadvantages mentioned are that MongoDB may not scale as well for very large applications. The document then proposes building a simple app to demonstrate the MEAN stack in action.

javascript
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js

Vue.js의 깊은 곳을 알아봅시다. 1. Vue.js Architecture 2. Observing 3. Rendering 4. Vue.js Package * 이 자료는 VUE.TIFULE KOREA 6회에서 발표한 자료입니다.

vuejsvuejs-corejavascript
Where to Place Scripts
Top or Bottom of the Page?
Drop-Down Navigation Plugin
Access The jQuery Plugin Registry
Search “drop down menu”
Downsides:
● lack of demo
● lack of a tutorial
Drop-Down Navigation Plugin
Review basic horizontal navigation template
Access jQuery Drop Down Menu Tutorial &
Demo
Code Along from tutorial
Lab
Divided Times (basic)
● access divided_times_starter code
● review visual example
● incorporate basic jquery code
○ six items in each drop down
○ ignore layout (mega menu)

Recommended for you

Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework

This document provides an overview of AngularJS, including how it can contribute to business applications, who believes in it, its market and architecture. AngularJS supports HTML5, extends HTML, uses an MVC pattern and provides flexibility between front-end and back-end technologies. It also offers performance, easy development, fast delivery cycles and good documentation. The presenter provides an example of how AngularJS allows parallel development between front-end and back-end teams using different technologies. Finally, the document demonstrates an example AngularJS application and references for further information.

angularjsjavascriptgoogle
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview

The document provides an overview of the MEAN stack, which uses JavaScript for full-stack development. It discusses the evolution of web development from separate front-end and back-end work to full-stack JavaScript with Node.js. The MEAN stack combines MongoDB for the database, Express for the web framework, Angular for the front-end, and Node.js as the runtime environment. Each component is introduced, with Node.js using a single-threaded and asynchronous model, Express providing features like routing and middleware, Angular using templates and two-way data binding, and MongoDB as a flexible document database.

html5javascriptweb development
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution

An in-depth exploration of VueJs, the progressive front-end framework with focus on reactivity, componentization and simplicity

software developmentjavascriptsoftware architecture
Lab
Divided Times (advanced)
● Can you adjust CSS to create mega
menu?
● If not, access a different plugin
○ jQuery Mega Drop Down Menu
A Few jQuery Functions
● .toggleClass()
● .hasClass()
● .hide()
● .show()
● .slideUp()
● .siblings()
● .addClass()
● .removeClass()
Lab
Divided Times (advanced with teams)
● image (mockup)
● behaviors
● pseudo code
● apply jQuery to HTML and CSS
Homework
● Work on Divided Times
● Watch Fundamentals of jQuery videos (7)
● Begin jQuery Learning Center (Ch. 1-3)
● Read about jQuery.each()
● Begin conceptualizing personal project
● Create index page for your server space
● Add some jQuery to index page

Recommended for you

Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜

Sencha Touch is a JavaScript framework for developing mobile applications. It uses an MVC architecture with models for data, views for presentation, and controllers for handling events and application logic. The document discusses how to implement MVC patterns in Sencha Touch, including defining models, views, controllers, and handling events. It also covers challenges of splitting logic between client and server, testing applications, and scaling the architecture over time as an app grows in complexity.

Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start)

This is the presentation I was using when delivering the free meetup "Node.js Jump Start" (Crash Course). You can find the video at https://www.youtube.com/watch?v=UEVaBHMTLcQ

node.jsjavascriptjump start
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS

AngularJS is a framework for building client-side web applications. It allows you to extend HTML vocabulary with custom attributes and elements, and uses two-way data binding between models and views. AngularJS provides services, directives, modules and dependency injection to help organize application code and logic. Testing is also an important part of the AngularJS workflow, as it helps ensure code quality.

frameworkangularjsjavascript

More Related Content

What's hot

Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
samhelman
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Go4Guru
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
Munir Hoque
 
Web Workers
Web WorkersWeb Workers
Web Workers
IntexSoft
 
JavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM ManipulationJavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM Manipulation
Aswin Barath
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
Iryney Baran
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
선협 이
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
yoshiaki iwanaga
 
Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start)
Haim Michael
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Aldo Pizzagalli
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
Tom Hombergs
 
Code Resume
Code ResumeCode Resume
Code Resume
Vincent Santamauro
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
Rahul Nanwani
 
Web Applications with AngularJS
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJS
Philipp Burgmer
 

What's hot (20)

Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
 
Web Workers
Web WorkersWeb Workers
Web Workers
 
JavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM ManipulationJavaScript Roadmap - DOM Manipulation
JavaScript Roadmap - DOM Manipulation
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜
 
Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start)
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
 
Code Resume
Code ResumeCode Resume
Code Resume
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
 
Web Applications with AngularJS
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJS
 

Viewers also liked

Code review
Code reviewCode review
Code review
Aleksey Solntsev
 
Post Agile
Post AgilePost Agile
Post Agile
Aleksey Solntsev
 
XP Injection
XP InjectionXP Injection
XP Injection
Aleksey Solntsev
 
How to be proud when you are done
How to be proud when you are doneHow to be proud when you are done
How to be proud when you are done
Aleksey Solntsev
 
Agile вид из окна тренажёрного зала
Agile   вид из окна тренажёрного залаAgile   вид из окна тренажёрного зала
Agile вид из окна тренажёрного зала
Aleksey Solntsev
 
Code Review to the Rescue
Code Review to the RescueCode Review to the Rescue
Code Review to the Rescue
Andreas Günzel
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
Gene Babon
 
Lesson 1
Lesson 1Lesson 1
Lesson 1
Slides4Victor
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
Sónia
 
HTML Lesson 5
HTML Lesson 5HTML Lesson 5
HTML Lesson 5
Danny Ambrosio
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
Gene Babon
 
A design space for Trust-enabling Interaction Design
A design space for Trust-enabling Interaction DesignA design space for Trust-enabling Interaction Design
A design space for Trust-enabling Interaction Design
Sónia
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
Lesson 12
Lesson 12Lesson 12
Lesson 12
Gene Babon
 
Css ms megha
Css ms meghaCss ms megha
Css ms megha
Megha Gupta
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
TonyC445
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
Sónia
 
Workshop 1 - User eXperience evaluation
Workshop 1 - User eXperience evaluationWorkshop 1 - User eXperience evaluation
Workshop 1 - User eXperience evaluation
Sónia
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
Gene Babon
 

Viewers also liked (20)

Code review
Code reviewCode review
Code review
 
Post Agile
Post AgilePost Agile
Post Agile
 
XP Injection
XP InjectionXP Injection
XP Injection
 
How to be proud when you are done
How to be proud when you are doneHow to be proud when you are done
How to be proud when you are done
 
Agile вид из окна тренажёрного зала
Agile   вид из окна тренажёрного залаAgile   вид из окна тренажёрного зала
Agile вид из окна тренажёрного зала
 
Code Review to the Rescue
Code Review to the RescueCode Review to the Rescue
Code Review to the Rescue
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 1
Lesson 1Lesson 1
Lesson 1
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
HTML Lesson 5
HTML Lesson 5HTML Lesson 5
HTML Lesson 5
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 
A design space for Trust-enabling Interaction Design
A design space for Trust-enabling Interaction DesignA design space for Trust-enabling Interaction Design
A design space for Trust-enabling Interaction Design
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
Lesson 12
Lesson 12Lesson 12
Lesson 12
 
Css ms megha
Css ms meghaCss ms megha
Css ms megha
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
 
Workshop 1 - User eXperience evaluation
Workshop 1 - User eXperience evaluationWorkshop 1 - User eXperience evaluation
Workshop 1 - User eXperience evaluation
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
 

Similar to Lesson 09

jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
WebStackAcademy
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
Anil Kumar
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
Gurpreet singh
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
Gurpreet singh
 
Ise312 Ec Presentation Jquery
Ise312 Ec Presentation JqueryIse312 Ec Presentation Jquery
Ise312 Ec Presentation Jquery
duygut
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
Umar Ali
 
Jquery
JqueryJquery
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
Perttu Myry
 
jQuery programming with visual web part
jQuery programming with visual web partjQuery programming with visual web part
jQuery programming with visual web part
Senthamil Selvan
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
Saif Ullah Dar
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
Catherine Beltran
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
Catherine Beltran
 
J query presentation
J query presentationJ query presentation
J query presentation
akanksha17
 
J query presentation
J query presentationJ query presentation
J query presentation
sawarkar17
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
adeel990
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup Institute
Rafael Gonzaque
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
jeresig
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
Stephen Chin
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
171SagnikRoy
 

Similar to Lesson 09 (20)

jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
Ise312 Ec Presentation Jquery
Ise312 Ec Presentation JqueryIse312 Ec Presentation Jquery
Ise312 Ec Presentation Jquery
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
 
Jquery
JqueryJquery
Jquery
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
 
jQuery programming with visual web part
jQuery programming with visual web partjQuery programming with visual web part
jQuery programming with visual web part
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
J query presentation
J query presentationJ query presentation
J query presentation
 
J query presentation
J query presentationJ query presentation
J query presentation
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup Institute
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 

More from Gene Babon

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
Gene Babon
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
Gene Babon
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
Gene Babon
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
Gene Babon
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
Gene Babon
 
Info Session
Info SessionInfo Session
Info Session
Gene Babon
 
Info session
Info sessionInfo session
Info session
Gene Babon
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
Gene Babon
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
Gene Babon
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
Gene Babon
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
Gene Babon
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
Gene Babon
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
Gene Babon
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
Gene Babon
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
Gene Babon
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
Gene Babon
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
Gene Babon
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
Gene Babon
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
Gene Babon
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
Gene Babon
 

More from Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 

Lesson 09

  • 2. Agenda ● Review JavaScript ● Intro to jQuery ● jQuery Documentation ● jQuery Plugins ● Lab: Divided Times (basic) ● A Few jQuery Functions ● Lab: Divided Times (advanced)
  • 3. What is jQuery jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. “Cross browser” - works the same in all* browsers.
  • 4. What is jQuery? Allows for the following: ● Document traversal ● CSS manipulation ● Event handling ● Animation ● and more!
  • 5. Where is jQuery? Download code at jquery.com version 1.x versus version 2.x Remote hosting: http://code.jquery.com/jquery-1.11.0.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
  • 6. Applying jQuery $(document).ready() is a built-in jQuery function that waits until the HTML for a page loads before it runs your script. Shorthand for jQuery Document Ready Event
  • 7. Applying jQuery Standard version: <script type=”text/javascript”> $(document).ready(function() { // your code goes here }); // end ready </script>
  • 8. Applying jQuery Shorthand version: <script type=”text/javascript”> $(function() { // your code goes here }); // end ready </script>
  • 9. Where to Place Scripts Top or Bottom of the Page?
  • 10. Drop-Down Navigation Plugin Access The jQuery Plugin Registry Search “drop down menu” Downsides: ● lack of demo ● lack of a tutorial
  • 11. Drop-Down Navigation Plugin Review basic horizontal navigation template Access jQuery Drop Down Menu Tutorial & Demo Code Along from tutorial
  • 12. Lab Divided Times (basic) ● access divided_times_starter code ● review visual example ● incorporate basic jquery code ○ six items in each drop down ○ ignore layout (mega menu)
  • 13. Lab Divided Times (advanced) ● Can you adjust CSS to create mega menu? ● If not, access a different plugin ○ jQuery Mega Drop Down Menu
  • 14. A Few jQuery Functions ● .toggleClass() ● .hasClass() ● .hide() ● .show() ● .slideUp() ● .siblings() ● .addClass() ● .removeClass()
  • 15. Lab Divided Times (advanced with teams) ● image (mockup) ● behaviors ● pseudo code ● apply jQuery to HTML and CSS
  • 16. Homework ● Work on Divided Times ● Watch Fundamentals of jQuery videos (7) ● Begin jQuery Learning Center (Ch. 1-3) ● Read about jQuery.each() ● Begin conceptualizing personal project ● Create index page for your server space ● Add some jQuery to index page