Intro to Javascript and jQuery

  • 1,037 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,037
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 jquery.com, 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>