https://github.com/nandovejer/basic_js
Basics Vanilla Javascript
https://github.com/nandovejer/basic_js
Last synced: about 2 months ago
JSON representation
Basics Vanilla Javascript
- Host: GitHub
- URL: https://github.com/nandovejer/basic_js
- Owner: nandovejer
- Created: 2018-09-28T09:10:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-24T10:55:05.000Z (about 6 years ago)
- Last Synced: 2025-02-12T05:59:56.792Z (4 months ago)
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic JS
## Variables
**You can write var with letters, numbers, underscores and dollar sign, but the first sign had to be a letter or dollar sign.**
```javascript
// Examples name of vars
var n2_0 = 'red';
var myNum = 30;
var &width = 300;
// type number
var i = 35;
// type string
var i = 'nice var';
// Other types
let thisThing = 'local variable';
const thatThing = 'contant variable';
globalThing = 'this is a global variable';
```
## Dom Manipulation
**Handled HTML Elements**
```javascript
// ID
document.getElementById("nameOfID");
// TAG HTML
document.getElementsByTagName("p");
// CLASS CSS
document.getElementsByClassName("nameOfClass");
```
**Elements of document**
``` javascript
// HTML
document.doctype
// BODY
document.body
// TITLE'S DOM
document.title
// ALL IMAGES'S DOM
document.images
// ALL LINKS'S DOM
document.links
// ALL SCRIPTS'S DOM
document.scripts
// URL
document.URL
// DOMAIN
document.domain
```
## Style
**Apply propeties css by js **
*element + style + propertie css + value css*
``` javascript
document.body.style.background = "red";
```
## Functions
**Anonymous function ==> Auto-execute javascript functions AND call them later**
```javascript
(function(){
// here your functions auto-executed
}());
```
### Closures
## Arrays
**Multiple values in one var.**
[Arrays Tutorial ](https://www.youtube.com/watch?v=2OR6roKPKwI&index=14&list=PLQpe1zyko1phDdAVYaHseHL1qRodR22_1)
```javascript
// Array
var colors = ['red', 'blue' 'purple']
```
Position of a element in array
```javascript
// Choose purple element of this array
var colors = ['red', 'blue' 'purple'];
colors[2];
```
Change value of a element of array
```javascript
// Purple will be green
var colors = ['red', 'blue' 'purple'];
colors[2] = 'green';
```
How many values are in an Array
```javascript
// length propertie
var colors = ['red', 'blue', 'purple', 'cyan', 'skyblue'];
colors.length;
```
Show the inverse values of an Array
```javascript
// reverse propertie
var colors = ['red', 'blue', 'purple', 'cyan', 'skyblue'];
colors.reverse();
```
## Loops
**Repite acctions**
### The FOR loop
```javascript
// Repeat x times an action
for (var i=0; i<10; i++ ){
console.log('this time is ' + i);
};
```
```javascript
// Execute a provided function once per array element.
var funArray = [11, 27, 38, 42, 57];
for (var i=0; i < funArray.length; i++ ){
console.log(funArray[i]);
};
```
### The While loop
```javascript
// Repeat an action while a condition
var i = 0;
while ( i < 10) {
console.log(i++)
}
```
### The forEach loop
```javascript
// Execute a provided function once per array element.
var funArray = [11, 27, 38, 42, 57];
funArray.forEach( function(i) {
console.log(i);
});
```
## Conditionals
**Conditionals power**
### if
```javascript
// If it's equal
var i = 2;
if(i == 2){
console.log('yes,' +i+ ' is equal 2');
}
```
```javascript
// If it's not equal
var i = 2;
if(i != 4){
console.log('You are right,' +i+ ' is not equal 4');
};
```
### if else
```javascript
// If it's not equal
var i = 4;
if(i != 4){
console.log('You are right, ' +i+ ' is not equal 4');
} else {
console.log('You are wrong, ' +i+ ' is equal 4');
};
```
```javascript
// If X is not equal or more than X
var i = 3;
if(i != 4 || i < 4){
console.log('Ummm, ' +i+ ' is not equal 4 or it is more than 4');
} else {
console.log('Ummm, ' +i+ ' is equal 4');
};
```
### switch case
**Matching the expression's value to a case clause, and executes statements associated with that case.**
```javascript
var cars = 'audi';
switch(cars){
case 'audi':
console.log('It is A4');
break;
case 'ford':
console.log('It is my car Ford');
break;
case 'ferrari':
console.log('It is the slow car of Fernando Alonso');
break;
}
```
## Objects
### Simple Object
```javascript
var person = {
name: 'mike',
age: 20,
}
console.log(person.name);
```
Simple Object with Array
```javascript
var person = {
name: 'mike',
age: 20,
daughters: ['Linda', 'Maggie'],
}
console.log(person.daughters[1]);
```
### Complex Object
Object with other object inside
```javascript
var person = {
name: 'mike',
age: 20,
address: {
street: 'Velazquez 10',
city: 'Madrid'
}
}
console.log(person.address.city);
```
# Tips
**JS: default value to an undefined parameter**
```javascript
function functionWithDefaultValue(b){
b = b || 123;
return b;
}
// Result without parameter -----> Result 123
functionWithDefaultValue()
// Result with parameter -----> Result 66
functionWithDefaultValue(66)
```
**JS: Return multiple values from a function**
```javascript
function operation(val1, val2){
sum = val1 + val2;
sub = val1 - val2;
return {
sum: sum,
sub: sub
};
};
console.log( operation(20,5).sum ); // 25
console.log( operation(20,5).sub ); // 15
```
**JS: Merge the contents of two or more objects together into the first object**
```javascript
// Create helper Function
function extend(obj, src) {
for (var key in src) {
if (src.hasOwnProperty(key)) obj[key] = src[key];
}
return obj;
}
// Object's examples
jsonObjA = {
name: 'mike',
years: 34
}
jsonObjB = {
country: 'Brazil'
}
// Apply merge of objects
let jsonObjFull = extend(jsonObjA, jsonObjB);
console.log(jsonObjFull); // Object { country: "Brazil", name: "mike", years: 34 }
```
## JS - Playing with strings
**Playing with strings**
```javascript
(function(){
var str = "Welcome to the real world";
str.startsWith("Welcome"); // true
str.endsWith("world"); // true
str.includes('real') // true
str.slice(0, 6); // "Welcom"
str.charAt(12) // "h"
str.split(" "); // ["Welcome", "to", "the", "real", "world"]
str.split("e"); // ["W", "lcom", " to th", " r", "al world"]
str.replace("world", "life"); // "Welcome to the real life"
str.repeat(3); // "Welcome to the real worldWelcome to the real worldWelcome to the real world"
}());
```
## JS - insert html
**inserts the resulting html into the DOM tree at a specified position**
```javascript
//
one
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', 'two');
// At this point, the new structure is:
//
onetwo
```
``` html
foo
```
+ info - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML