Intro to JavaScript and Chrome Setup

Course Overview

• The complete JavaScript course aims to teach complex website development from beginner to professional levels.
• By the course's end, students will build amazon.com, an interactive e-commerce website.
• Smaller projects include a rock paper scissors game, a to-do list, and a calculator.
• No prior coding or technical experience is required.
• Covers the basics, major JavaScript features, and integration with HTML and CSS.
• Advanced topics include object-oriented programming, backend, callbacks, promises, and async/await.
• Over 250 exercises are included for practice.

Prerequisites and Setup

• Check the first comment for solutions to any issues encountered during the course.
• The course is conducted on Windows but the steps are the same on Mac.
• Installation of a web browser is required to view websites.
• Google Chrome is recommended for web development.
• To install Chrome, search for it on google.com and follow the instructions.

Introduction to JavaScript

• JavaScript is a technology used to create websites.
• Websites allow computer access to sites like YouTube and Amazon.
• Three technologies are used to create websites: HTML, CSS, and JavaScript.
• HTML creates website content.
• CSS changes the website's appearance.
• JavaScript makes websites interactive.
• Without JavaScript, buttons on HTML/CSS websites would not function.

Basic JavaScript Concepts

• Open Google Chrome and navigate to supersimple.dev/js-basics to start learning.
• Right-click on a blank area of the page, select "inspect," and click the "console" tab.
• The console allows direct instruction-giving to the computer.
• Type alert('hello'); to create a popup with the text "hello."
• Instructions given to the computer are called code.
• Pressing enter makes the computer follow instructions, which is called running the code.
• Different programming languages exist, like JavaScript, Python, and Java.

JavaScript Examples and Terminology

• The code 2 + 2 instructs the computer to perform math, resulting in 4.
• The code document.body.innerHTML = 'hello'; replaces the page content with "hello."
• Modifying the webpage is a key feature of JavaScript.
• Syntax refers to the rules of the programming language.
• Unlike English grammar, programming syntax must be followed strictly.
• The first part of the code alert tells a computer to create a popup.
• The text in quotes is the text inside the popup.

Recap and Support

• JavaScript involves giving instructions to a computer.
• Instructions are called code, and following them is running the code.
• Syntax is the rules to follow when writing code.
• Premium course versions offer certificates and improved learning platforms.
• Support the channel through likes, subscriptions, and sharing.

Introduction to Numbers and Math in JavaScript

• The lesson focuses on numbers and math in JavaScript, using an Amazon project example.
• The console is used to write JavaScript code for performing calculations.
• Basic math operations include addition, subtraction, multiplication, and division.
• The * character is the multiplication operator.
• The / character is the division operator.
• Math syntax is generally straightforward.

Practical Math Examples

• Calculate the sum of product costs before shipping and taxes.
• Add the cost of two socks ($10.90 each) and one basketball ($20.95) using 10.90 * 2 + 20.95.
• Calculate the cost of products plus shipping by adding the shipping cost ($4.99) to the total product cost.

Order of Operations

• Basic mathematical functions are called operations.
• The characters in the middle (such as + or *) are called operators
• Multiply and divide are performed before add and subtract.
• This order is called the order of operations.
• Multiply and divide have the same priority.
• Add and subtract also have the same priority.

Operator Precedence with Brackets

• Brackets can control the order of operations.
• Calculations inside brackets are performed first.
• The syntax requires matching open and close brackets.
• Brackets must contain a complete calculation.

Order of Operations Example

• Calculate the cost of products with one basketball and two T-shirts.
• Calculate the product costs by adding the basketball cost ($20.95) and two times the T-shirt cost ($7.99 each).
• Even if multiplication is written last, it calculates T-shirt cost first.

Calculating Percentages

• Percentage calculations are done manually.
• 1% is equal to 1 / 100.
• 10% is equal to 10 / 100, which equals 0.1.
• To calculate 10%, multiply by 0.1.

Correcting Calculation Order

• Use brackets to ensure correct calculation order where needed, particularly when including shipping in the cost.

Handling Floating-Point Numbers

• Whole numbers (2, 3, 4) are integers.
• Decimal numbers (2.2, 2.5) are floating-point numbers or floats.
• Computers have difficulty with floats due to how they store numbers.
• This inaccuracy happens with some floats but not all of them for example computers can store 0.25 with out any problems
• Calculating 0.1 + 0.2 may result in a number close to 0.3 but slightly inaccurate.
• Use cents instead of dollars to avoid inaccuracies when calculating money and round to the nearest integer.
• The text provides a lesson on JavaScript focusing on using the Math.round() function, strings, HTML, CSS, and JavaScript integration, and introduces variables.

Math.round() Function

• Math.round() is a JavaScript function used for rounding numbers.
• It is case-sensitive; Math.round() works, but math.round() does not.
• Math.round(2.2) rounds down to 2.
• Math.round(2.8) rounds up to 3.

