8. JavaScript Implementations, Syntax Basics, and Variable Types
by Ricardo Zea, Talha Khan, Joshua Johanan
Web Developer's Reference Guide
- Web Developer's Reference Guide
- Table of Contents
- Web Developer's Reference Guide
- Credits
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. HTML Elements
- DOCTYPE
- html
- Document metadata
- Semantic content sections
- Content sections
- Inline elements
- Embedded content
- Tables
- Forms
- Drawing elements
- 2. HTML Attributes
- Global attributes
- Miscellaneous
- accept
- accept-charset
- action
- alt
- async
- autocomplete
- autofocus
- autoplay
- autosave
- cite
- cols
- colspan
- datetime
- disabled
- download
- content
- controls
- for
- form
- formaction
- height
- href
- hreflang
- label
- list
- loop
- max
- maxlength
- media
- method
- min
- multiple
- name
- novalidate
- pattern
- placeholder
- poster
- readonly
- rel
- required
- reversed
- rows
- rowspan
- scope
- selected
- size
- src
- start
- step
- type
- value
- width
- wrap
- 3. CSS Concepts and Applications
- Basic selectors
- Combinators
- Pseudo-classes
- Validation
- Pseudo-elements
- Generated content
- 4. CSS Properties – Part 1
- Animation
- Background
- Box model
- Border radius
- Unit
- Flexible box (flexbox)
- Summary
- 5. CSS Properties – Part 2
- Fonts
- Transform
- Positioning
- Text
- Tables
- Words and paragraphs
- Paging
- 6. CSS Properties – Part 3
- Page box
- List
- Counter
- Drop shadows
- Display and visibility
- Masking and clipping
- Image rendering and orientation
- User interface
- 3-Dimensional
- Summary
- 7. CSS Functions
- Filter
- brightness()
- contrast()
- grayscale()
- invert()
- hue-rotate()
- blur()
- saturate()
- sepia()
- Transforms
- matrix()
- matrix3d()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- steps()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- Colors
- Gradients
- Values
- Miscellaneous
- At-rules
- Global CSS keyword values
- Summary
- Filter
- 8. JavaScript Implementations, Syntax Basics, and Variable Types
- History of JavaScript
- JavaScript implementations
- The language syntax
- The character set
- Data type
- Variable, scope, and memory
- 9. JavaScript Expressions, Operators, Statements, and Arrays
- Expressions
- Operators
- Overview
- Arithmetic operators
- Logical operators
- Assignment operators
- Exponentiation assignment (**=)
- Relational operators
- Statements
- Arrays
- Array types
- Array type object
- Creating arrays
- Reading and writing array elements
- Multidimensional arrays in JavaScript
- Properties in an array
- Array methods
- ECMA5 Array methods
- array.prototype.map()
- array.prototype.filter()
- array.prototype.reduce()
- array.prototype.forEach()
- array.prototype.indexOf()
- array.prototype.lastIndexOf()
- array.prototype.every()
- array.prototype.some()
- array.prototype.reduceRight()
- Returns
- Parameters
- Description
- 10. JavaScript Object-Oriented Programming
- Polymorphism
- Objects
- Creating objects
- Design patterns
- Property getter and setter
- Deleting properties
- Testing properties
- Enumerating properties
- Property attributes
- Serializing objects
- Objects methods
- Functions and methods
- Classes and modules
- Inheritance
- Built-in objects
- Global objects
- Date object
- Math object
- The RegExp object
- String object
- Array objects
- .Pop()
- .Push()
- .ToString()
- .ValueOf()
- .Join()
- .Splice()
- .sort()
- .reverse()
- .slice()
- .concat()
- Parameters
- Returns
- Description
- 11. Extending JavaScript and ECMAScript 6
- Compatibility and goals
- JavaScript subset and extensions
- Scoped variables and constants
- Shorthand functions
- Multiple catch clauses
- E4X – ECMAScript for XML
- ECMAScript 6 features
- Arrow functions
- Classes
- Enhanced object literals
- Template strings
- Destructuring assignment
- Extended parameter handling
- Bindings
- Iterators and the for...of operator
- Generators
- Better Unicode support
- Modules
- Module loaders
- Collections
- Proxies
- Symbols
- Subclassable built-ins
- Promises
- Core math library APIs
- Binary and octal literals
- Reflect API
- Reflect.get(target, prop, [receiver])
- Reflect.set(target, prop, value, [receiver])
- Reflect.has(target, prop)
- Reflect.apply(target, receiver, args)
- Reflect.construct(target, args)
- Reflect.getOwnPropertyDescriptor(target, prop)
- Reflect.defineProperty(target, prop, desc)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, newProto)
- Reflect.deleteProperty(target, prop)
- Reflect.enumerate(target)
- Reflect.preventExtensions(target)
- Reflect.isExtensible(target)
- Reflect.ownKeys(target)
- Tail calls
- 12. Server-side JavaScript – NodeJS
- File and process management
- Utilities
- Events
- Crypto
- Buffer
- Console
- npm (Node Package Manager)
- Stream
JavaScript (JS) is a programming language mostly used to produce dynamic and user-interactive webpages. A huge number of websites and all the latest Internet browsers (clients) use and support JavaScript. It is a part of the stack of technologies that every web developer must learn; these include HTML (the content), CSS (the presentation of content), and JS (behavior of the content when a user interacts with the webpage).
Previously, the use of JavaScript was just limited to input validations. For example, it can produce an error message if the user enters invalid information or tries to submit a form with missing information. Now, JS is acknowledged as a fully-fledged programming language that is capable of manipulating with complex calculations and deals with all aspects of a client window. JS enhances the webpage by making it more interactive. For instance, a page with scattered thumbnails can be converted into a pretty stylish image gallery, content of the website can be loaded without forcing the client to reload it over and over, different sorts of error handling can be done in a nice way, user polls can be created and their results can be viewed on a website, and playing with HTML elements on the go and much more is made possible by the power of JavaScript.
JavaScript is quick—real quick. It responds instantly to user actions, such as clicking, double-clicking, resizing, dragging, scrolling, and so on. JavaScript has a syntax that is similar to that of the Java language. The name JavaScript causes confusion for many people. Only the syntax of JS resembles the syntax of the Java language. Otherwise, it has nothing to do with the Java programming language at all.
The following are some of the key differences between Java (programming language) and JS (scripting language):
- JavaScript is embedded into HTML and runs in a browser, while Java requires a Java Virtual Machine (JVM) for its execution; however, Java applets can run in browsers.
- JavaScript is known as a client-side language as it runs in the browser on the client end, but now, Node.js is the gateway of JS to the server end. On the other hand, Java runs on the web server, for example, Apache Tomcat.
- JavaScript is usually interpreted by the client, while Java is compiled and then executed by a JVM.
- JavaScript was created by Netscape (now Mozilla) while Java was developed by Sun Microsystems (now Oracle).
Brendan Eich of Netscape (now Mozilla) developed JavaScript in 1995. Originally, it was named as Mocha, later its name was changed to Livescript, and finally it was renamed to JavaScript. After its launch, Microsoft introduced Jscript—their own version of JavaScript that was included in Internet Explorer. Netscape submitted JavaScript to European Computer Manufacturers Association(ECMA) for standardization and specification. The standardized version was named ECMAScript. ECMAScript is a trademarked scripting language specification standardized by ECMA International.
The ECMAScript V5 introduced a new mode called the strict mode; this brought forward better and thorough error checking to avoid constructs that cause errors. Many ambiguities from the third version were removed and real-world implementations were added.
The ECMAScriptV6 added plenty of new syntax for writing complex programs. It introduced classes and modules extending the semantics from V5. Iterators were also added in this version along with many Python-styled semantics, including proxies, arrow functions, generators and generator expressions, maps, sets, and so on.
After the standardization of JavaScript as ECMAScript, the next step was to have complete control over Document Object Model (DOM).
The HTML is parsed into DOM by the web browser's DOM API. DOM is the client understanding of the webpage. All the elements/nodes are converted into a tree-like structure known as
DOM Tree. The members of this tree can be manipulated on the fly using different methods such as getElementById() and getElementsByName(). The HTML source we see in developer tools, such as Inspect Element, Fire Bug, and so on are DOM View. These development tools also help a lot to modify our DOM instantly.
Later, Asynchronous JavaScript and XML (AJAX) was introduced to make asynchronous applications. The data was sent to and received from the web server without reloading or refreshing the whole DOM Tree (asynchronously).
As JavaScript advanced, different JS libraries were developed to ease DOM manipulation. Some of the popular libraries are jQuery, Prototype, and Mootools. The primary feature of these libraries is to handle DOM manipulations, animations, and AJAX. The most famous and widely used JS library is jQuery. Furthermore, a server-side version of JavaScript was developed and named Node.js.
In this book, you will learn about JavaScript, its history, and its evolution. You will learn about its implementations and syntax. Function references and complete examples for how to use it in different cases are also provided.
-
No Comment