Explore

Web Development: Applications

Unit 3: Javascript

Last edited 369 days ago by Makiel [Muh-Keel].

JavaScript is the most important scripting language for web development.

It provides an user a way to exchange information with the web page; Js allows the internet to become an interactive place rather than a passive one.

⁠

JavaScript is used to provide a meaningful way to receive and process information from an end user.

JavaScript is a scripting language used to provide processing power to hypertext.

Javascript is interpreted, not compiled.

Case Sensitive - JavaScript is case-sensitive, so changing even one character from lower case to capital will change the way Js sees your code.

Js runs within the end user’s web browser and device, therefore it is referred to as a end user-side language.

Event-Driven Language - A programming language that primarily responds to the actions of the end user

Js is a considered an event-driven language since the browser “listens” for events, like actions by the end user. It then responds by the execution of JS commands and functions.

Error Isolation and Updating Errors - JS is more limited in scope which makes it easier to isolate and fix errors.

End User-Side Language - a programming language only interpreted by the end-user’s machine.

Increased speed because the program does not have to go back and forth from the client machine to the server machine, avoiding communication delays between the two.

Server-Side Language - a programming language that only handles backend processes such as database queries and data processing.

Analogy:

Client-Side: Like changing channels on a TV remote; immediate, visible changes.

Server-Side: Like ordering a meal; the kitchen (server) processes your order and delivers the meal (webpage) to your table (browser).

Js Consequences

Js is very strict with the expected syntax and notation. When a Js code has logic or sytnax errors, the function containing the errors is ignored.

Js code needs to be designed to account for all the number of possible functions and HTML events.

Since Js code is integrated into the web environment, Js devs need to keep in mind that their Js code will be executed by a Js interpreter.

Js Developers need to imagine all possible end user behaviors in order to provide an appropriate response.

<script>

The <script> tag is used to embed or reference JavaScript code in an HTML document, allowing it to be executed by the browser.

Program Structure

A JavaScript (JS) program is a sequence of commands that are executed by the JS interpreter. A command, also referred to as a statement, is a basic task to be executed. For example:

executing a mathematical operation and storing result to a variable: a = 4 + 5

testing a value to decide if a command will be executed: if (a > 10) { a = a - 10; }

assigning a character string to a variable: uName = "George Washington"

A Js program is a sequence of commands with the correct syntax that’s sequentially executed. It can also be seen as an input parameter that can execute a block of commands.

Semicolons aren’t always mandatory! Really only mandatory when using For-Loops and objects. But it’s still wise to use them at the end of all statements.

⁠

The building blocks of Js are:

Reserved Words

if - defines the condition in an if-else command

for - defines the beginning of a basic loop command

function - defines the beginning of a block of commands that execute upon request

var - defines a variable that stores a value, could be a integer, character.

const - defines a literal constant variable that never changes

Identifiers

Identifiers are names used to identify variables. They can start with underscore, dollar sign, or letter.

3example = identifier for a third example

$demo4 = identifier for a fourth demo

_nickname = identifier for a nickname

Reserved Symbols/Symbol Sequences

{" and "}" = mark the beginning and the end of command blocks

";" = denotes the end of a command

"//" = denotes that the remainder of a line is a comment, i.e., to be ignored by the JS interpreter

"/*" and "*/" = mark the beginning and the end of a comment block (that is also ignored by the JS interpreter)

Reserved Words

There are a number of words within Js that may not be used as identifiers. These words are reserved by the language, as they have built-in functionality:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.

Indentation

Indentation is recommend to provide visibility and maintain the code.

Camel Case

Camel Case is a syntax format that makes a two word variable more easily readable.

Ex. firstName

Variables

Variables are containers for storing Js data that begin with the word ‘var’. Normally, numbers, strings, and Booleans are used as the initial value.

Ex. var box =’123’.

Number Variables

Number Variables can hold any numeric value, either integers or real numbers.

var acc =0;

var temp = 78;

var date = 19;

String Variables

String Variables are containers for text data that’s enclosed in double quotations.

var second =”John Adams”;

var buffer = “buffering”;

var score = “97.30”;

Boolean Variables

Boolean Variables are the simplest data type that can only have 1 of 2 values: true and false.

var isItOver = true;

var visited = false;

Composite Types

In Js, Composite Types are data types that can hold collections of values and more complex structures.

Js has the following composite types:

Objects - Used to store collections of data and more complex entities.

var myObject = { language:"JS", authors:3, concluded:true };

