Book: Learn JavaScript Quickly

⭐️⭐️⭐️ A Complete Beginner’s Guide to Learning JavaScript

11 Aug 2022

Since 2016, almost all browsers implement ES6, also known as ES-2015. This is the version we will use for all discussions and examples, until stated otherwise in a later chapter of this book.
page 13
European Computer Manufacturers Association (ECMA) for consideration as a standard. This effort led to the publication of the standard ECMA-262, known as ECMAScript, in 1997.
page 13
One important new use is for server-side programming. In this case, JavaScript programs that remain on the web server can perform complex functions on behalf of clients, even those that disable JavaScript for security reasons. This is enabled primarily by a package named Node.js, which creates its own virtual server inside the actual web server.
page 13
First, a program is composed of statements.
page 16
Statements direct the computer to do something.
page 16
JavaScript does not specifically require a semicolon at the end of each statement. If the semicolon is omitted, the end of the line will signal the end of the statement in most cases. However, using semicolons is good practice and most languages require it. Semicolons make your code more readable
page 16
Long statements in JavaScript can be split between lines (at suitable places). Short statements can be grouped on the same line, as long as they are separated by semicolons:
page 16
A statement block (also called a code block) is a sequence of one or more statements enclosed in curly braces.
page 17
Each literal has a specific data type. JavaScript supports three primitive data types: numbers, strings, and booleans.
page 17
most JavaScript programmers follow the convention that identifiers composed of multiple words should be written in camel case.
page 19
Another important element of a JavaScript program is identifiers. These provide names for things like variables and functions, which we will see soon. Like any language, JavaScript has some simple rules for the form of identifiers: Identifiers may consist only of letters, digits, and the special characters '$' (dollar sign) and '_' (underscore). Identifiers may not begin with a digit.
page 18
The arguments are a set of values to be assigned to the various parameters that have been defined for this particular function.
page 19
conditional assignment operator (?). This is a ternary operator; it uses three different values to compute a result: mealPrice = (age < 8) ? 1.00 : 5.00;
page 39
The Document Object Model To achieve more flexible input and output of text in the context of a web page, we can make use of the HTML Document Object Model (DOM). This model represents any web page in such a way that individual elements on the page can be referred to, examined and modified, by program statements in a language such as JavaScript.
page 48
JavaScript provides a feature called hoisting. Because of this, all variable declarations within a scope are moved to the beginning,
page 65
There is often a need to add a new element after the existing elements in an array. For this purpose JavaScript provides the push() method, which can be used with any array: composers.push('Gershwin'); will add the name Gershwin to the end of the composers array. push() is a function, and like most functions, it returns a value. The value is the length of the array after the new element was added.
page 76
To remove the last element, there is a corresponding pop() method. This method deletes the last element. The value returned is the element that was deleted.
page 76
the following statement adds two new elements: composers.push('Gershwin', 'Debussy');
page 76
Sometimes there is also a need to add or remove elements at the beginning of the array. This requires that we shift all the existing elements up, to make room for new elements, or down, to fill in the space vacated by elements that are removed. This need can be met with the methods shift() (to remove an element) and unshift() (to add elements). Starting with the original composers array: composers.unshift('Bernstein', 'Beethoven'); will change the array to: ['Bernstein', 'Beethoven', 'Mozart', 'Vivaldi', 'Bach', ​ 'Tchaikovsky', 'Dvorak'].
page 76
First is the for ... of loop, which iterates over all the elements of a collection: for (var value of myArray) { document.write(value + ""); }
page 78
The second option is the forEach method. This statement calls a specified function once for every element in the array. forEach is actually a method of the array object, so the syntax is a little different: myArray.forEach(myFunc); myFunc(value) { document.write(value + "");
page 78
the forEach method may be used to iterate over their elements. Maps guarantee that iteration will take place in the order in which items were originally stored.
page 82
Sets are essentially arrays that are guaranteed to contain only unique values. They can also be iterated using forEach, but the order is unspecified.
page 82
we can eliminate the onclick attribute for the Run button, and instead place the following line in the JavaScript file: document.getElementById("run_button").addEventListener ​("click", () => factTable(inform));
page 86
JavaScript provides two functions to generate a time delay.
page 86
setTimeout(function, interval) takes as parameters a function name and a time interval in milliseconds. When the specified time is up, the function will be called.
page 86
setInterval(function, interval) works exactly the same way, but the function repeats after each interval.
page 86
This includes a try ... catch ... finally statement plus the ability to throw exceptions.
page 86
Using try ... catch, we can tell JavaScript to display a message before it gives up. This message could help us diagnose the problem. function findSquare(formId) { ​// try this, but watch for errors ​try { ​// Get the input value (with misspelling) ​​var inputNum = formid.textin.value; ​​// If valid, compute its square ​var result; ​​if (inputNum >= 1 && inputNum <= 10) { ​​result = inputNum*inputNum; ​// Otherwise, store an error message ​} else { ​​result = "Invalid number!"; ​​} ​// If an error was detected, display a message ​} catch(err) { ​result = err.message; ​} ​// Display the result (we're still alive!) ​ ​document.getElementById("textout").innerHTML = ​ result; ​}
page 87
when JavaScript detects an error, it creates an error object with all the information it can provide to help you understand the problem.
page 88
have to request this object. You do this by setting it as a parameter in the catch clause. The error object has two properties: message and name
page 89
The typeof Operator typeof is a unary operator (not a function) that takes a value of any type as an argument and returns a string identifying the type of that value. For example: typeof "Hello" -- returns "string" typeof 2.718 -- returns "number"
page 93
The typeof operator returns "object" for most "special" objects, including arrays, maps, and the Date object. typeof cannot be used to distinguish these objects.
page 94
Methods for Searching Strings
page 94
var lightStr = "When the light is green, go!"; pos = lightStr.search("green"); This method returns the position of the first character in the substring (starting from zero).
page 94
If there is more than one instance of the substring, search() finds only the first.
page 95
var lightStr = "When the light is green, go!"; var newStr = lightStr.replace("green", "red");
page 95
pos = valleyStr.search(/green/i);
page 96
The flag "g" indicates global matching or replacement. All instances of the pattern will be matched. If we write: var homeStr = "The green, green grass of home"; ​var newStr = homeStr.replace(/green/g, "red"); ​The result will be "The red, red grass of home".
page 97
As a companion to search(), JavaScript also provides the method match(). This method returns an array containing all the strings actually matched. If we have the string: var phoneStr = "My phone number is (304) 555-1212 ​and my brother's phone number is +1 (222) 999-3456" Then the value of the expression: phoneStr.match(/\b(+1 )?\(\d{3}\) \d{3}-\d{4}\b/g) will be ["(304) 555-1212", "+1 (222) 999-3456"]
page 98
The Document Object Model A web page, as we know, is defined by an HTML document. The complete content of a document is an HTML element surrounded by the tags .... Most elements have their own start tag and end tag, and all HTML elements are nested inside other elements, forming a tree. This tree is called the DOM tree.
page 110
AJAX also helps enable JavaScript to update a portion of the page, such as a table, without the need to recreate the entire page. Only the changed portions need to be redisplayed.
page 124
jQuery The last technology to be discussed in this chapter is jQuery. jQuery (not an acronym) is a package of JavaScript code that can simplify a lot of common tasks. Among the tasks that jQuery can help with are: Access the DOM tree elements using CSS-style selectors Update the DOM tree in simpler and more powerful ways Attach event listeners to DOM elements Some of these tasks can be done in other ways. However, besides simplifying the syntax, jQuery helps ensure that these operations will work in essentially any browser. For example, with the jQuery methods loaded, the statement: $('p.class1').addClass('goodclass'); adds the value 'goodclass' to the class attribute of every

element having the class 'class1'. The dollar sign ($) is a shorthand for the main function, jQuery(). There is no need for a loop to process each element individually. For full information on jQuery, and access to the latest version, see jquery.org.

page 125
For this reason, the JavaScript within the web page may need to operate in partnership with programs running on the server. These programs may be written using traditional general-purpose languages such as Java, C++, or Python. However, they are often written in languages designed especially for server programming, including PHP, ASP, Perl, or Ruby.
page 126
Node.js gives a developer access to the full JavaScript language – current versions support ES6 or higher – but some things are a little different. In particular, there is no DOM or BOM. This makes sense; you are not working with a document or inside a browser window. The objects document and window do not exist. What Node.js adds, though, may more than make up for this. This includes a standard collection of library modules, including modules that provide: File operations Event handling Server creation (HTTP or HTTPS) Timer methods For more information on Node.js see https://nodejs.org.
page 129

links

social