Scripting For The Web
Sep 23, 2020
- note: there are slides
We’ve learned a ton so far. We now understand the basics of Javascript values, variables and functions. We understand the concept of the DOM and know that Javascript lets us modify the DOM.
With that knowledge we’re going to add one other tool. This is the Javascript library jQuery.
Broadly stated, a programming library is a package of code with pre-written functions (and possibly variables, classes, etc) to simplify working in a specific area or category. jQuery is a Javascript library that makes programming in Javascript easier and it is quick to learn.
To use jQuery you first must pull it into your index file on the page where you want to use it. You can add your own jQuery code inside the <script></script> tags or link to an external script.
Example
<!DOCTYPE html>
<html>
<title>Minimal example - working with jquery</title>
<body>
<script src="jquery.js">
<script src="script.js">
</body>
</html>
jQuery is the most famous Javascript library and at one point could be found on over 60% of websites. There are 2 options to use it:
Download it. Choose the compressed, production version 3.3.1.
Then add a link to it in your html index document. Then add a link to your own external script file after that, normally before the closing </body> tag.
A CDN means Content Delivery Network. Since so much of the web uses jQuery, there are companies and foundations that provide free links to jQuery online. Rather than having folks download jQuery from each website that uses it, a website developer can instead link to one of these centrally provided copies of jQuery online. That way, when someone visits your webpage, they will already have a copy of jQuery cached in their browser, and so your page will load faster.
Example - exactly same as above except for the jquery link
<!DOCTYPE html>
<html>
<title>Minimal example - working with jquery</title>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js">
</body>
</html>
Same things as Javascript
In HEAD or BODY
</body> tagIf you understand how CSS works you can understand how jQuery works!
With jQuery, our basic syntax is:
$('selector').action();
$ –> tells the browser we’re using jQuery
('selector') –> is a tag, class or id we are selecting on the webpage. Don’t forget the # or . for IDs and classes.
action() –> is what action should be taken on what we’ve selected
$("p").click(function(){
alert("The paragraph was clicked.");
});
It’s best practices to wrap all of your jQuery code inside a ready event. In other words, we want all of our webpage’s HTML and CSS code to load first BEFORE we start running our jQuery code so that if our script needs content from our webpage it’s already loaded first.
$(document).ready(function(){
//our jQuery code goes here
});
Examples of things you can select:
$("p")
Example: When you click a button, all paragraphs are hidden
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$("*") //select everything on page
$(this) //select current element, whatever it is
$("p.main") //select <p> elements with class "main"
$("p:first")//select first <p> on page
$("p:even") //select all even-numbered paragraphs
$("a[target='/'"]//select all <a> that link to home ("/")
$("[href]") //select anything with a href attribute
Many more example selectors
Events are “things that can happen” on a webpage including:
There are more events. You can find a listing of jQuery events here.
$("p").click(function(){
$(this).hide();
});
$("#main").mouseenter(function(){
alert("You entered main!");
});
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
example:
$(document).ready(function(){
$("button").click(function(){
$("#div3").fadeIn(3000);
});
});
more on fading in and out options
Animations
Slides
Callbacks (functions that you want to have triggered when an effect finishes running)
Use multiple jQuery calls at once by chaining them together.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
To make it easier to read, you can break your code over multiple lines:
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
Easy to do!
let myText = $('#main');
$('button').click(function(){
$('body').html("<p>Changing all your content!</p>");
});
$(‘p’).prepend(“I believe the opposite of this:”);
remove()
Example:
### jQuery to alter CSS
- addClass() - Adds one or more classes to the selected elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute
examples:
$(“button”).click(function(){ $(“h1, h2, h2, p”).toggleClass(“bg-Blue”); });
##### Get and Set CSS
Get example:
let bg = $(‘body’).css(‘background-color’);
Set example:
$(“p”).css({“background-color”: “purple”, “font-size”: “4em”});
#### change Dimensions
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
#### An aside: anonymous functions and passing functions
When we run ```$(document).ready(function(){})``` we are passing an anonymous function as an argument to ```$(document.ready()```
There are two things of note here: anonymous functions, and passing functions as arguments.
### Anonymous Functions
1. Anonymous functions are created at *runtime*
2. They don't have a name
Example of a named (not anonymous function):
function flyToTheMoon(){ alert(“Zoom! Zoom! Zoom!”); }
flyToTheMoon();
Anonymously
function() { alert(“Zoom! Zoom! Zoom!”); } ```
So we have an anonymous function stored as flyToTheMoon now.
Going back to our previous jQuery starter code, we are passing an anonymous function to the function ready(), which runs only once our page has loaded.
Finish your project!
Grading Rubric:
25% Concept Idea
25% Design
25% Functionality
25% Completeness