javascript - lemus.webs.upv.es · javascript 1. developer environment to work with javascript...
TRANSCRIPT
JavaScript
1
Developer environment to work with JavaScript
Options:
• Web browser (google)
• Web server (Apache)
• Node.js
2
• The simplest environment that you can use for JavaScript development is a browser.
• Modern browsers (Chrome, Firefox, Safari, and Edge) have a functionality called DeveloperTools. • Chrome, click on the menu in the upper-right corner,
More Tools | Developer Tools:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
3
Developer Tools: Web Browser
• Inside the console you can write JavaScript code
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
4
Developer environment: Web Browser
There are many options:
Install only the webserver
Install a package that includes a Web Server
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
5
Developer environment: Web Server
WINDOWS LINUX Mac
NGINX X X X
Hiawatha X X X
Tomcat X X X
Apache X X X
SomeWeb Servers
WINDOWS LINUX Mac
XAMPP X X X
MAMP X X
LAMP X
SomePackages that include aWeb Server
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Web Server (cont.)
Even Chrome has a web server!
It is an extension of Chrome, his name is Web Server for Chrome extensionIt can be be downloaded at http://bit.ly/2LRVyo3. After installing it, you can access it through the Chrome URL chrome://apps:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Web Server (cont.)
After installing it, you can access it through the Chrome URL chrome://apps:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Web Server (cont.)
Configuration:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Web Server (cont.)
Files stored in f:\MEAN_WEB_SERVER will be served by the Web Server
Example: Create the file f:\MEAN_WEB_SERVER \index.html And write the following code inside the file
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Web Server (cont.)
In a Web browser navigate to the URL: http://localhost:8889/
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Node.js http-server
Last but not least important, we can use Node.js http-serverFor that purpose, install the module: http-server
Inside a cmd console, execute the command: npm install -g http-server
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
Developer environment: Node.js http-server
Inside a cmd console Go to the directory MEAN_WEB_SERVERAnd execute the command: F:\MEAN_WEB_SERVER>http-server
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Arithmetic
operator
Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (remainder of a division operation)
++ Increment
-- Decrement
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Assignment operator
Description
= Assignment
+= Addition assignment (x += y) == (x = x + y)
-= Subtraction assignment (x -= y) == (x = x - y)
*= Multiplication assignment (x *= y) == (x = x * y)
/= Division assignment (x /= y) == (x = x / y)
%= Remainder assignment (x %= y) == (x = x % y)
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Assignment operator
Description
== Equal to
=== Equal to (both value and object type)
!= Not equal to
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Logical operator
Description
&& And
|| Or
! Not
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Bitwise operator
Description
& Equal to
| Equal to (both value and object type)
~ Not equal to
^ Greater than
<< Greater than or equal to
>> Less than
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
var num = 0;
num = num + 2;
num = num * 3;
num = num / 2;
num++;
num--;
num += 1;
num -= 2;
num *= 3;
num /= 2;
num %= 3;
console.log('num == 1 : ' + (num == 1));
console.log('num === 1 : ' + (num === 1));
console.log('num != 1 : ' + (num != 1));
console.log('num > 1 : ' + (num > 1));
console.log('num < 1 : ' + (num < 1));
console.log('num >= 1 : ' + (num >= 1));
console.log('num <= 1 : ' + (num <= 1));
console.log('true && false : ' + (true && false));
console.log('true || false : ' + (true || false));
console.log('!true : ' + (!true));
Developer environment
JavaScript Basic Concepts
JavaScript Basic Concepts
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
var num = 0;
num = num + 2;
num = num * 3;
num = num / 2;
num++;
num--;
num += 1;
num -= 2;
num *= 3;
num /= 2;
num %= 3;
console.log('num == 1 : ' + (num == 1));
console.log('num === 1 : ' + (num === 1));
console.log('num != 1 : ' + (num != 1));
console.log('num > 1 : ' + (num > 1));
console.log('num < 1 : ' + (num < 1));
console.log('num >= 1 : ' + (num >= 1));
console.log('num <= 1 : ' + (num <= 1));
console.log('true && false : ' + (true && false));
console.log('true || false : ' + (true || false));
console.log('!true : ' + (!true));
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
//Bitwise operationsconsole.log('5 & 1:', (5 & 1));console.log('5 | 1:', (5 | 1));console.log('~ 5:', (~5));console.log('5 ^ 1:', (5 ^ 1));console.log('5 << 1:', (5 << 1));console.log('5 >> 1:', (5 >> 1));
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
JavaScript Basic Concepts
var num=5;console.log('typeof num:', typeof num);console.log('typeof Packt:', typeof 'Packt');console.log('typeof true:', typeof true);console.log('typeof [1,2,3]:', typeof [1,2,3]);console.log('typeof {name:John}:', typeof{name:'John'});
Typeof operator returns the type of the variable or expression. Take a look at the following code:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
24
JavaScript Basic Concepts
1. Primitive data types: • Null
• Undefined
• String
• Number
• boolean,
• symbol
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
25
JavaScript Basic Concepts
According to the specification, there are two data types in JavaScript:
2. Derived data types/objects: • JavaScript objects,
including functions
• Arrays
• Regular expressions
var myObj = {name: 'John', age: 21};
delete myObj.age;
console.log(myObj); //outputs Object {name: "John"}
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
26
JavaScript Basic Concepts
JavaScript also supports the delete operator, which deletes a property from an object:
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
27
JavaScript Basic Concepts: Truthy and Falsy
In JavaScript, true and false are a little bit tricky. In most languages, the boolean values true and false represent the true/false results.
In JavaScript, a string such as ‘EDIBO’ evaluates to true.
Value Type Result
undefined false
null false
Boolean true is true and false is false
Number The result is false for +0, -0,
or NaN; otherwise, the
result is true
String The result is false if the
string is empty (length is 0);
otherwise, the result is
true (length >= 1)
Object true
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
28
Developer environment
• Web Server
• Node.js Http Server
JavaScript Basic Concepts
29