summary web programming JavaScript chapters ( 4.1, 4.2, 4.3, 4.4, 4.5 )

JavaScript Introduction

Compiler: Translates the entire source code into machine code or an intermediate code before execution.
Interpreter: Executes the source code line by line, translating and running each instruction sequentially.
JST → java semantic transform
the .js code will be in the HTML code or as an external file
compiling the .js code will be by default in the browser → the browser have an interpreter by default
JS → open source → no license to use
java → complier

for desktop applications
should install the compiler

JavaScript → interpreter

for websites and web applications using browser
no need for complier
company → Netscape

Netscape: Browser that played a pivotal role in popularizing the internet.
JavaScript: Scripting language developed by Netscape for enhancing web interactivity.

C → have no OOP
C++ → full OOP
JavaScript → used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.
most popular scripting language on the internet
works in all major browsers → Internet Explorer, chrome, Firefox, Netscape, Opera.
what is JavaScript

designed to add interactivity to HTML pages
scripting language → scripting language is a lightweight programming language
consists of lines of executable computer code
usually embedded directly into HTML pages
interpreted language 90-2008 → means that scripts execute without preliminary compilation - Nowadays JST
Everyone can use JavaScript without purchasing a license

java vs JavaScript

two completely different languages in both concept and design
Java → developed by Sun Microsystems

is a powerful and much more complex programming language
same category as C and C++

traditional programming languages → C++ and Java → each code statement has to end with a semicolon : ;
JavaScript → optional
more than one statement on a single line: semicolons are required → — ; — ; — ; — ;
JavaScript Variables

used to store data - called ( unique identifiers ) or container → for information you want to store
variable's value can change during the script
refer to a variable by name → see its value or change its value
All JavaScript variables must be identified with unique names

Rules for variable names:

Identifiers can be short names - x and y
more descriptive names - age, sum, total_Volume
can contain letters, digits, underscores, and dollar signs
must begin with a letter
can also begin with $ and _
case sensitive
Reserved words → cannot be used as names

variable → holds a value that my be changed
constant → have a static value

Variables and Operations

</script> → format text with HTML code - heading
</script> → use line break html code
JavaScript code can be in :

head <script type="text/javascript"> js code </script>
body <script type="text/javascript"> js code </script>
both <script type="text/javascript"> js code </script>
external file with extension .js

file name : test.js
in html code : <script type="text/javascript" src="test.js"></script>

to execute : call function
js code be the <head>

JavaScript in head or external → any JavaScript code won’t be executed unless we call it → will need an event in the body to be executed
JavaScript body → will be executed by the page load that’s the calling for the event, won’t need an event calling it → no need for a button to call it

use external for the usability → change on one file then apply for more than one file

var : can contain → letter, digits, _, $
begin : must: letter , may : $ , _
Arithmetic Operators : + - * / % ++ --

Addition +
Subtraction -
Multiplication *
Division /
Modulus (division remainder) %
Increment x++
Decrement x--

Assignment Operators : = += -= *= /= %=

x=y → x=y
x+=y → x=x+y
x-=y → x=x-y
x*=y → x=x*y
x/=y → x=x/y
x%=y → x=x%y

a += b; is equivalent to a = a + b; . a =+ b; is equivalent to a = +b; . This means +b (positive) is assigned to variable a
compare : === , !== compare value and equal type , == value only
!== not equal value or not equal type

false == 0 → true
false === 0 → false → same value different type
x === "5” → equal in the value but the type is false → we don’t take the ASCII

!= < > >= <=

== → is equal to
=== → is equal to (checks for both value and type)
!= → is not equal
> → is greater than
< → is less than
>= → is greater than or equal to
<= → is less than or equal to

Logical Operators : &&: and, ||:or, !:not → in the code we write && not and

(x < 10 && y > 1) returns true
(x==5 || y==5) returns false
!(x==y) returns true

write in the body of the page : document.write("hello world")

document.write() statements are overwriting the entire content of your HTML document. The document.write() method is not suitable for use after the HTML document has been fully loaded, as it can overwrite the entire content of the document.

+ with strings → concatenation

document.write(”x”) → here the output will be x not the value of x for the “ “
document.write(“Merhaba” +x) → + is the concatenation between two strings

html code in js will be in "" as: document.write("<center>"+ js value +"</center>")

document.write("<table border=3 width=200 height=300>")
document.write("<tr><td></td></tr>")
document.write("<tr><td></td></tr>")
document.write("<tr><td></td></tr>")
document.write("</table>")

document.write("<table border=3 width=200 height= 300>"+
		"<tr><td></td></tr>"+
		"<tr><td></td></tr>"+
		"<tr><td></td></tr>"+
		"</table>")

