Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
Three.js - JavaScript 3D library
console.log('Hello'); // returns Hello
console.log("Name:" , name, profession); // returns Name: & var1 & var2
console.warn("warning danger msg") // returns a yellow warning message
console.error("Error") // returns a red warning message
2 + 2 // returns 4
alert ('yo') // pop up window with yo
typeof (name) // returns the var type like "string" // if it has qoutetion "" we know its a string
npm install at the root of your directorynpm run start to start the projectLinking --> index.html
<script> element best practice should be after the body (
// option 2 adding the script in the head section)
<script src="index.js"></script> // reffernce the file code
Variables:
// cannot be reserved keyword
// should be meaningful
// cannot start with a number (1name)
// cannot contain a space or hyper (-)
// are case sensitive
var name ="Yoi"
alert(name); // popup with the name Yosi
let name1 = 'Yosi', name2= 'yoc' ;
console.log(name1);
// let works only in the function or loop (in the brakets )
const interestRate = 0.3; // use const if ou don't want to change the variable
interestRate = 1;
console.log(interestRate);
// like let but its a consent data point that cannot be changed
//Primitives / Value types
string
Number // Decimals Float Int are the same in JS
Boolean // false or true
Float // not a round number
undefined // not so comman
null // clear a value of a variables
var name = prompt ("Enter name")
if(name.toLowerCase() == "zephyr" ) {
var isCat = true ; // boolean var
} else {
var isCat = false ;
}
if (isCat) { alert("You're a Cat"); }
else { alert ("You'r Not a cat")}
// if(!isCat) {} is a false statement
// if(isCat != true ) {} false block to execute
var isCat = 1; // true
var isCat = 0; // is false
margins variables are called **concatenation**
age + "" + num2 // adding two numbers as a string
".hahaha" + // adding value to a var
var test5 = document.getElementById("test");
test5.innerHTML = "<u>Hello</u>World"; // changing the html via JS
.innerText // taking the var text to be used the the JS script
User Inputs
var name = prompt ("what is your name") // on prompt the input always comes as a string
Manipulations:
// whats inside () is a function -- > do something
var upperSentence = sentance.toUpperCase ()
sentence.substr(10, 30) // taking the sentence string form place 10 to pulse 30
sentance.split(" ") // split the sentence after a space
sentace.join(")(") // joins with )(
sentance.slice(0,3) the function returns the first 3 worlds
**Arithmetic**
/ * - +
% // remandis (10%3 = 1)
** // exponent
**Comparison Operators**
= assignment operator
!= // does not equal
== // equal
=== // strict comparison equals + the value and the data type has to much as well
> // greater than
< // less than
>= // grater than or equal to
&& // two if in one question // if (num && num >=18) {
if (name == "Kalob") {
alert ("Do something ")
}
var URL prompt ("enter URL")
if (URL == null) {
consol.error("Missing input"); // if no URL enterd
}
example
<h1 id="nameId"></h1>
<script>
var name = prompt("what is your name?", "YOSI")
var nameBy = document.getElementById("nameId")
if (name.toLowerCase() == "yosi" ) {
nameId.innerText = "Welcome Yosi" ;
} else {
nameId.innerText = "Not Yosi" ; // adding else statement
}
</script>
Special cases( else if vs switch)
1. else if (name == "yosi")
2.
var name = "yoi"
switch (name) {
case "yodi":
console.log("Hi Yosi")
break;
case.....
default;
console.warn("Not handeld")
break
}
**Comparison Operators 2**
// Reference types
//object - Data type / structure
let person = {
name2: 'yoc',
Age: 30
}
// Dot notation
person.name2 = 'yosi';
// Bracket Notation
person['name2'] = 'yoyo'; // adding new parameter (data point)
console.log(person.name2);
**//Array (is like an object in Javascript )**
1.
name ["name1" , "name2"]
name [1] // looping for index name2
name.length // the total number of arrays
name.push("name3") // adding one more name to the array
twoItems = name.slice(0, 2) // get the first two items from the array
lastName = name.pop () // returns and removes the last name in the array
2. nums = Array (1, 99, 23) ;
3.
let selectedColors = [ 'blue', 'red' ];
selectedColors[2]= 'green';
console.log(selectedColors.length);
*/ using .lengh on array counts the indexes and on a string count characters
to check we can use the consile.log(typeof(varName)) */
**Function_ Performaing a task
1.**
function greet(name="yosi", lastName) { //defualt name yosi
console.log('Hello ' + name + ' ' + lastName)
}
greet('yosi','yoc');
2. Function_2 Calculation a value
function square(number) {
return number * number; // return a value for the function and will not continue later in the function link
}
console.log(square(4));
// var kalob = greet ("kalob", 30)
3. Math
function doMath(num) {
num = Number(num);
if(num) {
// is a real number
var numNumber = (num + 100) / 4 ;
return newNumber;
} else {
// not a number
return false;
}
}
var customNum = doMath(50);
var customNum = doMath("yosi");
4. //get element id in function
function $(id) }
console.log("Id is:", id)
return document,getElementById(id)
}
var title = $("title") ;
title.innerText = "custom inner text"
5. // celcius to fahrenheit
function cTof(c_num) {
var fahre = (c_num * 1.8) + 32;
return fahre;
}
var zero = cToF(0); console.log(zero);
var twenty = cToF(20); console.log(twenty);
Type casting
var age ="30";
age = Number(age); // changing the string into number
age = String(age); // forces the number to be a string
= Boolian
= Array
NaN // Not a number
**Short Summary**
console.log("Name:" , name, profession)
(typeof(varName))
var name ="Yoi"
alert(name);
if(name.toLowerCase() == "zephyr" ) {
var name = prompt ("what is your name")
var upperSentence = sentance.toUpperCase ()
var nameBy = document.getElementById("nameId")
age = Number(age);
<h1 class="title"> hello world
<small> chnge me too</small>
</h1>
<script> var title = document.querySelector(".title")
title.innerText = "changed using a class" // change using a class
var small = document.querySelector("small")
small.innerText = "wow im Tiny text" change using small element
----
<ul>
<li> Number 1</li>
<li> Number 2</li>
<li> Number 3</li>
</ul>
<script>
var is = document.querySelectorAll("li") // select al lis into like an array
</script>
----------
<input type="text" style='padding:30px; font-size:30px;'
class="form-control" value="hello world Sblah blah">
<script>
var input = document.querySelector(".form-control")
console.log(input.value) ;
</script>
HTML Events:
1.
<body>
<button
class="btn btn-primary"
type="button"
onclick="clickMe()"
>
Click Me Butoon
</button>
<script>
var totalClicks = 0
function clickMe() {
totalClicks++; // adding 1
console.log("you clicked ths button", totalClicks, "times")
}
</script>
2.
<body>
<h1>Events</h1>
<input type="number" class="form-control" style='padding: 30px; font-size: 30px;
color: aquamarine; border: 2px salmon;'>
<br >
<button class="btn btn-primary" style="background-color: royalblue; color: skyblue; font-size: medium;" onclick="calculate()">
Add 100
</button>
<h1>The total is:<span>N/A</span></h1>
<script>
var num = 100;
function calculate() {
var input = document.querySelector(".form-control")
var value = Number(input.value)
var totalValue = value + num ;
var h1 = document.querySelectorAll("h1")[1]
var span = h1.querySelector("span")
span.innerText = totalValue
}
</script>
</body>
1. Anonymous functions:
var getName = function () { // using the var as function
return "yosi"
}
2. IIFE // Immediately Invoked Function Expression
// the function will run automatically
Var getName = (function() {
return document.querySelector(".js-customName").value
})();
b. (function LoadApp() { // run the function autometiclley
console.log("App is loading")
})();
3. this keyword // refers to this current function
function getPerson(name) {
this.name = name
this.profession = "thecher and dev"
return this
}
Var kalob = getPerson("Kalob")
4. Scope
global variable // can be used on our side the function
local variable // can use only inside the function
5. Hoisting // defining var in the hade scope of the function