Download Introduction to JavaScript Programming Concepts and more Study Guides, Projects, Research Computer science in PDF only on Docsity!
HTML
CSS
Manages the content
Handles presentation and styling
Technology Description
JavaScript Adds interactivity
1.3 A Brief Introduction to JavaScript
1.3.1 What is JavaScript? Defining JavaScript
JavaScript is a high-level, object-oriented, multi-paradigm programming language.
Here's a breakdown of what this means:
High-Level Language : JavaScript is user-friendly, with many abstractions that keep us from worrying about complex operations like memory management. Object-Oriented : The language heavily relies on objects for data storage and operations. Multi-Paradigm : JavaScript's versatility allows for various programming styles, including imperative and declarative approaches.
1.3.2 JavaScript in Web Development
JavaScript, along with HTML and CSS, form the 3 core web technologies:
JavaScript is a Client-side scripting language , executed on the user's computer (Client). It
interacts with the user interface of a Web page, displaying effects, etc. The "client" browser
executes the script.
1.3.3 Dynamic Effects and Web Applications
JavaScript's capabilities extend to dynamic effects and the creation of web applications. For
example, in real-time data loading, displaying information, and interactive user interfaces.
1.3.4 Further Capabilities
JavaScript is integral to modern web development, forming the foundation of libraries and
frameworks like:
React Angular Vue
These tools streamline the creation of complex web applications, but a strong understanding of
JavaScript remains essential.
alert ("Hello, world!");
1.3.5 JavaScript Beyond the Browser
JavaScript isn't confined to the browser; it can run on servers using Node.js , creating backend
applications. Moreover, with tools like React Native , Ionic , and Electron , JavaScript can be
used for mobile and desktop applications.
1.3.6 JavaScript Releases and Versions
The language saw a significant update with ES2015 (commonly known as ES6 ), followed by
yearly updates. This course focuses on modern JavaScript, including ES6 and beyond, while
also providing insights into the crucial parts of ES5.
1.4 Hello World! D
1.4.1 Your First Line of JavaScript
Let's write our very first line of JavaScript code using the browser developer tools to get started
as quickly as possible.
- Open Google Chrome.
- Right-click on the page, select 'Inspect', then navigate to the 'Console' tab.
- Increase the font in the console with Command/Ctrl + Plus (+) sign.
- Write and test some JavaScript code directly in the console.
1.4.2 Experimenting in the Console
The JavaScript console is a powerful tool for development and testing. Although we don't build
applications in the console, it's great for quick experiments.
1.4.3 Playing with Variables and Conditions
Let's define a variable and use a conditional statement:
File Icon Theme
Customizing the file icon theme, such as setting it to 'Seti', can make your VS Code interface
resemble the instructor's closely, providing a uniform learning experience.
D Prettier Extension
Prettier : an opinionated code formatter that assumes how good code should look. Installing it
as a VS Code extension ensures that your code is neatly formatted.
To set Prettier as the default formatter in VS Code settings:
Search for 'Default Formatter' Select 'esbenp.prettier-vscode'
D Live Server Extension
In professional environments, developers don't rely on manual browser reloads; instead, they
use tools to automate the process. For convenience during this course, we will be using the Live
Server VS Code Extension.
To use the Live Server:
Use the Go Live button in the bottom right corner of the status bar
D Preparation
Ensure you have the latest version of Google Chrome installed, as it will be our primary browser
for testing and viewing our web development projects.
D Linking a JavaScript File
Getting Started
Before we start, ensure you have the following starter code ready:
Navigate to the provided URL: http://tinyurl.com/dh8hayp Click the 'Download' button and unzip the package on your computer Select and open the starter project folder in VS Code
Writing Your First Script (Embedding Code)
Inside your project folder, open index.html and add the
...
...
To execute this code, open index.html in the browser.
Running Mathematical Calculations
We can also do mathematical calculations in JavaScript:
However, nothing is outputted to the console. If we want to display results, for example from a
calculation in the console, we need to tell JavaScript to explicitly output that result to the
console:
Linking JavaScript to HTML (External File)
Let's take this JavaScript code out of the HTML file and put it into its own separate JavaScript
file.
Inside your project folder, create a script.js file. This is where you'll write your JavaScript
code. For starters, you can replicate the basic JavaScript code used in earlier examples.
...
let firstName = "Andre"; console. log (firstName);
We declare a variable using let, followed by the variable name and the value assignment, like
let firstName = "Andre";.
Think of variables as labeled boxes where we store our values for later use.
Utilizing Variables
Variables are incredibly useful as they let us reference stored values by their names.
Changing the variable's value updates it across the entire script wherever it's referenced.
Naming Convention Variables
When naming variables, it's essential to follow conventions and rules:
Use camelCase for variable names, starting the first word with a lowercase letter and capitalizing subsequent words. Variables cannot start with a number and should only contain letters, numbers, underscores, or the dollar sign. Avoid using reserved JavaScript keywords like new or function as variable names.
Variable names should be descriptive and clearly indicate what value they hold, making the
code easier to understand.
Variable Naming Don'ts
Don't start variable names with an uppercase letter unless it's for a specific use case in object-oriented programming. Avoid using all-uppercase names for variables unless they are constants, like PI = 3.1415;, which are known to never change. Variable names cannot be the following names (which are reserved names):
Number
String
Boolean
Undefined
Null
Symbol
JavaScript uses floating-point numbers for all numeric operations.
A sequence of characters used for text, enclosed in either single or double quotes.
A logical type that can only be either true or false, used for making decisions in code.
Assigned to a variable that has been declared but not given a value.
Similar to undefined, it also represents an "empty" value but is used differently in
practice.
Introduced in ES2015, symbols are unique and immutable identifiers, useful in more
complex coding scenarios.
Data
Type
Description
BigInt
As of ES2020, a JavaScript data type that allows representation of integers beyond
the 53-bit limit of the Number type.
this throw throws transient true try typeof var void volatile while with
D Data Types
Understanding JavaScript Data Types
In JavaScript, values are categorized into two main types: objects and primitive
values.
Dynamic Typing in JavaScript
JavaScript is dynamically typed, meaning the data type of a value is automatically determined
when the value is assigned to a variable, and it can change if the variable is later assigned a
new value of a different type.
Using the Typeof Operator
To understand the type of a value or a variable, you can use the typeof operator.
// let firstName = "Andre"; /* let isAdult = true; let children; */
JavaScript is a **dynamically typed** language, meaning the type of a vari > "Dynamic typing is a concept in programming languages where the data typ This is evident in the following code: ```javascript **true** ; console. **log** ( **typeof** javaScriptIsFun); // "boolean" javaScriptIsFun = "YES!!"; console. **log** ( **typeof** javaScriptIsFun); // "string" **let** testVar; console. **log** ( **typeof** testVar); // "undefined" ## Comments in Code ## Comments are crucial for explaining the purpose of code sections or temporarily deactivating ## code without deletion. Single-line comments start with //. Multi-line comments are enclosed in /* */. ## D Undefined Variables ## When a variable is declared but not assigned a value, it is of type undefined. ## "Undefined is a special value in JavaScript that indicates a variable has been ## declared but has not yet been assigned a value." ## For example: console. **log** ( **typeof true** ); // "boolean" console. **log** ( **typeof** 23 ); // "number" **let** firstName = "Andre"; **let** lastName = "Silva"; console. **log** (firstName + lastName); // Outputs "AndreSilva" console. **log** (firstName + " " + lastName); // Outputs "Andre Silva" **let** x = 10 + 5 ; // 15 x += 10 ; // x = x + 10 = 25 console. **log** (x); x *= 4 ; // x = x * 4 = 100 console. **log** (x); **Concatenating Strings** The plus operator (+) can be used to concatenate strings, joining them together. Example: **Assignment Operators** The simple assignment operator (=) assigns a value to a variable. Compound assignment operators like +=, - =, *=, and /= combine an operation with assignment. Example: **Increment and Decrement Operators** The increment (++) and decrement (--) operators are used to increase or decrease a value by 1. Example: **let** currentYear = 2024 ; **let** birthYearAndre = 1986 ; **let** ageAndre = currentYear - birthYearAndre; console. **log** (ageAndre); // Outputs Andre's age **let** isFullAge = ageAndre >= 18 ; console. **log** (isFullAge) (ageAndre + ageSarah) / 2 ## Comparison Operators Used to compare values and return Boolean results (true or false). Example: ## D Operator Precedence ## Operator precedence defines the order in which operations are carried out in an expression. ## Understanding Operator Precedence A set of rules that determine the order in which operations are processed. The MDN precedence table is a valuable resource for understanding the precedence and associativity of JavaScript operators. ## Grouping Operator The grouping operator (()) has the highest precedence and is used to override the default precedence order. Example: ## Key Takeaways x++; x--; console. **log** (x); **const** firstName = 'Andre'; **const** birthYear = 1986 ; **const** job = 'teacher'; **const** year = 2024 ; // Current year for calculation **const** myNew = `I'm ${firstName}, a ${year - birthYear} year old ${job}!`; console. **log** (myNew); **const** age = 19 ; // Person's age **if** (age >= 18 ) { console. **log** ('Sarah can start driving license'); } **else** { **const** yearsLeft = 18 - age; console. **log** (`Sarah is too young. Wait another ${yearsLeft} years :)`); } ## Operator ## Description ## Strict equality operator (checks both value and type) ## Example: Creating a Person's Description ## D Taking Decisions: if/else Statements ## Introduction to if/else Statements ## if/else statements are used to control the flow of a program based on certain conditions. ## Definition: An if/else statement checks a condition and executes a block of code if ## the condition is true. If the condition is false, it can execute a different block of ## code. ## Example: Checking Eligibility for a Driver's License ## D Equality Operators: == vs. === ## The Strict Equality Operator (===) ## The strict equality operator compares both the value and the type of two operands. ## Operator ## Description ## Loose equality operator (performs type coercion) **The Loose Equality Operator (==)** ## The loose equality operator performs type coercion if needed. **Best Practices** Use the strict equality operator (===) to avoid unexpected results due to type coercion. **Example with Prompt** console. **log** (A && B); // Outputs: false console. **log** (A || B); // Outputs: true console. **log** (!A && B); // Outputs: true console. **log** (A || !B); // Outputs: false A AND B: This checks if both A and B are true. Since A is false, the result is false, regardless of B's value. A OR B: This checks if at least one of A or B is true. Since B is true, the result is true. NOT A AND B: This combines the true result of NOT A with B's true value, leading to true. A OR NOT B: This would be false because A is false and NOT B (the inversion of true B) is also false. ## Key Takeaways Boolean logic is a fundamental aspect of programming, enabling the manipulation of true and false values to make complex decisions. The **AND** operator requires both conditions to be true for a true result. The **OR** operator needs only one true condition for a true result. The **NOT** operator simply inverts a Boolean value's truth state. Combining these operators allows for nuanced logical expressions and decision- making in code. ## The switch Statement D ## The switch statement is an alternative way of writing a complicated if/else statement, especially ## when we want to compare one value to multiple different options. ## Example **let** day = 'Monday'; **switch** (day) { **case** "Monday": console. **log** ("Start the week with a jog"); console. **log** ("Stretching session in the evening"); **break** ; **case** "Tuesday": console. **log** ("High-intensity interval training (HIIT)"); **break** ; **case** "Wednesday": // ... } **switch** (expression) { **case** value1: // code to be executed if expression equals value **break** ; **case** value2: // code to be executed if expression equals value **break** ; default: // code to be executed if expression does not equal any of the above v } ## Let's consider a scenario where we have a variable day and for each day, there is a different ## activity planned. ## Note: The break statement is used to exit the switch block. If the value of day matches a case, ## the code within that case will be executed until a break statement is encountered.## D Switch ## Statements ## A switch statement is a type of control flow statement that allows the program to execute ## different blocks of code based on the value of a variable or expression. **Syntax and Usage** ## The syntax for a switch statement is as follows: **Example**
