Your SlideShare is downloading. ×
Intro to Javascript and jQuery
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to Javascript and jQuery


Published on

Published in: Education
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. javascript & jquery22-3375 Web Design I // Columbia College Chicago
  • 2. Student PresentationsPresent portfolio mockupsWalk us through the flow (homepage, detail, about)What types of work will you be showing?Any special interactions that you need to work out?Will you be able to code this by the end of the course?
  • 3. What is a javascript?JavaScript (sometimes abbreviated JS) is a scriptinglanguage commonly implemented as part of a webbrowser in order to create enhanced user interfacesand dynamic websites.Javascript is a client-side programming language,which means that it resides on the client’s machineand not on the server (in your browser).
  • 4. Javascript Syntax
  • 5. Every script is made up of a series of statements.<script>first statement;second statement;</script>
  • 6. A JavaScript function is a "recipe" of instructions(i.e., statements or commands) whose purpose isto accomplish a well-defined task.<script>function square (number){var result = number * number;return result;}</script>
  • 7. Variables in JavaScript are similar to the variablesyou may have studied in high school algebra. Youcan think of variables as "holding places" wherevalues are stored and retrieved.<script>greeting = "Hello";greeting = greeting + ", my friend.";</script>
  • 8. Where does javascript go?Javascript is usually typed in the <head>element, in a linked .js file, or both.
  • 9. Where does javascript go?Javascript is usually typed in the <head>element, in a linked .js file, or both.
  • 10. Try It<script>function displayDate({document.getElementById("date").innerHTML=Date();}</script>
  • 11. Getting Started with jquery
  • 12. What is a jquery?jQuery is a multi-browser JavaScript library designed tosimplify the client-side scripting of HTML.“Library” in this contexts means a group of javascriptfunctions (which you might see referred to as methods)that you can access and run on your page with very littlecoding.jQuery is javascript, but it uses it’s own “selector engine”that is very designer friendly. A “selector engine” is justthe way that you reference elements in your html in orderto make the do something. jQuery uses CSS selectors,which you already know how to use!
  • 13. Where does jquery go?The jquery library is linked from the<head> document. You can download thejquery file from, or link to theGoogle version. It should go below yourCSS, but above any scripts or plugins.
  • 14. Where does jquery go?
  • 15. Where does jquery go?
  • 16. Try It<script>$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active");return false});});</script>