JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and Javascript

Cover Page
Title Page
Copyright Page
Dedication
About the Authors
About the Reviewers
Acknowledgement
Preface
Errata
Table of Contents
1. History of JavaScript and How it Revolutionized Web Development
	Structure
	Objective
	A brief history of the World Wide Web
	Web transition over the years
		Web 1.0
		Web 2.0
		Web 3.0
	Advent of JavaScript
	ECMAScript – Standardization of JavaScript
	Role of JavaScript in Modern Web development
		Front-end JS frameworks
		Back-end JS frameworks
		Data layer frameworks
		JS automation testing frameworks and test runner environments
	Conclusion
	Questions
2. HTML - Creating the Web Content
	Structure
	Objective
	Getting started with HTML
	Building blocks of HTML
	Structure of an HTML document
	HTML elements
		Basic HTML tags to define content
		Special content-related tags
			HTML hyperlink
		HTML list
		HTML table
			HTML form
			Input form element
			Other form elements
	Special meaning-related HTML5 tags
		HTML comment tags
		HTML images
	HTML character entity references
	Conclusion
	Questions
3. CSS - Making the Content Beautiful
	Structure
	Objective
	Power of CSS
	Basics of CSS
	CSS syntax
		How to include CSS in HTML?
			Inline style
			Internal style sheet
			External style sheets
		Cascading styles
		Working of CSS
			Properties
			Values
			Selectors
		Combinators
			Contextual selectors/Descendant combinators
			Child combinators/selector
			Adjacent sibling selector
			General sibling selector
			Styling using Pseudo class
			Styling with Pseudo-elements
			CSS inheritance
	CSS precedence and specificity
		CSS precedence rules
			Use of !important after CSS properties
			Specificity of CSS rule selectors
	Sequence of declaration
		CSS units
			Absolute lengths
			Viewport lengths
			Font-relative lengths
			Percentage
	CSS styling – Font, text, background properties
		Styling font
		Styling text
		Styling background
	CSS – The box model
		Box-model
		Setting width and height
			Box sizing
			Vertical margin collapse
		CSS display property
			Inline box
			Block box
			Inline-block
			CSS overflow
	Positioning elements
		Fixed
		Absolute
		Relative
		Sticky
		Stacking context
		CSS Flexbox
		Flex container properties
		Flex-item properties
	Responsive design
		Viewport
		Media queries
	Conclusion
	Questions
4. JavaScript Programming: Making the Application Interactive
	Structure
	Objective
	Introduction to JavaScript (JS)
	Building blocks of JS
		Variables
			Scopes
			Global scope
			Local scope
		Data Types
			Working with Data Types
			Operators
			Types of operators:
		Comments
		Statements
		Functions
			What is a function?
		More about functions
			Function as expression
			Function declaration versus function expression
			Different aspects of functions
	Arrays
	Working with DOM
		Traversing the DOM
		Nodes related methods
		Element related methods
		Accessing elements
		Getting and updating element content
		Adding and removing HTML content
		Attribute related
	Conclusion
	Questions
5. Functional Programming with JavaScript
	Structure
	Objective
	Functional programming
		Imperative style
		Declarative style/functional
		Features of functional programming
	Using functional programming
	Major concepts of functional programming
		Pure functions
			Benefits of pure functions
		Higher-order functions
			Immutability
			Recursion
		Referential transparency
		First-class functions
			Stored in a variable
			Passed as an argument to any other function
			Returned by any other function
	Limitations of a functional programming language
	Conclusion
	Questions
6. Object-Oriented JavaScript
	Structure
	Objective
	Introduction to OOP
	Class
		The constructor of a class
		Static member in a class
	Object
	Class expression
	Encapsulation
	Inheritance
		Use of super inside the constructor
	Method override
		Calling the parent function
	Inheriting from built-in objects
	Abstraction
	Conclusion
	Questions
7. Asynchronous JS
	Structure
	Objective
	Asynchronicity in JavaScript
		JavaScript runtime
	Callbacks
	Promises
	Async Await
		Async
		Await
			Scenario 1 – Synchronous behavior within asynchronous
			Scenario 2 – Parallel execution within asynchronous
			Scenario 3 – Async with classes
			Scenario 4 – Error handling for async-await
			Scenario 5 – Working with arrays asynchronously
	Conclusion
	Questions
8. What’s New in ES2019 JavaScript
	Structure
	Objective
	ECMA Script Standardization
	Essential ES6 changes
		Handling variables from var to const/let
		The power of arrow functions
	Handling strings
		Template literals
		Handling parameters
	From arguments to rest parameters
		Symbols
		Spread operator
		Destructuring
		Classes
	ES2019 JavaScript – Major new features
		Array.prototype.{flat,flatMap}
			Array.flat()
			Array.flatMap()
		Object.fromEntries
	ES2019 JavaScript – Minor new features
		String.prototype.{trimStart,trimEnd}
			String.trimStart()
			String.trimEnd()
		Symbol.prototype.description
		Optional catch binding
		New Function.toString()
		JSON ⊂ ECMAScript (JSON Superset)
		Well-formed JSON.stringify()
		Stable Array.prototype.sort()
	Conclusion
	Questions