alert box pop up → make sure information comes through to the user → then OK without Cancel : alert("Hello World!")
confirm box :→ want the user to verify or accept something → as pop up but at page reload : confirm("are you sure!") with OK , Cancel

ok = 1 true - cancel = 0 false
var y=confirm(“ are you sure!") → if you click “are you sure!” then y=1 , if you click cancel then y=0

A prompt box is often used if you want the user to input a value → before entering a page

user will have to click either "OK" or "Cancel" to proceed after entering an input value
OK → returns the input value
Cancel → returns null
prompt ("New student", "default value")
new value : value displayed as title - default value : if the user didn’t enter any value

parseInt() : change from string to numbers

the division or multiplication will be executed even if we didn’t make parsing but the summation and substation will be as concatenation if we didn’t make parsing
x = 9 , y = 10 , z=x+y → then z = 910
using praseInt(x) for each x,y before the summation → then z = 19
concatenation ( string ) → text += "<br>The number is " + i;

<br> in document.write() : as new line
user input is string → we must praseInt() to use arithmetic calculations
global - var - let - const ( variables )

global variable → x = 5 → declared in a function even that we can call it and use it in the global scope and change it’s value in global scope

It creates a new variable if it doesn't exist, or reassigns the value if it does.
Inside a function: It usually creates an implicit global variable if x hasn't been declared locally. This can lead to unexpected behavior and scoping issues.
Outside of any function: It directly assigns to the global variable x.

var is function-scoped and gets hoisted.

var is function-scoped: Variables declared with var are accessible throughout the entire function where they are declared, even if they are defined within a block (like an if statement or a for loop).
var x = 1; Declared and initialized with var - x = 2; Reassigning the value
var x = 5 → declared in a function then can’t used in the global scope

let is block-scoped and also gets hoisted.

let is block-scoped: Variables declared with let are only accessible within the block where they are declared, which means they are not accessible outside of that block.

const creates variables that can't be reassigned - block-scoped.

examples :

function myFunction() {
  var x = 1;  // Declared and initialized with var
  x = 2;      // Reassigning the value

  y = 3;      // Implicit global variable (not recommended)
}

alert(x);  // ReferenceError: x is not defined (not global)
alert(y);  // Output: 3 (global)

// Using var
function exampleVar() {
  if (true) {
    var x = 10;
    console.log(x); // Outputs 10
  }
  console.log(x); // Outputs 10
}

// Using let
function exampleLet() {
  if (true) {
    let y = 20;
    console.log(y); // Outputs 20
  }
  // console.log(y); // ReferenceError: y is not defined
}

exampleVar();
exampleLet();

Conditional Statements

perform different actions for different decisions → use conditional statements
condition statements

if statement - use this statement if you want to execute some code only if a specified condition is true
if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed
switch statement - use this statement if you want to select one of many blocks of code to be executed

if : true , else : false , switch : execute a block from any blocks
examples :

if ( —&&—&&—) → all should be true so it turns true
if (—||—||—) → all should be false to turn false
if(0) , if(false) = F
if(1) , if(true) = T

if condition

if (condition) {
    code to be executed if condition is true
}

if (condition) {
    code to be executed if condition is true
}
else {
    code to be executed if condition is not true
}

If the statements are not enclosed within the curly brackets of the "if" statement or presented consecutively under each other, the first one will be considered part of the "if" block, and the subsequent statements will be considered part of the main body.
{ } in if block , without only first with if block else will be for html code block

switch case

switch (expression) {
    case x:
        // code block
        break;
    case y:
        // code block
        break;
    default:
        // code block
}

in switch the default as the else in the if statement
break → go outside the switch scope

new Date(): This creates a new Date object, representing the current date and time.
.getDay(): This method is called on the Date object to retrieve the day of the week. It returns a number between 0 and 6, where each number corresponds to a day of the week.

as dayOfWeek = new Date().getDay();
dt = new Date(); → dt : new object
switch (dt.getDay()) → dt.getDay() : call the function from the object

the value of the strings should be in “ “
loops → for , while , do
for loop

for (statement 1; statement 2; statement 3) {
    // code block to be executed
}

    for (i = 0; i < 5; i++) {
      document.write(i + "<br>");
    }

{ // code block to be executed } → use curly brackets for bigger scope

Math.pow (var1,2) give the value power to 2
while loop

while (condition) {
    // code block to be executed
}

    while (i < 10) {
      text += "<br>The number is " + i;
      i++;
    }

we should write the incremental in while body to end the loop or it will loop non stop i++;

do/while loop

do {
    // code block to be executed
} while (condition);

first statement will be executed even if the condition isn’t justify but keep in mind the place of the incrementation

Functions

document.getElementById("demo"). → changing on the value of the HTML tag using the ID by JS

innerHTML = "Hello World"; insert this value in the HTML if it was a click button then the old will be replaced by the new one
.align = "center" center text
.style.fontSize = "50px";
.style.fontFamily = "impact";
.value; access the value of that tag

JavaScript Function Syntax

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

  <script>
    function myFunction(p1, p2) {
      return p1 * p2;
    }

    document.getElementById("dd").innerHTML = myFunction(4, 3);
  </script>

Function Invocation:

When an event occurs (e.g., when a user clicks a button)
When it is invoked (called) from JavaScript code myFunction();
Automatically (self-invoked) (function() {...})()

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

a self-invoking function is a function that runs automatically as soon as it is defined. It is also known as an Immediately Invoked Function Expression (IIFE)
Define a function using the function expression syntax: function() {...}

A function can be stored in a variable

  <script>
    var x = function (a, b) {
      return a * b;
    };

    document.getElementById("dd").innerHTML = x;
  </script>

Variable can be used as a function to send values : document.getElementById("dd").innerHTML = x(4, 3);
calling the function → by the name of the variable not the name of the function

Array

Arrays in JavaScript

Data structures of related items, Each element has a position number, we should save the array in a variable to hold these values
Dynamic → Size of an array in JavaScript can be changed (increased) AFTER it is created
Each element referenced by → a number or Subscript or index

Start at "zeroth element" - size = N from 0 till N-1

Accessing a specific element

Name of the array → Brackets → Number of elements

Accessing a specific element in array → name_array[ index or Subscript ]
declare the array

var c = new Array( 12 ); → 12 elements that are empty
var cars = new Array("Saab", "Volvo", "BMW"); → with values
var cars = ["Saab", "Volvo", "BMW"]; → with values

example :

print all the array values

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;     //cars[0]
</script>

print all the values cars → Saab,Volvo,BMW

table in HTML tags with loops and array

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.write("<table border=1>")
for(i=0;i<cars.length;i++)
document.write("<tr><td>"+i+"</td><td>"+ cars[i]+"</td></tr>");
document.write("</table>")
</script>

change array value → cars[0] = "Opel"
array length → cars.length → the size of the array ( number of items it have )
ascending sort → arr1.sort()
descending sort → arr1.reverse() but first make sort() to make it descending
reverse order → arr1.reverse()
var arr2 = arr1→ (arr2 references the same array as arr1)
var arr2 = [...arr1] → Create a shallow copy using spread syntax

Math/Events

Math.ceil() rounds a number up to the nearest integer. 5.9 → 6
Math.floor() rounds a number down to the nearest integer. 5.2 → 5
Math.round() rounds a number to the nearest integer. 5.4→ 5 , 5.7→ 6
Math.min(1,3,4,10.0) and Math.max() can be used to find the lowest or highest value in a list of arguments. → can’t apply array on it directly

valid → document.write(Math.min(...arr2) + "<br>");
invalid → document.write(Math.min(arr2) + "<br>");

Math.random() returns a random number between 0 (inclusive), and 1 (exclusive)
Event in JavaScript

HTML events are → things that happen to HTML elements.
when JavaScript is used in HTML pages → JavaScript can → react on these events.
JavaScript → lets you execute code when events are detected.

onload when page fully loaded
onclick on click one time
ondblclick on double click
onmouseover Triggers when the mouse enters an element.
onmouseout Triggers when the mouse leaves an element.
call one event in HTML and JS

in HTML

<p ondblclick="myFunction()">Double-click </p>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

in JS

<p id="demo">Double-click me.</p>
<script>
document.getElementById("demo").ondblclick = function  myFunction() {
  document.getElementById("demo").innerHTML = "I was double-clicked!";
}
</script>

<p id="demo">Double-click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "I was double-clicked!";
}
document.getElementById("demo").ondblclick = function() {myFunction()}; 
</script>

call the function anywhere
function() { myFunction(); }: This is an anonymous function that gets executed when the double-click event occurs. Inside this function, myFunction() is called.
myFunction(): This is the function that will be called when the double-click event occurs on the "demo" element.

write as → window.onload
when all the elements in the page is loaded then the function is preformed

<p id=d>jordan</p>
<script>
window.onload=function f1(){
document.getElementById("d").innerHTML="Welcome";
}
</script>

call two event in HTML and JS
Two events in html

<p onmouseout="myFunction()" onmouseover="myFunction2()">
	trigger a function.</p>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "Welcome to Jordan";
}
</script>

Two events in JavaScript

<p>HTML DOM to assign an "ondblclick" event to a p element.</p>
<p id="demo">Double-click me.</p>
<script>
document.getElementById("demo").ondblclick = function  myFunction() {
  document.getElementById("demo").innerHTML = "I was double-clicked!";
}
document.getElementById("demo").onmouseout = function  myFunction() {
  document.getElementById("demo").innerHTML = "mouse out";
}
</script>