JavaScript The Ultimate Guide to Understand JavaScript Code and its Fundamentals. Discover Literal and Control Flow. Learn Variables, Functions, Object and the Best jQuery. Mark Graph © Copyright 2020 - All rights reserved. The content contained within this book may not be reproduced, duplicated or transmitted without direct written permission from the author or the publisher. Under no circumstances will any blame or legal responsibility be held against the publisher, or author, for any damages, reparation, or monetary loss due to the information contained within this book, either directly or indirectly. Legal Notice: This book is copyright protected. It is only for personal use. You cannot amend, distribute, sell, use, quote or paraphrase any part, or the content within this book, without the consent of the author or publisher. Disclaimer Notice: Please note the information contained within this document is for educational and entertainment purposes only. All effort has been executed to present accurate, up to date, reliable, complete information. No warranties of any kind are declared or implied. Readers acknowledge that the author is not engaging in the rendering of legal, financial, medical or professional advice. The content within this book has been derived from various sources. Please consult a licensed professional before attempting any techniques outlined in this book. By reading this document, the reader agrees that under no circumstances is the author responsible for any losses, direct or indirect, that are incurred as a result of the use of information contained within this document, including, but not limited to, errors, omissions, or inaccuracies. Introduction Chapter 1 Fundamental JavaScript Concepts Chapter 2 HTML Overview Chapter 3 JavaScript’s Control Flow Statements Chapter 4 The Different Types of Loops in JavaScript Chapter 5 Syntax Chapter 6 Enabling JavaScript in Browsers Chapter 7 Placement of JavaScript in Files Chapter 8 Popup Message Chapter 9 JavaScript Variables Chapter 10 JavaScript ECMAScript Standard Chapter 11 Working With JavaScript: A Brief HTML Guide for Beginners Chapter 12 Changing the content of HTML elements using DOM Chapter 13 Changing CSS using DOM Chapter 14 Pointers Chapter 15 Expressions and Operators Chapter 16 What Are Some Of The JavaScript Variables? Chapter 17 Variables, data types & constants Chapter 18 Closures and Callbacks in JavaScript Chapter 19 Apply, call, and bind methods in JavaScript Chapter 20 Events Chapter 21 Arrays in JavaScript Chapter 22 Values, Types, and Operators Chapter 23 Definition of Arrays in JavaScript Conclusion Introduction HTML is not very smart. It mostly lets people look at text and images and allows them to move to other pages where they will do more of the same. What adds the intelligence to a web page is JavaScript. It makes the website more engaging, effective, and useful by letting pages respond to our visitors when they interact with the content. This book assumes that we already know how to use HTML to specify web page structure and content. It will be additionally beneficial if we are familiar how pages are styled with CSS, separate from the web page structure. If this is the case then we are ready to add a little behavior to the page and make it more dynamic and interactive with JavaScript. Otherwise, without HTML and CSS, JavaScript will not do us much good. They are viewed as the three fundamental pillars of the web page: structure, presentation and behavior. What is JavaScript? JavaScript is the scripting language of the web with the sole purpose of adding interactivity to our pages. In addition to interactivity, modern versions of JavaScript can also be used to load and parse information from external sources or even the website's users. JavaScript is essentially a piece of programming code embedded in the HTML structure of a web page. When the web browser reads this code it activates a built-in interpreter that understands how to decipher this language and process its commands. Although programming is involved during coding, JavaScript is not a programming language. In conventional web programming languages, like Java or .NET, the code has to be compiled before it is executed. Compiling means that the code has to be first sent to a special program that is run on the server. This program, also known as application server software, translates the code, creates the requested page and/or functionality and serves this back as HTML. Scripting languages, like JavaScript, are note compiled, but rather are interpreted on-the-fly. This means that no special software is involved as the user's own browser runs and executes the code as it is encountered. Note: JavaScript was created during a time when Java was a very popular language. Other than that, the languages are not related and have almost nothing in common except for basic programming logic. Implementing JavaScript Now that we have a general idea as to what JavaScript is, we can start working with this language. As JavaScript code is part of the HTML document, we need to know how to tell browsers to run our scripts. There are two common options available to us when we want to include JavaScript in a web document and in both cases we will use the <script> element. The <script> tag is used when we want to tell the browser where the JavaScript code begins and where it ends within an HTML document. As such, this tag can be included either in the head or the body section of the page. The first option is to place the code inline within the document structure. To do this we will begin by opening a <script> tag, entering the JavaScript code, and then finish by closing with the </script> tag. We can theoretically leave the document like this as almost all browsers will assume that the scripting language between the <script> tags is JavaScript by default. Nevertheless, for maximum compatibility we will extend this tag with the type attribute and the text/javascript value in order to instruct the browser how to exactly interpret the code. <script type="text/javascript"> //A JavaScript comment </script> The second option is to load the JavaScript code from an external file into our HTML document. For this purpose we can use the <script> element again, but this time in addition to the type attribute we will also include the URL to the external file in the src attribute of the <script> element. The external file must be a text-only file with the .js file extension that contains only pure JavaScript code without any HTML elements or CSS rules. For example, to call the external scripts.js file into our browser we would use the following code: <script src="script.js" type="text/javascript"> </script> We put JavaScript in an external file and include it in the web page when we like to share the functionalities across our entire web site. Otherwise, if we just need to add some local interactive behavior, we embed the code within the page. Note: Script files are loaded in the order in which they are placed in the HTML code Chapter 1 Fundamental JavaScript Concepts Generally, when we hear the term programming we immediately think of other people typing an incomprehensible string of letters and numbers. Programming looks like magic beyond the realm of mere mortals. Nevertheless, the concepts in programming are not difficult to grasp as they always have real life applications. JavaScript, although it is not as simple as HTML or CSS, is not an overly complicated language. Unlike other languages, its "grammar" is more or less descriptive and intuitive making it a good fit for a first programming language. Basically, learning JavaScript is like learning a new language, but a new language that is similar to English. Once we learn the new words, and understand how to put them together to form "sentences" we'll be good to go. Syntax Every language has its own set of characters and words that go along with a set of rules as to how to arrange these characters and words together into a well-formed sentence. These rules are also known as the language syntax and it is the syntax that holds the language together and gives it meaning. Before start with some examples of JavaScript syntax, let us first set up the environment for JavaScript. As discussed previously, JavaScript code is always a part of the HTML code. Therefore, in order to work with JavaScript we will first need to create a basic HTML document. So to start, let us open a text editor (like Notepad) and type in the HTML code for the most basic web page. In addition to the basic HTML tags, we will include a <script> element in the <head> section where we will start placing the JavaScript code. <!doctype html> <head> <title>First Steps in JavaScript</title> <script type="text/javascript"> </script> </head> <body> </body> </html> Let us save this document as firststeps.html. If we are using Notepad, we have to remember to change the Save as Type field to ‘All files’. Statements To express ourselves in everyday common language we use sentences as the basic form of communication. Similarly, in JavaScript we also form sentences to express our intentions which are more formally called statements. A JavaScript sentence is the basic unit of communication, usually representing a single step in the program. And just like we put sentences together to express an opinion, we combine statements together to create a program. Let us look at a simple JavaScript statement and see what it does. Between the opening and closing <script> tag of the html document places the following text: alert("JavaScript is starting to make a little sense."); In further examples we will not show the complete HTML code unless it is necessary, but for initial reference your document should look like the following: <!doctype html> <head> <title>First Steps in JavaScript</title> <script type="text/javascript"> alert("JavaScript is starting to make a little sense."); </script> </head> <body> </body> </html>