User:ZUZU/Study/Web01: Difference between revisions
| Line 273: | Line 273: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||
|'''number''' | | style="text-align: center"|'''number''' | ||
| Numeric data, can be integers or floating-point numbers | | Numeric data, can be integers or floating-point numbers | ||
|<syntaxhighlight lang="JavaScript"> | |<syntaxhighlight lang="JavaScript"> | ||
| Line 283: | Line 283: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||
|'''boolean''' | | style="text-align: center"|'''boolean''' | ||
|a logical value, either true or false. | |a logical value, either true or false. | ||
|<syntaxhighlight lang="JavaScript"> | |<syntaxhighlight lang="JavaScript"> | ||
| Line 293: | Line 293: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||
|'''null''' | | style="text-align: center"|'''null''' | ||
|represents the intentional absence of any object value, a special value indicates a variable has no value or points to nothing | |represents the intentional absence of any object value, a special value indicates a variable has no value or points to nothing | ||
|<syntaxhighlight lang="JavaScript">let car = null; | |<syntaxhighlight lang="JavaScript">let car = null; | ||
| Line 299: | Line 299: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||
|'''undefined''' | | style="text-align: center"|'''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. | |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. | ||
|<syntaxhighlight lang="JavaScript">let x; | |<syntaxhighlight lang="JavaScript">let x; | ||
Revision as of 15:51, 15 February 2024
WEEK 12
Saturday 9 December
basic 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>
<p>© 2023 Website Name. All rights reserved.</p>
</footer>
WEEK 13
Wednesday 13 December
Add 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 December
Basic Structure of CSS
/* Element Selector */
p {
color: blue;
}
/* Class Selector */
.highlight {
background-color: yellow;
}
/* ID Selector */
#header {
font-size: 24px;
}
3 Feb
Basic Properties of CSS
WEEK 7
Wednesday 14 Feb
Basics JavaScript
The 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.js
Node.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
var,let,const
var: variables declared with var are function-scoped or globally-scoped, but not block-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 Symbol
| 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
|
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!';
let name = "Zuzu S";
|
| 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 | represents the intentional absence of any object value, a special value indicates 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
|
Appendix
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 synchronization
Using 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