9. Building An Application with JavaScript
	Structure
	Objective
	Planning the application
	Solution approach
	Building the application step-by-step
		Step 1 – Adding content to the launch page
		Step 2 – Styling the launch page
		Step 3 – Logic for the launch page
		Step 4 – Adding responsiveness to the launch page
		Step 5 – Content and styling for the application page
		Step 6 – Content and styling for notes list in the application page
		Step 7 – Logic for the application page
	Conclusion
	Questions
10. Debugging JavaScript Applications
	Structure
	Objective
	The browser devtools
	How to launch the browser devtools?
	Parts of the Chrome devtools
		Elements and styles
		Console
		Sources
		Network
		Application
		Performance
		Memory
		Security
		Audit
	The debugging process
		Using console.log statements
		Using the JavaScript Debugger
		How to add breakpoints?
	Conclusion
	Questions
11. Unit Testing Automation
	Structure
	Objective
	Unit testing
	Introduction to Jasmine
		Jasmine setup and configuration
	Jasmine basic constructs
		describe
		it
		beforeEach and afterEach
		expect
		Matchers
	Asynchronous testing
	Conclusion
	Questions
12. Build and Deploy an Application
	Structure
	Objective
	Why deployment?
	Getting ready for deployment
		For HTML/CSS/JS applications
	Detailed steps for hosting
		Step 1 – Login to the Heroku CLI
		Step 2 – Initialize and commit the application code to Git
		Step 3 – Create a named app in Heroku CLI
		Step 4 – Push your code into the remote git repository
		Step 5 – Deployment of any changes made to the application
		Alternate method
	Conclusion
	Questions
13. JavaScript Best Practices
	Structure
	Objective
	JavaScript best practices
		Readability
			Naming conventions
			Indentation and spacing
			Guidelines for objects
		Add sufficient comments as needed
		Avoid global variables
		Follow strict coding style
		Write modular code – Single responsibility principle
		Always declare variables
		Always initialize variables
		Avoid heavy nesting
		Optimize loop logic
		Use === Comparison
			Differentiate between assignment and comparison
			Differentiate between null and undefined
		Always use semicolon
		Use default in switch statement
			Differentiate between addition and concatenation
			Trailing comma in JSON and object definitions
	HTML and CSS best practices
		Maintain a clean and readable code structure
		Include JS Script at the end
		Avoid inline styling
		CSS to be used consciously
		Include imports wisely
		Use lists for navigation items
		Avoid unnecessary divs
		Avoid tag qualify
		Use color hex codes
		Consider cross-browser compatibility
		Validate your code
		Reduce CSS code size
		Recommendations on best practices
	Conclusion
	Questions
14. Introduction to React
	Structure
	Objective
	Single Page Applications(SPA)
	Getting started with React
		src
		React and React-DOM
	Introduction to JSX
		Adding event handlers
	Elements, components and props
		Elements
		Components
			Functional components
			Class components
			Stateful components and stateless components
		Props
			PropTypes
			Passing method references between components using Props
	State, lifecycle and virtual DOM
		State
			Manipulating state
			Asynchronous setState function
		Lifecycle methods
			Mounting
			Updating
			Unmounting
			Virtual DOM
		Styling components
			Styling using external CSS
			Inline styling
	Rendering lists and conditionals
		Lists
		Conditional rendering
	Forms
		Uncontrolled forms
		Controlled forms
	Composition
	Hooks
		The useState hook
		The useEffect hook
			How can hooks be reused?
	Conclusion
	Questions
15. Building an Application with React
	Structure
	Objective
	Thinking in React to Approach the UI Development
	Requirements and Application Design
	Prerequisites and getting started
	Building the React application
		Step 1
		Step 2
		Step 3
		Step 4
		Step 5
		Step 6
		Step 7
		Step 8
	Conclusion
	Questions
16. State Management in React Applications
	Structure
	Objective
	State management
	The architecture of Redux
		Why is middleware needed?
	Incorporating Redux in React
		Set up and provide the Redux store to the React application
		React components connect to the Redux store
	Conclusion
	Questions
17. Debugging, Testing, and Deploying React
	Structure
	Objective
	Debugging React applications
		Reactdeveloper tools
		Redux devtools
	Testing React applications
		Test file organization
		Defining the tests
		Snapshot testing
		Shallow and mount
	Deploying React applications
	Conclusion
	Questions
18. What Next - For Becoming A Pro?
	Structure
	Objective
	Modern web development with JavaScript frameworks
	Building mobile apps
	Templating engines
	Visualization
	Functional programming
	Routing
	Logging
	Internationalization
	Documentation
	Testing frameworks
	QA tools
	Package manager
	Code coverage
	Runner
	Services
	Database
	Conclusion
	Questions