User:ZUZU/Study/Web01: Difference between revisions

Latest revision as of 17:58, 9 March 2024

Contents
1 WEEK 12
1.1 Saturday 9 December
1.1.1 basic HTML Structure
1.1.2 compare Block-Level Elements&Inline Elements
1.1.3 Header Section
1.1.4 Footer Section


2 WEEK 13
2.1 Wednesday 13 December
2.1.1 Add Links
2.1.2 Add Images

2.2 Thursday 14 December
2.2.1 Basic Structure of CSS

2.3 3 Feb
2.3.1 Basic Properties of CSS


3 WEEK 7
3.1 Basics JavaScript
3.1.1 The placement of JavaScript within an HTML
3.1.2 Use Node.js
3.1.3 5 primitive data types
3.1.4 comparison operators
3.1.5 var,let,const
3.1.6 Common JavaScript Syntax Symbol
3.1.7 Template Strings
3.1.8 String Operations
3.1.9 Arrays
3.1.10 Array Declaration
3.1.11 Object
3.1.12 Object references
3.1.13 JS Function Syntax
3.1.14 Copying arrays and objects
3.1.15 Conditional Statements (if-else)
3.1.16 Ternary Operator
3.1.17 Switch Statement
3.1.18 For Loops
3.1.19 While Loops
3.1.20 Falsy Value
3.1.21 Logical Operators


4 WEEK 8
4.1 matter.js
4.1.1 Reference


5 WEEK 9
5.1 Arrow functions Call back Map Fliter
5.1.1 Arrow functions
5.1.2 Array prototype methods


6 Appendix
6.1 Git Basic
6.2 Punctuation Mark
6.3 Set up automatic synchronization

WEEK 12Saturday 9 Decemberbasic HTML Structure<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Content of the page goes here -->
</body>


compare Block-Level Elements&Inline Elements



Block-Level Elements

Inline Elements

Structure

Each block-level element generate a block-level container that takes up the full width available.

They do not create a new line,they flow within the context.

Examples

<div>, <p>, <h1> to <h6>, <ul>, <table>

<span>, <a>, <strong>, <img>, <br>
Header Section<!-- Header Section -->
<header>
  <h1>Website Name</h1>
  <nav>
    <!-- Navigation Links -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>


Footer Section<!-- Footer Section -->
<footer>
  <p>&copy; 2023 Website Name. All rights reserved.</p>
</footer>


WEEK 13Wednesday 13 DecemberAdd Links<!-- title attribute -->
<a href="https://www.examples.com title="Example webpage">Look at examples</a>

<!-- target attribute -->
<a href="https://www.example.com" target="_self">open on the same page</a>
<a href="https://www.example.com" target="_blank">open in new tab</a>

<!-- relative paths -->
<a href="/about">About Us</a>
<a href="/">Home</a>

<!-- link to E-mail -->
<a href=mailto:information@example@.com>Email Us</a>

<!-- link to Sections within the Same Page -->
<h1 id="top">Header1</h1>
<a href="#top">Go back to Top</a>


Add Images<!-- basic syntax -->
<img src="example/imagines.jpg" alt="example image">

<!--width and height Attributes -->
<img src="example.jpg" alt="An example image" width="300" height="200">

<!-- add image as link -->
<a href="https://www.example.com">
<img src="example/imagines.jpg" alt="Description of the image">
</a>
Thursday 14 DecemberBasic Structure of CSS/* Element Selector */
p {
  color: blue;
}

/* Class Selector */
.highlight {
  background-color: yellow;
}

/* ID Selector */
#header {
  font-size: 24px;
}


3 FebBasic Properties of CSSWEEK 7Basics JavaScriptThe placement of JavaScript within an HTML<!-- Inside <head> tags, allows the browser to load the script before rendering the page content -->
<head>
    <script src="script.js"></script>
</head>

<!-- Inside <body> tags before closing </body> tag allow the page content to load before executing the scripts-->
<body>
    <!-- Page content -->
    
    <script src="script.js"></script>
</body>
Use Node.jsNode.js is a runtime environment that could run JavaScript code outside of a web browser, on servers or other devices.Open your terminal,navigate to the directory 
node example.js
5 primitive data types


