JavaScript Essentials in 1 Hour (2018)

QUICK COURSE: JAVASCRIPT ESSENTIALS IN 1 HOUR (2018)
JS
Ahmed Ibrahim
Full Stack Engineer

JAVASCRIPT OVERVIEW
 JavaScript is not Java.
 JavaScript is a programming language for the web.
 provide dynamic interactivity on websites.
 Add new HTML Elements and CSS Selectors to the Web pages.
 User interface enhancements such as menus and dialog boxes, animations, graphics, ……and
many more.
 It Works on The Client Side and The Server Side.

TOOLS
 Text Editors
(Visual Studio Code, Atom, Sublime Text, Notepad++)
 Online Editors
(plunkr, jsfiddle, jsbin, codepen)
 IDE
(Visual Studio, Aptana Studio, WebStorm, Netbeans)
 Browsers
(Chrome, Firefox, Opera, IE)

IMPORTANT
 Is Case Sensitive
( firstMessage != firstmessage )
( while not While or WHILE )
 camelCase
( camelCaseMethod )
 Semicolon ; Required: statements are on the same line. Example: let i = 1; i++ ;
Optional: After statements . Example: let i = 7; & let myName = “Ahmed”;
Rejected: after Curly Brackets . Example: if () { } & else { } & for () { } & while () { } & function
(arg) { }

INTERNAL & EXTERNAL JAVASCRIPT
Internal Scripts
<!DOCTYPE HTML>
<html>
<head>
<title> First Program </title>
</head>
<body>
<h1>First Heading</h1>
<script>
alert( “ Hi, I’m JavaScript! “ );
</script>
<p>First Paragraph </p>
</body>
</html>
External Scripts
<!DOCTYPE HTML>
<html>
<head>
<title> First Program </title>
</head>
<body>
<h1>First Heading</h1>
<p>First Paragraph </p>
<script src=“script.js” ></script>
</body>
</html>

COMMENTS
// This is one-line comment.
/*
This is a multiline comment.
*/

VARIABLES
 let
let myVariable = “Ahmed”;
console.log(myVariable); // ”Ahmed”
let myVariable = 4+3;
Console.log(myVariable); // 7
 const
const MY_VARIABLE = 8;
console.log(MY_VARIABLE); // 8

DATA TYPES
 String ( let myVariable = “Ahmed” ; )
 Number ( let myVariable = 7 ; )
 Boolean ( let myVariable = false; )
 Arrays ( let myArr = [1, true, “name”] )
 Objects ( let myObj = { firstName: “name”, age: 35 } )

LOOPS & CONDITIONAL STATEMENTS
o Conditional Statements
 Ternary Operator
 If
 switch
oLoops
 While
 For
 Do While

TERNARY OPERTATOR
let yourAge = 18;
let acceptedAge = (yourAge > 20) ? true : false;
console.log(acceptedAge);
// false

IF STATEMENT
let myVar = 4;
if (myVar < 4) {
console.log(“It’s less than Four”);
} else if (myVar > 4) {
console.log( “It’s Four”);
} else {
console.log( “It’s Four” );
}
// “It’s Four”

WHILE
let i = 1;
while (i < 4) {
console.log(i);
i++;
}
// 1, 2, 3

DO WHILE
let i = 1;
do {
console.log(i);
i++;
} while (i < 4);
// 1, 2, 3

FOR
for (let i = 0; i < 4; i++) {
console.log(i);
}
// 1, 2, 3

SWITCH
let x = 2;
switch (x) {
case 1:
console.log(“case 1”);
break;
case 2:
console.log( “case 2” );
break;
default:
console.log( “default case" );
}
// “case 2”

ARRAYS
let myArray = [1, 2, 3, 4];
console.log(myArray[0]) // 1
myArray.push(“Ahmed”);
Console.log(myArray) // [1, 2, 3, 4, “Ahmed”]
let removedItem = myArray.splice(pos, 1); // [2, 3, 4 , “Ahmed”]
 pop, push, shift, unshift, length, ………

OBJECTS
let newPerson = {
firstName: “Ahmed”,
lastName: “Ibrahim”,
address: “123”
}
console.log(newPerson.firstName); // “Ahmed”

FUNCTIONS
function addition(x, y) {
let result = x + y;
return result;
}
console.log(addition(2,3)); // 5
console.log(addition(7,1)); // 8

CLOSURES
 A closure is a function having access to the parent scope, even after the parent function has closed.
function newFunc() {
let name = “Ahmed”;
function display() {
console.log(name);
}
return display;
}
var myFunc = newFunc();
myFunc();

DOM (DOCUMENT OBJECT MODEL)
o DOM Methods
 document.getElementById()
 document.getElementsByTagName()
 document.getElementsByClassName()
 document.querySelectorAll()
 document.querySelector()
 addEventListener()
 setAttribute()
 getAttribute()

DOM (DOCUMENT OBJECT MODEL)
o EVENTS
 onmousemown occurs when a user presses a mouse button over an element.
 onclick occurs when the user clicks on an element
 onblur occurs when an object loses focus.
 onmouseover occurs when the pointer is moved onto an element
 onmouseout occurs when a user moves the mouse pointer out of an element
 onmousemove occurs when the pointer is moving while it is over an element.
 onfocus occurs when an element gets focus
 onload occurs when an object has loaded

REGULAR EXPRESSIONS
o FORMAT
 let RegEx = /patterns/modifiers;
 let reg1 = new RegExp("abc");
let reg2 = /abc/;
o CHARACTERS
 ^ Start of string.
 $ End of string.
 a* Zero or more of a.
 a+ One or more of a.
 a{2} Exactly 2 of a.
 a{2,} 2 or more of a.
 a{2,5} Between 2 and 5 of a.

REGULAR EXPRESSIONS
 d Any digit character.
 w An alphanumeric character (“word character”).
 s Any whitespace character (space, tab, newline, and similar).
 D A character that is not a digit.
 W A nonalphanumeric character.
 t Matches a horizontal tab.
 S A nonwhitespace character.
 0 Matches a NUL character.
 . Any character except for newline.

REGULAR EXPRESSIONS
o RegEx MODIFIERS
 /g Global matching
 /i Case insensitive
 /u Unicode; treat pattern as a sequence of Unicode code points
 /s Single line mode
 /m Multi line mode

REGULAR EXPRESSIONS METHODS
 search
 test
 replace
 exec
 split
 match

JavaScript Essentials in 1 Hour (2018)

More Related Content

What's hot (20)

Similar to JavaScript Essentials in 1 Hour (2018) (20)

Recently uploaded (20)

JavaScript Essentials in 1 Hour (2018)