Scribd
Upload
2 views

Bootstrap CSS

The document provides an overview of various HTML and TypeScript concepts, including styling elements with padding and margin, creating buttons and tables, and using functions in JavaScript. It also covers TypeScript features such as classes, inheritance, modules, access modifiers, and data types. Additionally, it explains methods for strings and numbers, as well as the use of tuples and indexable types in TypeScript.

Uploaded by

josealejandrolopezjaimes
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Bootstrap CSS

The document provides an overview of various HTML and TypeScript concepts, including styling elements with padding and margin, creating buttons and tables, and using functions in JavaScript. It also covers TypeScript features such as classes, inheritance, modules, access modifiers, and data types. Additionally, it explains methods for strings and numbers, as well as the use of tuples and indexable types in TypeScript.

Uploaded by

josealejandrolopezjaimes
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

padding: Usado para agregar relleno a un elemento HTM, el cual es un espacio entre

elementos
margin: Es un espacio entre el relleno de elementos HTML
class="m-a-1"
Schema:
-m: Margin -a for all edges
-p: Padding following for t top, b bottom, r right or l left
-number: Indicate the spacing of elements

/*******************************For
buttons****************************************/
-btn-lg: Crea un button large
-btn-sm: Crea un button pequeño

/*******************************Table********************************************/
-table: Create general styling for table elements and ita rows
-table-striped: Aplies alternate-row striping to the rows in the table body
-table-inverse: Applies inverted colors to the table and its rows
-table-bordered: Aplies borders to all rows and columns
-table-hover: Displays a different style when the mouase hovers over a row in the
table
-table-sm: Reduce the spacing in the table to créate more compact layout

/****************************************Forms***********************************/
-form-group: This style is applying to div element that contains a label an input
element

/
***************************************Grids**************************************/
its is used to créate different kinds of grid layour, ranging form one to twelve
columns
and with support for responsive layout of the gid changes based on the width of the
screen

-col-sm1: Permite mostrar elementos en columnas de forma responsiva


-col-xs: Permite distribuir elementos de forma Horizontal

/
**************************************TypeScript**********************************/
-npm start

-functions: If you call the función with fewer arguments than it has parameters,
then the value
of any parameters you have supplied values of is undefined. Java Script not
supoort polymorphism,
if you define two functions with same name, then the second definition
replaces the frists.

let myFunc = function(name,weather="raining"){


console.log("Hello "+name+".");
console.log("It is "+weather+" today.");

let myFunc = function(name,weather,...extraArgs){


console.log("Hello "+name+".");
console.log("It is "+weather+" today.");
for(let i = 0;i<extraArgs.length;i++){
console.log("Extra Arg: "+extraArgs[i])
}
}

myFunc("Adam","sunny","one","two","three")

let myFunc = function(){


return ("Hello "+name+".");
}
console.log(myFunc("Adam"))

/***************************************************************
Using Functions as Arguments to Other Functions
*****************************************************************/
let myFunc = function(nameFunciton){
return ("Hello "+nameFunction+".");
};

console.log(myFunc(function(){
return "Adam";s
})
);

/*************************************Function with arrow**********************/


let myFunc = (nameFunction) => ("Hello "+nameFunction()+".");
let printName = (nameFunction,printFunction) =>
printFunction(myFunct(nameFunction));
printName(function() {return "Adam"},console.log)

/*************************************Types Variables***************************/
let: Es used for declare variables and, optionally, assign a value to the variable
in
a single statement. The Variables are scoped to the región of code in which
they are
defined.

var: Create variables whose scope is the containing function, which means that all
the references
to message are referring to the same variable

Methods String:
-toString()
- toString(2) toString(8) toString(16)
- toFixed(n)
- toExponential(n)
- toPrecision(n)

Methods Number:
-Number(str)
-parseInt(str)
-parseFloat(str)

let myArray = new Array();


let myArray = [100,"Adam",true];
myArray.forEach( (value,index) => console.log("Index "+index+" : "+value));

let totalValue = products


.filter(item => item.stock > 0)
.reduce((prev,item) => prev +(item.price * item.stock),0);

/****************************************POO
TYPESCRIPT********************************/
TypeScript: Is a superset of JavaScript

class MyClass {
constructor(name, weather) {
this.name = name;
this._weather = weather;
}
set weather(value) {
this._weather = value;
}
get weather() {
return `Today is ${this._weather}`;
}
printMessages() {
console.log("Hello " + this.name + ". ");
console.log(this.weather);
}
}
let myData = new MyClass("Adam", "sunny");
myData.printMessages();

-----INHERENCE
class MySubClass extends MyClass{
constructor(name,weather,city){
super(name,weather);
this.city = city;
}
printMessages(): void {
super.printMessages();
console.log('You are in: '+this.city);
}
}

let myData = new MySubClass("Adam","sunny","London");


myData.printMessages();

/
*********************************************MODULES*******************************
*****************/
In angular each file is treated as module.

-export: Is used to denote clases and variables that can be used outside of the
file. Which other variables or lasses
can be used only within the file. With export keyword each class can be used
elsewhere in the application.

-import: Is used to declared dependencies on the contents of a module.


Example imports:

-import {Name,WweatherLocation} from "./modules/NameAndWeather"; :Importing Alias


-import {Name as OtherName} from "./modules/DuplicateName"; :Importing as a Alias
-import * as NameAndWheatherLocation from "./modules/NameAndWeather": Importing All
of the Types in a Module

-ANNOTATION TypeScript
Can help reduce common JavaSript errors by applying type checking when the code is
compiled, resolve
the remaining errors reported by the TypeScript compiler.

-Type Annotatig Properties and Variables

ACCESS MODIFIERS
-public: Is used to denote a property or method that can be accessed anywhere.
This is the default Access protection if no keyword is used.

-private: This keyword is used to denote a property or method that can ve accesses
only within the class that
defines it.

-protected: This keyword is used to denote a property or method that cab be


accessed only within the class
that defines it or by clases that extend that class

DATA TYPES:
-number
-string
-any: Used implicity for typeScript

Tuples: Son matrices de longitud, where each item in the arrya is of a specified
type.
Are defined as an array of types, and individual elements are accessed using
array indexers.
let tuple: [string,string,string];
tuple = ["London","raining",TempConverter.convertFtoC("38")];

Indexable Types: Associate a key with a value. Only number and String can be used
as the keys for indexable types

let cities: { [index: string]: [string,string] } = {};


cities["London"] = ["raining",TempConverter.convertFtoC("38")];
cities["Paris"] = ["sunny",TempConverter.convertFtoC("52")];
cities["Berlin"] = ["snowing",TempConverter.convertFtoC("23")];

for(let key in cities){


console.log(key+": "+cities[key][0]+","+cities[key][1]);
}

You might also like