Name
Description
Sample

string

a sequence of characters enclosed in single quotes (') or double quotes (") used to represent text data

let greeting = 'Hello, world!';
console.log(typeof greeting); // Output: string

let name = "Zuzu S";
console.log(typeof name); // Output: string

number

Numeric data, can be integers or floating-point numbers

let age = 30;
console.log(typeof age); // Output: number

let pi = 3.14;
console.log(typeof pi); // Output: number

boolean

a logical value, either true or false.

let isAdult = true;
console.log(typeof isAdult); // Output: boolean

let hasPermission = false;
console.log(typeof hasPermission); // Output: boolean

null

a variable has no value or points to nothing

let car = null;
console.log(typeof car); // Output: object

undefined

a variable that has been declared but has not been assigned a value, it is the default value of variables in JavaScript that have not been initialized.

let x;
console.log(typeof x); // Output: undefined

let y = undefined;
console.log(typeof y); // Output: undefined
comparison operators//Equal (==):Checks if two values are equal in terms of value, but does not check for data type.
console.log(5 == 5); // true
console.log(5 == '5'); // true (coerced to the same type)
console.log(5 == 7); // false

//rict Equal (===):Checks if two values are equal in both value and data type.
console.log(5 === 5); // true
console.log(5 === '5'); // false (different types)

//Not Equal (!=)
console.log(5 != 7); // true
console.log(5 != 5); // false

//Strict Not Equal (!==)
console.log(5 !== '5'); // true (different types)
console.log(5 !== 5); // false

//Greater Than (>) and Greater Than or Equal To (>=)
console.log(5 > 3); // true
console.log(5 >= 5); // true
var,let,constvar: variables is function-scoped. That they are accessible anywhere within the function or global scope in which they are declared.
function example() {
  var x = 10;
  if (true) {
    var y = 20;
  }
  console.log(x); // Output: 10
  console.log(y); // Output: 20
}
let: variables declared with let are block-scoped, they are only accessible within the block (enclosed by curly braces)
function example() {
  let x = 10;
  if (true) {
    let y = 20;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }
  console.log(x); // Output: 10
  console.log(y); // Error: y is not defined
}
const: means constant, variables declared with const are block-scoped like let, but they must be initialized with a value, and once declared, their value cannot be re-assigned.
function example() {
  const x = 10;
  // x = 20; // Error: Assignment to constant variable
  console.log(x); // Output: 10
}
//for objects and arrays declared with const, their properties or elements can still be modified, but the variable itself cannot be re-assigned.
const person = {
  name: 'John',
  age: 30
};
person.age = 31; // Valid
console.log(person); // Output: { name: 'John', age: 31 }
// person = {}; // Error: Assignment to constant variable
Common JavaScript Syntax SymbolSyntax
//this function finds the GCD of two numbers
const greatestCommonDivisor = (a, b) => {//Curly braces denote where blocks begin and end.
  while (b !== 0) {
    const temp = b;//Every statement in JavaScript ends with a semicolon;
    b = a % b;
    a = temp;
  }
  return a;
}

const x = 50;
const y = 15;
const gcd = greatestCommonDivisor(x, y);//output:5





Symbol
Description
Sample

( )

Function Invocation: Call a function and execute its code, use parentheses after the function name with optional arguments inside.

function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }

Grouping Expressions: Parentheses can be used to group expressions and control the order of evaluation in complex expressions.

let result = (2 + 3) * 4; // Result: 20

    }

Function Declarations and Definitions: When declaring or defining functions,  enclose the parameters and the function body within parentheses.

let add = (a, b) => {
    return a + b;
};

{ }

Function and Control Structures::  Curly braces define the scope of function bodies, control structures like if, for, while loops, and blocks of code in general.

