Head First Javascript Programming

A brain friendly guide to head first JavaScript Programming


Eric Freeman, Elisabeth Robson


62 Pages

5393 Reads

65 Downloads

English

PDF Format

19.3 MB

Java Script

Download PDF format


  • Eric Freeman, Elisabeth Robson   
  • 62 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    read more..

  • Page - 3

    Want to read more? read more..

  • Page - 4

    Head First JavaScript Programming by Eric T. Freeman and Elisabeth Robson Copyright © 2014 Eric F reeman, Elisabeth Robson. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also read more..

  • Page - 5

    ix Intro Your brain on JavaScript. Here you are trying to learn something, while here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s thinking, “Better leave room for more important things, like which wild animals to avoid and whether naked snowboarding is a bad idea.” So how do you trick your brain into thinking read more..

  • Page - 6

    x 1 Getting your feet wet a quick dip into javascript JavaScript gives you superpowers. The true programming language of the web, JavaScript lets you add behavior to your web pages. No more dry, boring, static pages that just sit there looking at you—with JavaScript you’re going to be able to reach out and touch your users, react to interesting events, grab read more..

  • Page - 7

    xi 2 Going further writing real code You already know about variables, types, expressions... we could go on. The point is, you already know a few things about JavaScript. In fact, you know enough to write some real code. Some code that does something interesting, some code that someone would want to use. What you’re lacking is the real experience of writing code, read more..

  • Page - 8

    xii 3Getting functional introducing functions Get ready for your first superpower. You’ve got some programming under your belt; now it’s time to really move things along with functions. Functions give you the power to write code that can be applied to all sorts of different circumstances, code that can be reused over and over, code that is much more manageable, read more..

  • Page - 9

    xiii 4Arrays putting some order in your data There’s more to JavaScript than numbers, strings and booleans. So far you’ve been writing JavaScript code with primitives—simple strings, numbers and booleans, like “Fido”, 23, and true. And you can do a lot with primitive types, but at some point you’ve got to deal with more data. Say, all the items in a shopping read more..

  • Page - 10

    xiv 5A trip to Objectville undestanding objects So far you’ve been using primitives and arrays in your code. And, you’ve approached coding in quite a procedural manner using simple statements, conditionals and for/while loops with functions—that’s not exactly object- oriented. In fact, it’s not object-oriented at all! We did use a few objects here and there read more..

  • Page - 11

    xv Did someone say “Objects”?! 174 Thinking about properties... 175 How to create an object 177 What is Object-Oriented Anyway? 180 How properties work 181 How does a variable hold an object? Inquiring minds want to know... 186 Comparing primitives and objects 187 Doing even more with objects... read more..

  • Page - 12

    xvi 7 Serious types types, equality, conversion, and all that jazz It’s time to get serious about our types. One of the great things about JavaScript is you can get a long way without knowing a lot of details of the language. But to truly master the language, get that promotion and get on to the things you really want to do in life, you have to rock read more..

  • Page - 13

    xvii 8Building an app bringing it all together Put on your toolbelt. That is, the toolbelt with all your new coding skills, your knowledge of the DOM, and even some HTML & CSS. We’re going to bring everything together in this chapter to create our first true web application. No more silly toy games with one battleship and a single row of hiding places. In this read more..

  • Page - 14

    xviii 9 Handling events asynchronous coding After this chapter you’re going to realize you aren’t in Kansas anymore. Up until now, you’ve been writing code that typically executes from top to bottom—sure, your code might be a little more complex than that, and make use of a few functions, objects and methods, but at some point the code just runs its course. read more..

  • Page - 15

    xix 10 Liberated functions first class functions Know functions, then rock. Every art, craft, and discipline has a key principle that separates the intermediate players from the rock star virtuosos—when it comes to JavaScript, it’s truly understanding functions that makes the difference. Functions are fundamental to JavaScript, and many of the techniques we use to design read more..

  • Page - 16

    xx 11 Serious functions anonymous functions, scopes, and closures You’ve put functions through their paces, but there’s more to learn. In this chapter we take it further; we get hard-core. We’re going to show you how to really handle functions. This won’t be a super long chapter, but it will be intense, and at the end you’re going to be more expressive read more..

  • Page - 17

    xxi 12 Creating objects advanced object construction So far we’ve been crafting objects by hand. For each object, we’ve used an object literal to specify each and every property. That’s okay on a small scale, but for serious code we need something better. That’s where object constructors come in. With constructors we can create objects much more easily, and we read more..

  • Page - 18

    xxii 13 Extra strength objects using prototypes Learning how to create objects was just the beginning. It’s time to put some muscle on our objects. We need more ways to create relationships between objects and to share code among them. And, we need ways to extend and enhance existing objects. In other words, we need more tools. In this chapter, you’re going read more..

  • Page - 19

    xxiii 14 The top ten topics (we didn’t cover) Appendix: Leftovers We’ve covered a lot of ground, and you’re almost finished with this book. We’ll miss you, but before we let you go, we wouldn’t feel right about sending you out into the world without a little more preparation. We can’t possibly fit everything you’ll need to know into this relatively small read more..

  • Page - 20

    this is a new chapter 1 Getting your feet wet 1 a quick dip into javascript Come on in, the water’s great! We’re going to dive right in and check out JavaScript, write some code, run it and watch it interact with your browser! You’re going to be writing code in no time. JavaScript gives you superpowers. The true programming language of the read more..

  • Page - 21

    2 Chapter 1 how javascript works The way JavaScript works So let’s introduce JavaScript, HTML & CSS’ s computational cousin. JavaScript lets you create behavior in your web pages. Need to react when a user clicks on your “On Sale for the next 30 seconds!” button? Double check your user’s form input on the fly? Grab some tweets from Twitter and display read more..

  • Page - 22

    you are here 4 3 a quick dip into javascript CSS How you’re going to write JavaScript You create your page just like you always do, with HTML content and CSS style. And you also include JavaScript in your page. As you’ll see, just like HTML and CSS, you can put everything together in one file, or you can place JavaScript in its own file, to be read more..

  • Page - 23

    4 Chapter 1 get javascript in your page How to get JavaScript into your page First things first. You can’t get very far with JavaScript if you don’t know how to get it into a page. So, how do you do that? Using the <script> element of course! Let’s take a boring old, garden-variety web page and add some dynamic behavior using a <script> read more..

  • Page - 24

    you are here 4 5 a quick dip into javascript Q: I’ve heard JavaScript is a bit of a wimpy language. Is it? A: JavaScript certainly wasn’t a power lifter in its early days, but its importance to the web has grown since then, and as a result, many resources (including brain power from some of the best minds in the business) have gone into read more..

  • Page - 25

    6 Chapter 1 javascript history JavaScript, you’ve come a long way baby... JavaScript 1.0 JavaScript 1.3 Netscape might have been before your time, but it was the first real browser company. Back in the mid-1990s browser competition was fierce, particularly with Microsoft, and so adding new, exciting features to the browser was a priority. And towards that goal, Netscape read more..

  • Page - 26

    you are here 4 7 a quick dip into javascript Look how easy it is to write JavaScript var price = 28.99; var discount = 10; var total = price - (price * (discount / 100)); if (total > 25) { freeShipping(); } var count = 10; while (count > 0) { juggle(); count = count - 1; } var dog = {name: "Rover", weight: 35}; if read more..

  • Page - 27

    8 Chapter 1 javascript exercise solution Look how easy it is to write JavaScript var price = 28.99; var discount = 10; var total = price - (price * (discount / 100)); if (total > 25) { freeShipping(); } var count = 10; while (count > 0) { juggle(); count = count - 1; } var dog = {name: "Rover", weight: 35}; if read more..

  • Page - 28

    you are here 4 9 a quick dip into javascript And usually increase the size of your paycheck too! Look, if you want to go beyond creating just static web pages, you gotta have JavaScript chops. It’s True. With HTML and CSS you can create some great looking pages. But once you know JavaScript, you can really expand on the kinds of pages you can create. read more..

  • Page - 29

    10 Chapter 1 javascript statements With HTML we mark up text to create structure. Like, “I need a large heading called Mocha Cafe Latte; it’s a heading for a drink. And I need a paragraph after that.” How to make a statement When you create HTML you usually mark up text to give it structure; to do that you add elements, attributes and values to the read more..

  • Page - 30

    you are here 4 11 a quick dip into javascript Variables and values You might have noticed that JavaScript statements usually involve variables. Variables are used to store values. What kinds of values? Here are a few examples: var winners = 2; var name = "Duke"; var isEligible = false; This statement declares a variable named winners and assigns a numeric read more..

  • Page - 31

    12 Chapter 1 javascript keywords Back away from that keyboard! You know variables have a name, and you know they have a value. You also know some of the things a variable can hold are numbers, strings and boolean values. But what can you call your variables? Is any name okay? Well no, but the rules around creating variable names are simple: just follow the two read more..

  • Page - 32

    you are here 4 13 a quick dip into javascript ƒ Each statement ends in a semicolon. x = x + 1; ƒ A single line comment begins with two forward slashes. Comments are just notes to you or other developers about the code.They aren’t executed. // I'm a comment ƒ Whitespace doesn’t matter (almost everywhere). x = 2233; ƒ read more..

  • Page - 33

    14 Chapter 1 syntax exercise Below, you’ll find JavaScript code with some mistakes in it. Your job is to play like you’re the browser and find the errors in the code. After you’ve done the exercise look at the end of the chapter to see if you found them all. // Test for jokes var joke = "JavaScript walked into a bar....'; var toldJoke = read more..

  • Page - 34

    you are here 4 15 a quick dip into javascript Express yourself var total = price - (price * (discount / 100)); Here’s a JavaScript statement that assigns the result of evaluating an expression to the variable total. And this whole thing is an expression. Here’s our variable total. And the assignment. To truly express yourself in JavaScript you need expressions. read more..

  • Page - 35

    16 Chapter 1 expressions exercise (9 / 5) * temp + 32 color == "orange" name + ", " + "you've won!" yourLevel > 5 (level * points) + bonus color != "orange" 1000 + "108" What is the result when temp is 10? __________ Is this expression true or false when color has the value “pink”? __________ Or has the value read more..

  • Page - 36

    you are here 4 17 a quick dip into javascript while (scoops > 0) { document.write("Another scoop!"); scoops = scoops - 1; } Doing things more than once You do a lot of things more than once: Lather, rinse, repeat… Wax on, wax off… Eat candies from the bowl until they’re all gone. Of course you’ll often need to do things in code more read more..

  • Page - 37

    18 Chapter 1 javascript iteration Seeing as this is your first while loop, let’s trace through a round of its execution to see exactly how it works. Notice we’ve added a declaration for scoops to declare it, and initialize it to the value 5. How the while loop works var scoops = 5; while (scoops > 0) { document.write("Another scoop!<br>"); read more..

  • Page - 38

    you are here 4 19 a quick dip into javascript var scoops = 5; while (scoops > 0) { document.write("Another scoop!<br>"); scoops = scoops - 1; } document.write("Life without ice cream isn't the same"); The next statement subtracts one from the number of scoops and then sets scoops to that new value, four. 1 scoop gone, 4 left! That’s the last read more..

  • Page - 39

    20 Chapter 1 javascript while loop var scoops = 5; while (scoops > 0) { document.write("Another scoop!<br>"); scoops = scoops - 1; } document.write("Life without ice cream isn't the same"); The next statement subtracts one from the number of scoops and sets scoops to that new value, which is three. 2 scoops gone, 3 left! That’s the last statement in read more..

  • Page - 40

    you are here 4 21 a quick dip into javascript var scoops = 5; while (scoops > 0) { document.write("Another scoop!<br>"); scoops = scoops - 1; } document.write("Life without ice cream isn't the same"); And as you can see, this continues... each time we loop, we decrement (reduce scoops by 1), write another string to the browser, and keep going. 3 read more..

  • Page - 41

    22 Chapter 1 javascript conditionals You’ve just seen how you use a conditional to decide whether to continue looping in a while statement. You can also use boolean expressions to make decisions in JavaScript with the if statement. The if statement executes its code block only if a conditional test is true. Here’s an example: if (scoops < 3) { read more..

  • Page - 42

    you are here 4 23 a quick dip into javascript You can string together as many if/else statements as you need, and if you want one, even a final catch-all else, so that if all conditions fail, you can handle it. Like this: And, when you need to make LOTS of decisions if (scoops >= 5) { alert("Eat faster, the ice cream is going to melt!"); } else read more..

  • Page - 43

    24 Chapter 1 code magnets coding exercise Code Magnets A JavaScript program is all scrambled up on the fridge. Can you put the magnets back in the right places to make a working JavaScript program to produce the output shown below?. Check your answer at the end of the chapter before you go on. var name = "Joe"; Your unscrambled program should produce this read more..

  • Page - 44

    you are here 4 25 a quick dip into javascript We’re using these three methods in this chapter. As you’ve seen, the browser gives you a quick way to alert your users through the alert function. Just call alert with a string containing your alert message, and the browser will give your user the message in a nice dialog box. A small confession though: read more..

  • Page - 45

    26 Chapter 1 comparing means of javascript output All our methods of communication have come to the party with masks on. Can you help us unmask each one? Match the descriptions on the right to the names on the left. We’ve done one for you. document.write console.log alert document object model I’ll stop your user in his tracks and deliver a short message. The read more..

  • Page - 46

    you are here 4 27 a quick dip into javascript Take any old string... A closer look at console.log Let’s take a closer look at how console.log works so we can use it in this chapter to see the output from our code, and throughout the book to inspect the output of our code and debug it. Remember though, the console is not a browser feature most casual read more..

  • Page - 47

    28 Chapter 1 using the javascript console Opening the console Every browser has a slightly different implementation of the console. And, to make things even more complicated, the way that browsers implement the console changes fairly frequently—not in a huge way, but enough so that by the time you read this, your browser’s console might look a bit different from what read more..

  • Page - 48

    you are here 4 29 a quick dip into javascript Coding a Serious JavaScript Application Let’s put all these new JavaScript skills and console.log to good use with something practical. We need some variables, a while statement, some if statements with else s. Add a little more polish and we’ll have a super-serious business application before you know it. read more..

  • Page - 49

    30 Chapter 1 the script tag Shouldn’t we be putting this code in actual web pages so we can see the output? Or are we just going to keep writing answers on paper? Good point! Yes, it’s time. Before we got there we wanted to make sure you had enough JavaScript under your belt to make it interesting. That said, you already saw in the beginning of read more..

  • Page - 50

    you are here 4 31 a quick dip into javascript A Test Drive <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <body> <script> </script> </body> </html> Type this in. Here’s our test run of this code. The code read more..

  • Page - 51

    32 Chapter 1 how to add code to your page You can place your code inline, in the <head> element. The most common way to add code to your pages is to put a <script> element in the <head>. Sure, it makes your code easy to find and seems to be a logical place for your code, but it’s not always the best place. Why? Read on … How read more..

  • Page - 52

    you are here 4 33 a quick dip into javascript <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <body> <script> var word = "bottles"; var count = 99; while (count > 0) { read more..

  • Page - 53

    34 Chapter 1 external javascript code 3 Now we need to place a reference to the “code.js” file in “index.html” so that it’s retrieved and loaded when the page loads. To do that, delete the JavaScript code from “index.html”, but leave the <script> tags. Then add a src attribute to your opening <script> tag to reference “code.js”. 4 That’s it, the surgery read more..

  • Page - 54

    you are here 4 35 a quick dip into javascript You know how to use the <script> element to add code to your page, but just to really nail down the topic, let’s review the <script> element to mak e sure we have every detail covered: Anatomy of a Script Element <script type="text/javascript" > alert("Hello world!"); </script> The <script> read more..

  • Page - 55

    36 Chapter 1 interview with javascript Head First: Welcome JavaScript. We know you’re super- busy out there, working on all those web pages, so we’re glad you could take time out to talk to us. JavaScript: No problem. And, I am busier than ever these days; people are using JavaScript on just about every page on the Web nowadays, for everything from simple menu read more..

  • Page - 56

    you are here 4 37 a quick dip into javascript ƒ JavaScript is used to add behavior to web pages. ƒ Browser engines are much faster at executing JavaScript than they were just a few years ago. ƒ Browsers begin executing JavaScript code as soon as they encounter the code in the page. ƒ Add JavaScript to your page with the <script> element. ƒ read more..

  • Page - 57

    38 Chapter 1 javascript crossword JavaScript cross Time to stretch your dendrites with a puzzle to help it all sink in. ACROSS 2. To link to an external JavaScript file from HTML, you need the _______ attribute for your <script> element. 6. To avoid embarrassing naming mistakes, use __________ case. 7. JavaScript adds _______________ to your web pages. 10. There are 99 read more..

  • Page - 58

    you are here 4 39 a quick dip into javascript \\ Movie Night var zip code = 98104; var joe'sFavoriteMovie = Forbidden Planet; var movieTicket$ = 9; if (movieTicket$ >= 9) { alert("Too much!"); } else { alert("We're going to see " + joe'sFavoriteMovie); } // Test for jokes var joke = "JavaScript walked into a bar....'; var read more..

  • Page - 59

    40 Chapter 1 exercise solutions (9 / 5) * temp + 32 color == "orange" name + ", " + "you've won!" yourLevel > 5 (level * points) + bonus color != "orange" 1000 + "108" What is the result when temp is 10? __________ Is this expression true or false when color has the value “pink”? __________ Or, has the value read more..

  • Page - 60

    you are here 4 41 a quick dip into javascript Code Magnets Solution A JavaScript program is all scrambled up on the fridge. Can you put the magnets back in the right places to make a working JavaScript program to produce the output shown below?. Here’s our solution. var name = "Joe"; Your unscrambled program should produce this output. Here are the read more..

  • Page - 61

    42 Chapter 1 exercise solutions JavaScript Cross Solution All our methods of communication have come to the party with masks on. Can you help us unmask each one? Match the descriptions on the right to the names on the left. Here’s our solution: document.write console.log alert document object model I’ll stop your user in his tracks and deliver a short message. The read more..

  • Page - 62

    actionURI(http://www.oreilly.com):oreilly.com Spreading the knowledge of innovators Want to read more? You caactionURI(http://shop.oreilly.com/product/0636920027065.do):n actionURI(http://shop.oreilly.com/product/0636920027065.do): buy actionURI(http://shop.oreilly.com/product/0636920027065.do): this actionURI(http://shop.oreilly.com/product/0636920027065.do): book at oreilly.com in print and ebook format. Buy 2 read more..

Write Your Review