Learn JavaScript Visually (Ivelin Demirov) (Z-Library)
JavaScript
It's a beautifully illustrated full-color JavaScript book that teaches the basics of this popular programming language through Metaphors, Analogies and Easy Step-by-Step Exercises WHO IS THIS JAVASCRIPT BOOK FOR? If you answer YES to one or more of the following questions, this book is for you: I know a little HTML and CSS I tried to learn JavaScript before I find programming books boring I can't focus long enough reading technical texts I need to start really slow I am a graphic and/or web designer I have a book on JavaScript already I am a parent who wants to spark an interest in programming in my kids WHAT WILL I LEARN? How to read and write JavaScript The syntax of the language The most important concepts Programming terminology Basics of the object oriented programming To exercise regularly This is not a complete book on JavaScript. You need to follow a complete guide or/and an online resource for detailed explanation of each concept. HOW IS THIS BOOK DIFFERENT? This book is for Visual Learners and comes with Interactive Exercises. Visual Learners retain information very differently than their left brained counter-parts, and thus benefit from different approaches. Full color illustrations help memory triggers as your brain never forgets an image, metaphor or schema. One page of a visual guide can equal one chapter of a conventional book as illustrations can make a world of difference over strictly words on a page! Printed in USA
329
Views
0
Downloads
0.00
Total Donations
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
Page
1
(This page has no text content)
Page
2
Credits & Legal AUTHOR Ivelin Demirov EDITOR John Duncan PAGE DESIGN Jordan Milev ILLUSTRATOR Ivelin Demirov PROOFREADER Carol Dew CREDITS A book is a collaborative affair and it takes so many people to make it a reality and I would like to thank every Kickstarter backer who has helped to prepare this book for production. I must acknowledge the help of the online JavaScript community, who have toiled in the background for many years to help make JavaScript the exciting programming language it has become COPYRIGHT ©2015 Ivelin Demirov NOTICE OF RIGHTS All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law. TRADEMARKS All trademarks by the respective owners. NOTICE OF LIABILITY The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor the publisher shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or
Page
3
indirectly by the instructions contained in this book or by the computer software and hardware products described in it. PAPERBACK ISBN 978-1495233005 CONTACTS jsvisually.com
Page
4
Contents Credits & Legal Why JavaScript? Where do I put JavaScript? How do I practice JavaScript? The Interpreter /Compiler. Semicolons. Brackets. Braces. Parentheses. Comments. Data Types. Variables. Declaration and Initialization. Unary operators. Binary operators. Bit operations. Operator precedence. Statements. Expressions. Strings. Concatenation. Reserved words. Comparisons. Conditions.
Page
5
Loops. Arrays. Arrays methods. Functions. Nesting. The DOM node tree. Manipulating the DOM. Function statements vs function expressions Immediately-invoked function expressions. Scope. Hoisting. Closures. Events. Objects. Methods. Constructors. Prototypes.
Page
6
Why JavaScript? JavaScript is a dynamic computer programming language which allows us to make many dynamic actions on the client side via scripts. Because it is easy to learn and very functional, its popularity is high. JavaScript is used to validate forms, make games, and many more functions on the computer that is browsing the site. It is widely used as scripts, although it has an object oriented capabilities. Another good aspect is that it is also server
Page
7
side which adds to its function as a companion to websites. JavaScript has dynamic typing and first class functions, which help its support not just object oriented, but also imperative and functional programming styles.JavaScript is also used outside the web in PDF documents, desktop widgets and more. This means that whether you are trying to create an interactive website, add functionality to your current one, or even have some scripts for your web server, the language will help you achieve your goals. Since JavaScript is just a text, it does not need to be compiled – you can use any text editor of your choice to write or modify it. This contributes to its ease of use. There are also many available tools for you to debug, view, and even edit the JavaScript code from the web browser as you navigate a website. If you are familiar with web development, you have probably heard of jQuery, Dojo and others. They are used to extend JavaScript and increase its potential and usefulness. They are libraries of code available for you to simplify some of the more complex commonly used code. After all, JavaScript is very powerful and fast, but writing everything from scratch can be very tedious.
Page
8
Where do I put JavaScript? Since JavaScript is used on websites, you would think you can just put it anywhere in the code of your site. Well, not quite. You can add it in between the head tags <head></head>, and also on the body tags <body> </body>. It is very important to keep in mind that any JavaScript code must be enclosed by the script tag <script></script>. Furthermore, you can also add scripts located anywhere else on the server, client, or even web, as long as you provide the clear path. These are known as external scripts. They are very handy when you have to reuse the same script on different sites. All you have to do is place them somewhere where other sites can access and link to them. The following code shows examples of where to put JavaScript code, and how to use both, internal and external code. Just remember that they have to be in the scope of the script tags for them to work properly. The code will create a pop-up window every time you visit the site. It is very useful for providing important information to the user before anything else. 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>My Title</title> 5. <script type="text/javascript"> alert(“It’s best if I sit low.”);</script> <!--embed script--> 6. </head> 7. <body> 8. <h1>Where do I put JavaScript?</h1> 9. <!--lines 5 and 10 create a pop up with a message--> 10. <script src = "main.js"></script><!--external script--> 11. </body> 12. </html> 1. alert("I pop-up from the external file!")
Page
9
EXERCISE: 1 Where do I put JavaScript? PROBLEM: Write a simple HTML file and link a javascript.js file with it. YOUR CODE: Write your code here and compare it with the answer below ANSWER: jsvisually.com/1.html
Page
10
How do I practice JavaScript? So far, JavaScript sounds interesting to you, right? Then you are probably wondering how to get started or what program you can use to start playing with JavaScript interactively. As we have mentioned before, there are many tools available, but JavaScript is so popular nowadays that most common web browsers have their own tool for JavaScript debugging, which you can use. Just look for the developer tools of your browser and open the JavaScript console and you will be able to test small bits of code right from your browser without having to install anything new. If you want more control, then you can install the Firebug extension. In case you want to work locally with your code, then you can use specialized text editors such as Notepad++ or Sublime Text, which support many scripting and programming languages besides plain text. That means that you can use it to edit not just JavaScript, but the HTML of the site itself, if you have access to it. The both programs I mentioned are available free and are multiplatform.
Page
11
in the console enter 2+2 and hit Enter install the Firebug extension for even more control
Page
12
click the red arrow to open/close the code panel
Page
13
Exercise: 2 Practice JavaScript. PROBLEM: Open the console of your browser and calculate the area of the right triangle below ANSWER: jsvisually.com/2.html
Page
14
The Interpreter /Compiler.
Page
15
1. <script> 2. alert("This line first"); 3. //ignore this line. It's a comment 4. alert("This line second"); 5. </script> An interpreter or compiler is the software that interprets, compiles and executes code. JavaScript can be interpreted or compiled. Most modern browsers compile the code before execution.
Page
16
However, this definition might not be enough for less experienced users in the world of programming. Both interpreters and compilers translate high-level language which is the programming languages we use that contains English words or from other languages, and turns this source code into machine language, which is what the computers actually understand. Machine code consists of 1’s and 0’s, also known as binary code. There are a few differences between the interpreter and the compiler. The interpreter translates one statement at the time, which reduces the time it takes to analyze the source code, yet the overall execution time is slower when compared to a compiler, which scans and translates the entire source code, thus taking longer time to analyze the code, but in return we get comparatively faster execution time. Another difference is that the interpreter does not generate any intermediate object code, so it is more memory efficient, while the compiler does, and a need for more memory is an imperative. Another key difference is in the debugging area – interpreters keep translating until the first error is met, while the compiler only displays it after it has finished with the entire source code, and so debugging becomes a little harder. Some high-level programming languages use one over the other; for example, python uses the interpreter, while C uses compilers. However, JavaScript can currently use both, although at the beginning it was more of an interpreted language.
Page
17
EXERCISE: 3 The Interpreter/Compiler. PROBLEM: Modify the code to change the order of execution to the following: first second third 1. alert("execute this second"); 2. alert("execute this first"); 3. alert("execute this third"); ANSWER: jsvisually.com/3.html
Page
18
Semicolons. Semicolons are used to separate statements. As opposed to other programming languages, they are optional. It is a good practice to consistently use them in your code. Missing a semicolon might not give you an error, but your code might not run as expected. When you have statements in one line, the first semicolon is required. When you have statements separated by line breaks, semicolons are optional as the line break acts as one. However, there are some cases in which you can break a statement into several lines and it will work like the example from line 8, while others will cause problems, as it is the case of the code on line 13. You should also avoid putting a semicolon after a closing curly bracket with one exception -- when you are doing assignment statements. var obj = {}; 1. // No semicolons after }: 2. if (...) {...} else {...} 3. for (...) {...} 4. while (...) {...} 5.
Page
19
6. // BUT: 7. do {...} while (...); 8. 9. // function statement: 10. function (arg) { /*do this*/ } // NO semicolon after } You can put semicolons after the round bracket for if, for, while, or switch statement. Otherwise JavaScript will think it is an empty statement instead of it being part of a loop or condition. 1. if (0 === 1); { alert("hi") } 2. 3. // equivalent to: 4. 5. if (0 === 1) /*do nothing*/ ; 6. alert ("hi");
Page
20
EXERCISE: 4 Semicolons. PROBLEM: Add the missing semicolons. 1. x = 2y = 3 2. z = x + y ANSWER: jsvisually.com/4.html
The above is a preview of the first 20 pages. Register to read the complete e-book.
AI Reading Assistant
Whole-book reading guide from stratified index samples; jump to passages in the text
AI guide
# Learn JavaScript Visually — Reading Guide
## 【One-Line Pitch】
A full-color, metaphor-driven introduction to JavaScript fundamentals for visual learners, designers, and complete beginners who find traditional programming books dry or intimidating. If you've tried learning JavaScript before and bounced off, this book's illustrated approach and bite-sized exercises offer a gentler on-ramp.
## 【Book Arc】
- **Opening (~0%–6%)**: Why JavaScript matters and where to place it in HTML — covers the `<script>` tag, internal vs. external scripts, and the browser console as your first playground.
- **Early (~6%–18%)**: How JavaScript actually runs — interpreters vs. compilers, semicolon rules, and the three grouping symbols (brackets, braces, parentheses) that beginners constantly mix up.
- **Early (~18%–29%)**: Core building blocks — variables, data types, naming rules, and comments, with practical exercises to lock in the syntax.
- **Middle (~29%–47%)**: Operators deep-dive — unary, binary, assignment, bitwise shift, comparison, and equality operators, explained with worked examples.
- **Middle (~47%–59%)**: Statements, expressions, and code blocks — how commands execute in order, why JavaScript lacks block scope (a classic bug source), and exception handling basics.
- **Late (~59%+)**: Strings and comparison in practice — concatenation, indexing, and the ever-important `==` vs. `===` distinction.
## 【Key Takeaways】
- **Visual-first learning works for programming** (Opening): The book's core premise is that images, metaphors, and schemas stick in memory far better than walls of text — one illustrated page can replace a chapter of a conventional textbook. This isn't fluff; it's a deliberate pedagogical strategy for right-brained learners.
- **Placement matters, but the `<script>` tag is non-negotiable** (Opening): JavaScript can live in `<head>` or `<body>`, inline or as external files, but every line must be inside `<script></script>` tags to execute. External scripts are the reusable, professional choice.
- **Interpreters and compilers trade off speed for memory** (Early): Interpreters translate line-by-line (slower execution, less memory, easier debugging), while compilers process everything upfront (faster execution, more memory, harder debugging). JavaScript historically used interpreters but now can use both.
- **Semicolons are optional but dangerous** (Early): Line breaks can substitute for semicolons, but relying on this causes subtle bugs. The rule: use them consistently, never after closing curly braces (except in assignment statements), and always when multiple statements share a line.
- **Brackets, braces, and parentheses each have distinct jobs** (Early): Brackets `[]` hold arrays, braces `{}` create objects and group statements, parentheses `()` supply function parameters and control expression order. Unclosed grouping symbols are among the hardest bugs for beginners to spot.
- **Variable naming has hard rules and soft best practices** (Early): Names can't start with numbers, can't be reserved keywords, and are case-sensitive — but descriptive names are what make code readable. Uninitialized variables have an undefined data type until you assign a value.
- **Prefix vs. postfix increment changes execution order** (Middle): `a++` returns the value then increments; `++a` increments then returns. This distinction is crucial in loops and a classic source of off-by-one errors.
- **JavaScript lacks block scope — and that's a trap** (Middle): Variables declared inside `{}` blocks still leak to the surrounding function or script. The book's example shows a block statement overwriting an outer variable, producing `2` instead of `1` — a bug that surprises many beginners.
## 【Reading Tips】
- **Do every exercise**: Each chapter ends with a small problem (like calculating a triangle's area or assigning John's age to variables) with answers at jsvisually.com. These are the book's real value — don't skip them.
- **Skim the operator chapters**: The bitwise and shift operator sections (~41%–47%) are more reference than tutorial. Read them once for awareness, but don't stress about memorizing — you'll rarely use `<<` or `>>>` as a beginner.
- **Deep-read the scope discussion (~53%)**: The block scope trap is one of the most practically important concepts for avoiding real bugs. Make sure you understand why the example outputs `2` instead of `1`.
- **Pair with a complete reference**: The author explicitly states this isn't a comprehensive JavaScript book. Use it to build intuition, then follow with MDN or a fuller guide for depth.
- **Use the browser console constantly**: The book's exercises assume you'll practice in the console (and suggests Firebug for extra control). Type everything yourself — reading code isn't the same as running it.
## 【Coverage Limits】
This guide covers the book's first ~59% (fundamentals through strings and comparison operators). The excerpts do not cover later sections on functions, objects, arrays in depth, or object-oriented programming — the book's blurb promises these, but they fall outside the sampled material.
##
Passage locations
Page 6
high. JavaScript is used to validate forms, make games, and many more functions on the computer that is browsing the site. It is widely used as scripts, alth...
View in text
Page 18
ve statements in one line, the first semicolon is required. When you have statements separated by line breaks, semicolons are optional as the line break acts...
View in text
Excerpt 3
ze as the format is the same as an operand and an operator. Operand: It is the quantity on which an operation is to be done – basically, the variable. Operat...
View in text
Excerpt 4
n condition becomes true. (A != B) is true. Bit operations. The Bit operators are also a part of the Binary Operators, but they are strictly used for logic o...
View in text
Recommended for You
{{#thumbnailUrl}}
{{/thumbnailUrl}}
{{^thumbnailUrl}}
{{/thumbnailUrl}}
Loading recommended books...
Failed to load, please try again later
Tip the Site
Scan the WeChat Pay or Alipay code to tip. No login required.
WeChat Pay
Alipay