function example() {
    let x = 10;
    if (true) {
        let y = 20;
        console.log(x); // Output: 10
        console.log(y); // Output: 20
    }

Object Literals:  Define object literals, which are key-value pairs enclosed within curly braces.

let person = {
    name: 'John',
    age: 30
};

[ ]

Array access:  Access elements in an array by their index.

const numbers1 = [1,2,3];
console.log(numbers1[0]);//Output: 1

Computed property names:  in object literals, the value of propertyName is used as the property name for the person object.

const propertyName = 'name';
const person = {
  [propertyName]:'John'
};
console.log(person.name);// Output: John
Template Stringsa convenient way to create strings
const username = "KK";
const age = 30;
console.log(`My name is ${username} and I am ${age} years old.`); // Output: My name is KK and I am 30 years old.
const hello = `My name is ${username} and I am ${age} years old.`;
console.log(hello); // Output: My name is KK and I am 30 years old.
String Operationsvarious methods to manipulate strings
const s = "hello world";
console.log(s.length); // Output: 11
console.log(s.toLowerCase()); // Output: hello world
console.log(s.toString()); // Output: hello world
console.log(s.substring(1, 5).toUpperCase()); // Output: ELLO
console.log(s.split("")); // Output: ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
const k = "under,make,call";
console.log(k.split(",")); // Output: ["under", "make", "call"]
ArraysArrays are used to store multiple values in a single variable and can hold different types of data, including numbers, strings, and even other arrays.
const fruits = ["apple", "pear", "banana"];

//add to end
fruits.push("mango");
console.log(fruits); // Output: ["apple", "pear", "banana", "mango"]

//add at beginning
fruits.unshift("grapes");
console.log(fruits); // Output: ["grapes", "apple", "pear", "banana", "mango"]

//remove from end
fruits.pop();
console.log(fruits); // Output: ["grapes", "apple", "pear", "banana"]


console.log(fruits.indexOf("mango")); // Output: -1 (as "mango" is no longer in the array after pop)
console.log(Array.isArray(fruits)); // Output: true
console.log(fruits[1]); // Output: apple
Array Declaration// Array Declaration
const todos = [
  {
    id: 1,
    text: "Take out trash",
    inCompleted: true,
  },
  {
    id: 2,
    text: "Meeting with boss",
    inCompleted: true,
  },
  {
    id: 3,
    text: "Dentist appt",
    inCompleted: true,
  },
];

// Accessing Array Elements
console.log(todos[1].text); // Output: Meeting with boss

//Replace
todos[1].text = "Shopping"; 


// JSON Serialization
//Convert the todos array into a JSON string and store it in the constant variable todoJSON.
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
Objecta collection of name:value pairs
const person = {
  firstName: "KK",
  lastName: "ÖO",
  age: 30,
  hobbies: ["music", "movies"],
  address: {
    street: "50 main st",
    city: "Boston",
    state: "MA"
  }
};

//Accessing properties
console.log(person.firstName); // Output: KK
console.log(person.["hobbies"]); // Output:  ['music', 'movies']

// Object destructuring
// A shorthand to obtain multiple properties at once
const { firstName, lastName, address: { city } } = person;
console.log(firstName); // Output: KK
console.log(lastName); // Output: ÖO
console.log(city); // Output: Boston

// Property assignment
person.email = "kk@gmail.com";
console.log(person) //  Output: Complete person object with added email property
Object referencesObject variables are references, they do not store the object's data directly but store a reference  to the location where the object's data is stored.
let person1 = { name: "kk" };
let person2 = { name: "kk" };
console.log(person1 === person2); // Output: false
JS Function SyntaxFunctions are values that are stored in memory, just like strings, integers, objects, and other data types. This means we can assign variables to point to functions.
//Basic syntax
(parameters) => { body };

//here is a function to find the greatest common divisor of a and b
(a, b) => {
  while (b !== 0) {
    const temp = b;
    b = a % b;
    a = temp;
  }
  return a;
}

//we could assign the function to a variable,we could name variable:greatestCommonDivisor,and then use const to point to the function 
const greatestCommonDivisor = (a, b) => {
    const temp 
    b = a % b;
    a = temp;
  }
  return a;
};//end with a semicolon because it's a variable
Copying arrays and objectsOne way is to use the spread operator (...)
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