let person = { name: 'Alice', age: 30, greet: function() { console.log('Hello'); } };

Arrays - allow the storage of multiple values in a single variable in a sequential collection of n elements of the same type and indexed from 0 (for the first) to n-1 (for the last)

var myArray = [ 2, 3, 5, 7 ];

Js Expressions

An Expression is a specific combination of variables, literals, and operators to assign a value to a variable, perform some form of output, or computation.

In lamest terms, it’s Js code that’s carefully crafted to produce a value.

Operators

These Operators are used to perform various mathematical and logical operations in JavaScript.

Operators in JavaScript are symbols that perform operations on variables and values. They include:

Addition (+): Adds two numbers.

let a = 6 + 5; // a = 11

Subtraction (-): Subtracts one number from another.

let a = 6 - 5; // a = 1

Multiplication (*): Multiplies two numbers.

let a = 6 * 5; // a = 30

Division (/): Divides one number by another.

let a = 6 / 5; // a = 1.2

Modulo (%): Returns the remainder of a division.

let a = 6 % 5; // a = 1

Parentheses ( ): Alters the precedence of operations.

let a = (6 + 5) / 5; // a = 2.2

Increment (++): Increases a number by one.

let a = 5; a++; // a = 6

Decrement (--): Decreases a number by one.

let a = 5; a--; // a = 4

String Operator:

Concatenation (+):

Combines strings.

Example: let s = "The" + " Beatles"; // s = "The Beatles"

Adding a number and a string will just combine them into a string.

Ex. let z =”hello” + 5 will out output hello5.

Comparison Operators:

Equal to (==):

Checks if values are equal.

Example: b = 18 == 20; // false

Not Equal to (!=):

Checks if values are not equal.

Example: b = 18 != 20; // true

Greater than (>):

Checks if one value is greater.

Example: b = 18 > 20; // false

Less than (<):

Checks if one value is less.

Example: b = 18 < 20; // true

Greater than or Equal to (>=):

Checks if one value is greater or equal.

Example: b = 18 >= 20; // false

Less than or Equal to (<=):

Checks if one value is less or equal.

Example: b = 18 <= 20; // true

Logical Operators:

AND (&&):

Returns true if both operands are true.

Example: b = true && false; // false

OR (||):

Returns true if at least one operand is true.

Example: b = true || false; // true

NOT (!)

Inverts the Boolean value.

Example: b = !true; // false

Event Handlers

Event Handlers allow you to execute JavaScript code in response to events ( user actions ). They are also known as Js functions.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

Event handlers can be used to handle and verify user input, user actions, and browser actions

HTML Events

An HTML Event can be something the browser does or something a user does:

An HTML web page has finished loading

An HTML input field was changed

An HTML button was clicked

JavaScript lets you execute code when events are detected.

Some common JavaScript event handlers are:

onclick: an event click that happens when the end user clicks on an HTML element of the web page;

onmouseover: an event mouseover that happens when the end user places the mouse over an HTML element of the web page;

onmouseout: an event mouseout that happens when the end user places the mouse out of an HTML element of the web page;

onkeydown: an event keydown that happens when the end user pushes a keyboard key;

onchange: an event change that happens when an HTML element content is changed (this usually happens due to HTML/CSS/JS processing by the browser);

onload: an event load that happens when an HTML element is fully loaded (usually all elements of a web page);

onunload: an event unload that happens when an HTML element stops to being load, which in the case of all elements of a web page may occur when the user closes the browser window)

onabort: an event abort that happens when some action is aborted by the user, as for example, interrupting the processing of an image element;

ondrag: an event drag that happens when the user drags an element;

ondrop: an event drop that happens when the user drops a dragged element.

onfocus: an event that happens when an element gains focus.

onblur: an event that happens when an element loses focus, as for example, when a user leaves a form field

onselect: an event that happens when text has been selected or highlighted in an element

Ex.

<!DOCTYPE html>

<html>

<body>

<h1>Saying Hi... Popping Up</h1>

<p>Click to say hello...</p>

<button type="button" onclick="alert('Hello, World!')">click here</button>

</body>

</html>

The code above includes HTML and Jc code embedded to create a popup after a user clicks a button. The Js event initiates a popup window.

Almost all events follow this syntax: HTML tags include an attribute with the event handler, and the value of this attribute is a JavaScript command.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

button { font-size: 32px; }

div {

font-size: 26px;

width: 260px;

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.