Web Fundamentals is made for beginners and developers from standalone application background.
<> Tag
<html> element
Container element:
<html></html>
<body></body>
Empty element:
<br/>
<img src="image.jpg"/>
| token | called as |
|---|---|
| img | element |
| src | Attribute |
| lotus.jpg | Attribute value |
| Symbol | Remarks |
|---|---|
| Tr | Table row |
| Th | Table header |
| Td | Table data |
One root element. Attribute value should be in double quote.
The <a> tag is anchor tag defines a hyperlink.
The <br> tag produces a line break in text
The <form> tag defines an HTML form that contains controls which enable a user to submit information to a web server. An HTML form is used to capture user information such as username, password, address details etc.
<input> tag is used to create interactive controls within a form.
<!DOCTYPE html>
`
- Semantic element
- Form
- Media
- Graphics
- API`
A semantic element clearly describes its meaning to both the browser and the developer. This helps webCrawlers to understand page better and provide better result for search engine optimization.
HTML5 Semantic Elements
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>Developed by Brendan in Netscape in December 4, 1995. Initially it was named Mocha, later LiveScript, and finally JavaScript Developed for client side Scripting, in 10 days he made. Intention was to make easy scripting language for anyone to use.
It was very forgiving language, interpreter proceed with error as well.
In November 1996, Netscape announced a meeting of the Ecma International standards organization to advance the standardization of JavaScript. First edition of ECMA-262 was adopted by the Ecma General Assembly in June 1997.
Object, number, undefined, undefined, null.
a=10; b="10"; a==b is true;
Define a method, define a class in a old way. inherit class with properties Prototype.newMethod() inherit pro methods
⋅⋅* Global scope ⋅⋅* Function scope ⋅⋅* Block scope
Let, const = Both let and const are block scope.
Code link:
Note: In ES5, we can declare only one variable in a function scope. If we define two by any chance, JS will not give any error but the last assign value will be retain.. This called "Features of hoisting".
Fun(a,b,c=0) Code link:
Syntax
string text
This can contain almost anything in between including multiline.
hello = () => {
return "Hello World!";
}Note: Function vs Method Function outside of the class and Method inside of a class.
- Cannot over load function, method or constructor.
class Demo {
constructor(id, name) {
console.log("Constructor of Demo");
this.id = id;
this.name = name;
}
disp() {
console.log("Method");
}
}
class Child extends Demo {
constructor() {
super();
console.log("Const of ChildDemo");
}
disp() {
console.log("Overridden Method");
}
}Use -webkit/moz/ms if that property is not directly available. Use web fonts: fonts.google.com
Transition, KeyFrame.
transitions allows you to change property values smoothly, over a given duration.
Define keyframe "@keyframes example {"
position: relative;1. Meta
2. FlexBox
3. Column
4. MediaQuery
content="width=device-width, initial-scale=1.0"
flex-container: flex-wrap: nowrap;
The @media rule is used in media queries to apply different styles for different media types/devices.
// to be updated
code link:
Is for specific task, usually smaller than library. But can use multiple library in a component.
Pre written code to be reused
Pre written code, contains multiple library.
It is a running environment.
A running process (mostly running somewhere else in the backgound) which serve on client action. It should have specific architecture.
Service returns 'Promise'. [Observable, ]
Promise -> .then(success,failure)
Observable -> .subscribe(next, error, complete) //preferedHas to be on the web, called via http/https.
Interface to communicate two program (most likely public).
PHD research. GET 4 read, PUT 4 update, POST 4 create, DELETE 4 delete and PATCH also 4 update.
[use all this to completely, how?] If I do not use REST and I use WebAPI, I can only get or post not all 5 as Rest.
Emp emp = new Emp();
fun(emp);
fun(Emp emp) //creates a new reference which points to the same object of Emp();
{
}class Demo{
a=0;
constructor(a){
this.a= a;
}
}
// in TypeScript
class Demo{
constructor(private a){
}
}