const originalObject = { key1: 'value1', key2: 'value2' };
const copyObject = { ...originalObject };
Conditional Statements (if-else)Extract values from objects and assign them to variables
if (U === 10) {
  console.log("U is 10");
} else if (U > 10) {
  console.log("U is greater than 10");
} else {
  console.log("U is less than 10"); // Output: U is less than 10
}
Ternary Operatora shorthand for an if-else statement
/*
Syntax: condition ? expression1 : expression2
If the condition evaluates to true, expression1 is executed; otherwise, expression2 is executed.
In this case, e > 10 is the condition. If e is greater than 10, "red" is assigned to color1; otherwise, "blue" is assigned.

*/
const e = 10;
const color1 = e > 10 ? "red" : "blue";
console.log(color1); // Output: blue
Switch Statementswitch (color2) {
  case "red":
    console.log("color2 is red");
    break;
  case "blue":
    console.log("color2 is blue");
    break;
  default:
    console.log("color2 is not red or blue");
}
For Loopsiterate through indices
for (let i = 0; i <= 10; i++) {
  console.log(`For Loop Number:${i}`);
}

/*
Output:
For Loop Number:0
For Loop Number:1
For Loop Number:2
For Loop Number:3
For Loop Number:4
For Loop Number:5
For Loop Number:6
For Loop Number:7
For Loop Number:8
For Loop Number:9
For Loop Number:10
*/

const todos = [
  {
    id: 1,
    text: "Take out trash",
    inCompleted: true,
  },
  {
    id: 2,
    text: "Meeting with boss",
    inCompleted: true,
  },
  {
    id: 3,
    text: "Dentist appt",
    inCompleted: true,
  },
];

for (let i = 0; i < todos.length; i++) {
  console.log(todos[i].text);
}

/*
Output:
Take out trash
Meeting with boss
Dentist appt
*/

for (let todo of todos) {
  console.log(todo.text);
  console.log(todo.id);
}

/*
Output:
Take out trash
1
Meeting with boss
2
Dentist appt
3
*/
While Loops//While
let j = 0;
while (j < 5) {
  console.log(`While Loop Number:${j}`);
  j++;
}

/*
Output:
While Loop Number:0
While Loop Number:1
While Loop Number:2
While Loop Number:3
While Loop Number:4
*/
Falsy Valuenull,  undefined, 0, an empty string "", NaN, and false are falsy value,all other values are considered truthy.
Logical Operators


Operators
Description
Sample

&&

AND

console.log(true && true); // Output: true
console.log(true && false); // Output: false
console.log(false && true); // Output: false
console.log(false && false); // Output: false

||

OR

console.log(true || true); // Output: true
console.log(true || false); // Output: true
console.log(false || true); // Output: true
console.log(false || false); // Output: false

!

NOT

console.log(!true); // Output: false
console.log(!false); // Output: true


WEEK 8matter.jsReferenceHomepage of mattter.js
Matter.js Website examples
SVG effect example
reference<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>in<head>section


WEEK 9Arrow functions Call back Map FliterArrow functionsBasic syntax:
const functionName = (parameters) => {
  // function body
};
Sample:
const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // Output: 5
Array prototype methodsconst numbers = [1, 2, 3, 4, 5];

// 1. Map: Double each number
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

// 2. Filter: Keep only the even numbers
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
AppendixGit BasicNavigate to the target directory, usegit initturns current directory into git repo
Stage Changes:Usegit add . to add all changes in the current directory and its subdirectories
Commit the Changes:git commit -m "Some commit message here"
View the commit loggit log
Handy commands see branches:git branch switch to existing branch:git checkout [branch-name]create and checkout new branch:git checkout -b [branch-name]
Punctuation Mark


Punctuation Mark

English Name

.

Full Stop

,

Comma

;

Semicolon

:

Colon

'

Apostrophe /əˈpɒstrəfi/(Single Quote)

"

Quotation Mark (Double Quote)

