Being Awesome with Javascript and Jquery Not a lot of time, do this. I’m only going to talk for a few minutes, and then we’re going to tutorial this mother. HTML is for Content HTML is a markup language used to define and describe content. Whether it be a blog post, a search engine result, or an e-commerce site, the core content of a web page is written in HTML. A semantic markup, HTML is used to describe content in universal terms (H1 for a headers, , p for a paragraph, img for an images, etc. - ) CSS is for Presentation CSS is a supplemental language that applies style to HTML documents. CSS is all about making content look better by defining fonts, colors, and other visual aesthetics. The power of CSS comes from the fact that styling is not intermingled with content. This means you can apply different styles to the same piece of content, which is critical when building responsive websites that look good across a range of devices. Things like ID for an individual style. Class for a specific style JavaScript is for Interactivity In the browser, JavaScript adds interactivity and behavior to HTML content. Without JavaScript, web pages would be static and boring. JavaScript helps bring a web page to life. Being Awesome with Javascript and Jquery A tutorial by Zoe F
Tutorial http://www.binaryspark.com/classes/Javascript_rocks/javascript_lab_instructions.html goo.gl/m7fa4t goo.gl/m7fa4t No need to download anything this time, but I would make a folder to store all your files. I would also suggest using Chrome. It’s just going to make your life easier.
<Html> <head> <script> I am some header javascript </script> <script src=I am a link to an external javascript file.js> </head> <body> <a href = I am some built-in javascript>Text</a> </body> </html> Just like with CSS There are three main ways to get javascript into the page. The first is directly in the HTML. Just like we had inline css, we can have inline javascript That’s where we pretend it’s HTML and just sort of sweep under the carpet that there’s something new going on here. ::walk them through screen:: The second is header . ::walk them through screen:: The third is in a separate document. Just like a css document, except it’s a .js document. ::walk them through screen:: ::Remind them of the ::Have them do example:: If at any point today you don’t recognize something, look it up in the reference.
Variables Strings: Numbers: Booleans var a = "I am a string"; var b = “So am I!”; var c = “100”; Numbers: var num1 = 100; var whatsup = 100.10; var num3 = 0.10; Booleans var okay1 = true; var I_fail = false; More exotic variables: Objects, arrays, functions..... Already we notice some stuff. When we start adding connectivity to our webpage, outside of links, White space doesn’t matter, capitolization and carriage returns do. So, lets start off with a very very basic programming concept: Variables ::What is it:: ::Walk through types:: (note diff between “strings” and numbers. ::What are objects, arrays? We’ll be getting to them next week.
Do some stuff with variables! Put two strings together! var firstNumber = “five”; var secondNumber = “ten”; var thirdNumber = firstnumber+secondnumber; //outputs: fiveten Put two variables together!! var firstNumber = 5; var secondNumber = 10; var thirdNumber = firstNumber+secondNumber; //outputs: 15 Explain concatenation vs addition. DO TUTORIAL
Comparisions var foo = 1; var bar = 0; var bim = 2; var whatsup = “1”; foo == bar; // console would output false foo != bar; // true foo > bim; // false foo <= bim;//true foo == whatsup; //false Operators The point of variables is NOT to make your life more complex, its for the computer to combine and recombine different values so that you don’t have to. ::Explain:: What’s those double line things? Comments! DON’T DO NEXT SECTION YET
Boolean Logic var foo = true; var bar = false; // OR statement returns 1, which is true foo || bar; // AND statement returns 0, which is false foo && bar; //If foo is true and bar is true Now, why do we care about these true/false things? Well, because we can use them to let our code make deicsions for us. )))Explain Booleans, ands and ors DON’T DO NEXT SECTION YET
If/Thens if (thing you want to evaluate to true or false) { // The code in here will run if its true. } else { // this code will run if the above is false. So that’s great, but how would we use all that stuff in our code? Glad you asked! We’d use what’s called an if/then statement ::Explain Ifs/Thens:: DO NEXT SECTION
An easier if/then statement: Switch switch ( foo ) { case "bar": alert( "the value was bar -- yay!" ); break; case "baz": alert( “It was baz :(" ); default: alert( “It wasnt either of those" ); } We are NOT going to go over these, but I just want you to be familiar with them so if they come up during class you know what to do.
Functions Function buyOranges() { Find some oranges Bring them to me }; Function buyOranges(amount, maxCost) { Choose amountof them If they are less than maxCost, bring them to me buyOranges(5, 20); //Buy me 5 oranges if it’s less than $20 Functions: ::what are they:: - Functions contain blocks of code that need to be executed repeatedly. That way you don’t have to type them over and over. You can have them run by themselves, or you can have them run on some information we give them. It’s almost like, let’s say you’re ordering in a restaurant. You can tell the waiter “bring me one appetizer, one main, and one desert” or you can say, “bring me an appetizer that is green and made with lettuce, a main that has 300 calories, and a desert that’s pure whipped cream and frosting. ::walk through:: Those instructions are called “arguments” Functions can take zero or more arguments, and can optionally return a value. Use example of “Buy oranges (go to the store, transfer money)” “Buy X oranges” Note – you can nest functions inside of other functions, you can have functions that call other functions that call other functions, and you can even have functions that all functions that are defined inside of functions! DO TUTORIAL
Jquery:It’s just another bunch of functions Reference: http://www.w3schools.com/jquery/default.asp Now, this is all well and good, but there are a lot of functions out there, and they all do a certain number of things. We all want to resize things, we all want to change the colors of things, we all want to make divs appear and disapear. Rather than writing brand new functions every time to make this happen, lovely other coders have created them for us. And these functions are all collected into varius .js documents just like the one you have made. And when a .js document has more than a couple functions that they think other people might want to use, we call that a library. So if you wanted to make a “greetings” library, you could write a whole bunch more functions that take various ways to say hi to people and spit out the greetings to the console. Well the most famous, most often used library, which is just a collection of functions in a .js file, is called Jquery. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into functions that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, DOM (Document object model) manipulation. That’s a fancy way of saying it lets you mess with items by ID. Remember ID’s? The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations It’s used so much that you don’t have to download the .js file that has all of its functions listed – you can – but there’s a permanent copy of it that sits right on google. So just like we linked to our own file, as long as we’re online and have internet access, we can just link to the jquery document. So let’s start off by just looking at this library. Great, now rather than download this file and saving it to our folder, we can, but why bother, let’s just link to it. That way as long as we have an internet connection we can use it externally. So let’s do that. ::do section:: Great! Next week we’ll start talking about how to integrate this stuff with making stuff really happen on our webpage using css and all kidns of other fun stuff.