Practical Example of Math.round()

• The lesson uses calculating tax as a practical example.
• Order of operations dictates that brackets inside brackets are calculated first.
• To round to a specific decimal place, you can round the value in cents and then convert back to dollars.
• The example calculates the tax for a basketball ($20.95) and a t-shirt ($7.99), then rounds the result.

Searching for Code Using Google

• The lesson advises using Google to find JavaScript code snippets.
• A useful search query is "JavaScript how to round a number".
• It's acceptable to not understand all the code in search results; focus on familiar parts.
• Artificial intelligence tools can also aid in code searching.

Links in Video Descriptions

• All links that are mentioned in each video can be found in the video description.

Strings in JavaScript

• A string represents text in JavaScript.
• Strings can be created using single quotes ('), double quotes ("), or backticks (`).
• Example: 'hello' is a string.
• Strings can be added together using the + operator, which is called concatenation.
• Numbers and strings are different types of values.
• Adding a string and a number results in type coercion, where JavaScript converts the number to a string.

Practical String Examples

• The lesson guides creating text strings such as item counts and prices with dollar signs using string concatenation and math.
• It demonstrates how to calculate the cost of items and display the correct amount with a dollar sign by combining strings and numbers.

String Syntax Rules

• Strings are enclosed in single quotes, double quotes, or backticks.
• Strings follow the same order of operations as numbers.
• Brackets determine the order in which operations are performed.

String Creation Methods

• Three ways to create strings: single quotes, double quotes, and backticks.
• Single quotes are generally recommended for simplicity.
• Double quotes are useful when the string contains a single quote.

Escape Characters

• Escape characters are special characters used in strings, denoted by a backslash (\).
• \' represents a single quote.
• \" represents a double quote.
• \n represents a new line.

Template Strings

• Template strings are created using backticks (`).
• Template strings support interpolation, allowing values to be inserted directly into the string using ${value}.
• Template strings support multi-line strings.
• Recommendation is to use single quotes by default unless interpolation or multi-line strings are needed.

HTML, CSS, and JavaScript Integration

• HTML creates the content of a website.
• CSS styles the appearance of a website.
• JavaScript makes the website interactive.
• VS Code (Visual Studio Code) is a popular code editor for web development.

HTML Basics

• HTML code is written inside a file with a .html extension.
• HTML elements are the building blocks of a webpage (e.g., button, paragraph).
• Elements are created with tags: an opening tag and a closing tag.
• HTML elements can be nested inside other elements.
• Multiple spaces and new lines in HTML are combined into a single space on the webpage.

CSS Basics

• CSS code can be written inside a <style> element in the HTML file.
• CSS is used to change the appearance of HTML elements.
• CSS selectors target specific elements to style.
• CSS styles consist of properties and values (e.g., background-color: red;).

HTML Attributes

• Attributes change the behavior of an HTML element.
• Attributes are added to the opening tag of an element (e.g., <button title="tool tip">).
• The class attribute is used to apply CSS styles to specific elements.

HTML Structure

• A basic HTML document structure includes <!DOCTYPE html>, <html>, <head>, and <body> elements.
• The <head> element contains meta-information about the page, such as the title and CSS styles.
• The <body> element contains the visible content of the page.
• The <title> element sets the text that appears in the browser tab.
• Live Server VS Code extension can automatically refresh the web page when changes are saved.

VS Code Setup

• Recommended VS Code settings include:
  • Tab size: 2 spaces
  • Line wrapping: on
• Indents make the code easier to read.

Adding JavaScript to HTML

• JavaScript code can be added to an HTML file using the <script> element.
• JavaScript code can also be run when an element is clicked using the onclick attribute.
• <script> elements are typically placed at the bottom of the <body>.

Comments in JavaScript, HTML and CSS

• Comments are pieces of code that the computer ignores.
• In JavaScript, single-line comments start with //, and multi-line comments are enclosed in /* */.
• In HTML, comments are enclosed in <!-- -->.
• In CSS, comments are enclosed in /* */.

Console.log()

• console.log() is a JavaScript function that displays values in the console.
• It is useful for testing and debugging JavaScript code.
• Redirects code results from the webpage to the console tab.

Variables: Definition and Creation

• Variables are containers used to store values like numbers or strings
• The let keyword is used to create a new variable
• Example: let variableOne = 3; creates a variable named variableOne and saves the value 3 inside it

Using Variables

• console.log(variableOne) displays the value stored in variableOne

Variable Operations

• Variables can be used in calculations.
• Example: let calculation = 2 + 2; calculates 2 + 2 and saves the result (4) into the variable calculation.
• Variables can be included in other calculations: console.log(calculation + 2);
• The value of a variable can be assigned to another variable: let result = calculation + 2;

Data Types in Variables

• Variables are able to store other data types, such as strings.
• Example: let message = "hello"; saves the string "hello" inside the variable message.

Syntax Rules for Variables

• Variable names cannot be special Javascript keywords like let.
• Variable names must not begin with a number.
• Variable names cannot contain most special characters or spaces - except $ and _.
• Semicolons (;) indicate the end of an instruction in JavaScript.

Semicolon Insertion

• JavaScript has a feature called semicolon insertion which automatically inserts missing semicolons at the end of a line.
• Relying on semicolon insertion can be problematic, so it's best practice to manually include semicolons.

Reassigning Variables

• The value stored in a variable can be changed.
• To reassign a value, simply use the variable name followed by the assignment operator (=) and the new value.
• The let keyword is not used when reassigning a value to an existing variable.
• Example:
  • variableOne = 5; changes the value stored in variableOne to 5.
  • variableOne = variableOne + 1; increases the value of variableOne by 1

Project: Cart Quantity

• Create an HTML file named 05-cart-quantity.HTML.
• Copy code from variables.HTML into the new file and adjust the title.
• Remove existing JavaScript code, but leave the <script> element.
• Create button elements: "show quantity", "add to cart", "+2", "+3", and "reset cart".
• Create a JavaScript variable cartQuantity, initialized to 0.

HTML OnClick Attribute

• Use the "onclick" attribute to add Javascript code to the "show quantity" button element
• The "onclick" attribute runs Javascript when the linked HTML element is clicked
• Use 'console.log()' to print the quantity of products in the cart

Interactive Projects with JavaScript

• Interactive projects can be created using JavaScript
• The goal is to display a message in the console when a button is clicked

Displaying Messages in the Console

• Use console.log() to display messages in the console
• To display a string, type the string inside the parentheses
• Example: console.log('cart quantity: 0')
• To make a button display a message when clicked, use the onclick attribute
• Example: <button onclick="console.log('cart quantity: 0')">Show Quantity</button>

Template Strings

• Template strings are used to insert values into strings
• Template strings are created using backticks instead of single quotes
• Values are inserted into template strings using ${}
• Example: console.log(\cart quantity: ${cartQuantity}`)`

Variables and String Interpolation

• Variables can be used with string interpolation
• The value of the variable is substituted into the string
• Example: console.log(\cart quantity: ${cartQuantity}`)`
• If cartQuantity is 5, the message will be cart quantity: 5

Making Buttons Interactive

• Buttons can be made interactive by adding the onclick attribute
• The onclick attribute specifies the JavaScript code to run when the button is clicked
• To increase a variable by one, use cartQuantity = cartQuantity + 1
• To display the updated quantity in the console, use console.log(\cart quantity: ${cartQuantity}`)`

Cart Quantity Feature

• A variable is needed to save the quantity
• When a button is clicked, the quantity is updated
• The updated quantity is displayed in the console

Shortcuts for Reassigning Variables

• cartQuantity = cartQuantity + 2 can be written as cartQuantity += 2
• cartQuantity += 1 can be written as cartQuantity++
• Other operators like -=, *=, and /= can also be used

Naming Conventions

• Camel case is the standard naming convention for JavaScript
• In camel case, the first word is lowercase and every subsequent word is capitalized
• Example: cartQuantity
• Pascal case capitalizes the first word
• Example: CartQuantity
• Kebab case uses lowercase words separated by dashes
• Example: cart-quantity (used in HTML and CSS)
• Snake case uses lowercase words separated by underscores
• Example: cart_quantity

Creating Variables

• Three ways to create variables: let, const, and var
• let creates a variable that can be changed later
• const creates a variable that cannot be changed later
• var is the original way to create variables in JavaScript, but it has some issues
• It's a best practice to use const by default and only use let when the variable needs to be changed

Typeof Operator

• typeof tells the type of a value
• Example: typeof 3 returns "number"
• typeof "hello" returns "string"
• typeof can also be used with variables
• Example: typeof message returns the type of the value inside the message variable

Booleans

• Booleans are a type of value in JavaScript
• There are only two Boolean values: true and false
• A Boolean value represents whether something is true or false
• Booleans should not be surrounded with quotes
• Example: true is a Boolean, but "true" is a string

Comparison Operators

• Comparison operators are used to compare two values
• Example operators: <, >, <=, >=, ===, !==
• Triple equals (===) checks if two values are equal to each other without type conversion
• Double equals (==) tries to convert both values into the same type before comparing
• It is best practice to always use triple equals (===) to avoid type conversion
• Comparison operators have a lower priority than math operators

If Statements

• An if statement lets you write multiple groups of code and then decide which code to run
• Structure: if (boolean value) { code to run if true }
• If the Boolean value is true, the code inside the curly brackets will run, otherwise it won't

Else Statements

• An else statement can be added to an if statement
• Structure: if (boolean value) { code to run if true } else { code to run if false }
• If the Boolean value is true, the first block of code will run, otherwise the second block of code will run