`

Backtick

(

Opening Parenthesis

)

Closing Parenthesis

[]

Square Bracket

{}

Curly Brace

/

Forward Slash

\

Backslash

*

Asterisk/ˈæstərɪsk/

&

Ampersand/ˈæmpəsænd/

#

Hash (Octothorpe)

<

Less Than

>

Greater Than

|

Pipe (Vertical Bar)

!

Exclamation Mark /ˌekskləˈmeɪʃn/

˜

Tilde /ˈtɪldə/

-

Hyphen (Minus)

_

Underscore
Set up automatic synchronizationUsing automatic synchronization between Visual Studio Code and Firefox using GitHub and BrowserSync.
-Set up a GitHub Repository
-Clone the Repository:
git clone https://github.com/blacktableone/SI23
-Install BrowserSync:
npm install -g browser-sync
-Navigate to project directory 
-Initialize a package.json file:
npm init -y
-Install BrowserSync:
npm install browser-sync --save-dev
-Create a bs-config.js file in  project directory:
code bs-config.js
-Add the following configuration to bs-config.js:
module.exports = {
    server: {
        baseDir: "./"
    },
    files: ["*.html", "*.css", "*.js"]
};
-In project directory,run BrowserSync:
browser-sync start --config bs-config.js

Symbol	Description	Sample
( )	Function Invocation: Call a function and execute its code, use parentheses after the function name with optional arguments inside.	function example() { let x = 10; if (true) { let y = 20; console.log(x); // Output: 10 console.log(y); // Output: 20 }
	Grouping Expressions: Parentheses can be used to group expressions and control the order of evaluation in complex expressions.	let result = (2 + 3) * 4; // Result: 20 }
	Function Declarations and Definitions: When declaring or defining functions, enclose the parameters and the function body within parentheses.	let add = (a, b) => { return a + b; };
{ }	Function and Control Structures:: Curly braces define the scope of function bodies, control structures like if, for, while loops, and blocks of code in general.	function example() { let x = 10; if (true) { let y = 20; console.log(x); // Output: 10 console.log(y); // Output: 20 }
{ }	Object Literals: Define object literals, which are key-value pairs enclosed within curly braces.	let person = { name: 'John', age: 30 };
[ ]	Array access: Access elements in an array by their index.	const numbers1 = [1,2,3]; console.log(numbers1[0]);//Output: 1
[ ]	Computed property names: in object literals, the value of propertyName is used as the property name for the person object.	const propertyName = 'name'; const person = { [propertyName]:'John' }; console.log(person.name);// Output: John

	Block-Level Elements	Inline Elements
Structure	Each block-level element generate a block-level container that takes up the full width available.	They do not create a new line,they flow within the context.
Examples	`<div>`, `<p>`, `<h1>` to `<h6>`, `<ul>`, `<table>`	`<span>`, `<a>`, `<strong>`, `<img>`, `<br>`

Name	Description	Sample
string	a sequence of characters enclosed in single quotes (') or double quotes (") used to represent text data	let greeting = 'Hello, world!'; console.log(typeof greeting); // Output: string let name = "Zuzu S"; console.log(typeof name); // Output: string
number	Numeric data, can be integers or floating-point numbers	let age = 30; console.log(typeof age); // Output: number let pi = 3.14; console.log(typeof pi); // Output: number
boolean	a logical value, either true or false.	let isAdult = true; console.log(typeof isAdult); // Output: boolean let hasPermission = false; console.log(typeof hasPermission); // Output: boolean
null	a variable has no value or points to nothing	let car = null; console.log(typeof car); // Output: object
undefined	a variable that has been declared but has not been assigned a value, it is the default value of variables in JavaScript that have not been initialized.	let x; console.log(typeof x); // Output: undefined let y = undefined; console.log(typeof y); // Output: undefined

Punctuation Mark	English Name
.	Full Stop
,	Comma
;	Semicolon
:	Colon
'	Apostrophe /əˈpɒstrəfi/(Single Quote)
"	Quotation Mark (Double Quote)
`	Backtick
(	Opening Parenthesis
)	Closing Parenthesis
[]	Square Bracket
{}	Curly Brace
/	Forward Slash
\	Backslash
*	Asterisk/ˈæstərɪsk/
&	Ampersand/ˈæmpəsænd/
#	Hash (Octothorpe)
<	Less Than
>	Greater Than
\|	Pipe (Vertical Bar)
!	Exclamation Mark /ˌekskləˈmeɪʃn/
˜	Tilde /ˈtɪldə/
-	Hyphen (Minus)
_	Underscore