Introduction to JavaScript

Basic Syntax, Conditions and Loops

SoftUni Team
Technical Trainers
Software University
https://softuni.bg
1
Table of Contents
1. Introduction and IDE
2. JavaScript Syntax
3. Conditional Statements
4. Loops
 While-Loop
 For-Loop
5. Debugging and Troubleshooting

2
Have a Question?

sli.do
#fund-js
3
 Introduction to IDE
Development Environments for JS
Chrome Web Browser
Developer Console: [F12]

5
Firefox Web Browser
Developer Console: [Ctrl] + [Shift] + [i]

6
Node.js
What is Node.js?
 Server-side JavaScript runtime
 Chrome V8 JavaScript engine
 NPM package manager
 Install node packages

7
Install the Latest Node.js

8
Using Visual Studio Code
 Visual Studio Code is powerful text editor for JavaScript and other
projects
 In order to create your first project:

9
Configurations
 Set up ECMAScript 6 and Node.js
 ECMAScript6 is a standard for JavaScript
 Node is environment for JavaScript

10
JavaScript Syntax
 The JavaScript syntax is similar to C#, Java and PHP
 Operators, Variables, Conditional statements, loops,
functions, arrays, objects and classes
Declare a
variable with let let a = 5;
let b = 10;
if (b > a) { Body of the
Conditional console.log(b); conditional statement
statement
}

11
Functions
 In order to solve different problems, we are going to use
functions and the input will come as parameters
 A function is block of code, that executes when called
declaration parameters

function solve (num1, num2) {

//some logic
}

solve(2, 3); calling the function

12
Problem: Multiply Number by Two
 Write a function that receives a number and prints as result
that number multiplied by two

Input Output
2 4

function solve (num) {

console.log(num * 2);
}
solve(2);

13
Comparison Operators

Operator Notation in JS
Equal value ==
Equal value and type ===
Not equal value !=
Not equal value/type !==
Greater than >
Greater than or Equal >=
Less than <
Less than or Equal <=

14
 If (a > b)

Conditional Statements
Implementing Control-Flow Logic
What is Conditional Statement
The if-else statement:
 Do action depending on condition
let a = 5;
if (a >= 5) { If the condition is met,
console.log(a); the code will execute
}

 You can chain conditions

else {
Continue on the next condition,
console.log('no');
} if the first is not met

16
Problem: Excellent Grade
 Write a function that receives a single number and checks if
the grade is excellent or not
 If it is, print "Excellent", otherwise print
"Not excellent" function solve(grade){
if (grade >= 5.50) {
Input Output //TODO
} else {
5.50 Excellent //TODO
4.35 Not excellent }
}

17
 for
while

Loops
 Code Block Repetition
What Are Loops
The for loop:
 Repeats until the condition is evaluated
for (let i = 1; i <= 5; i++){ Incrementation in
console.log(i)
} the condition

The while loop:

 Does the same, but has different structure
let i = 1
while (i <= 5) {
Incrementation
console.log(i) outside the
i++ condition
} 19
Problem: Numbers from 1 to 5
 Create a function that prints all the numbers from 1 to 5
(inclusive) each on a separate line

Output
function solve () {
1
for (let i = 1; i <= 5; i++) {
2 //TODO: print
3 }
4 }
5

20
Problem: Numbers from N to 1
 Write a function that receives a number and prints the
numbers from N to 1. Try using a while loop

Input Output function solve(n) {

while(/*TODO*/) {
5 5 console.log(n);
4 n--;
3 }
2 }
1 solve(5);

21
Debugging the Code
Debugging the Code
 The process of debugging application includes:
 Spotting an error
 Finding the lines of code that cause the error
 Fixing the error in the code
 Testing to check if the error is gone
and no new errors are introduced
 Iterative and continuous process

23
Debugging in Visual Studio Code
 Visual Studio Code has
a built-in debugger
 It provides:
 Breakpoints
 Ability to trace the
code execution
 Ability to inspect
variables at runtime

24
Using the Debugger in Visual Studio Code

 Start without Debugger: [Ctrl+F5]

 Start with Debugger: [F5]
 Toggle a breakpoint: [F9]
 Trace step by step: [F10]
 Force step into: [F11]

25
Debugging in WebStorm
 WebStorm has a built-in
debugger
 It provides:
 Breakpoints
 Ability to trace the code
execution
 Ability to inspect
variables at runtime

26
Using the Debugger in WebStorm
 Start without Debugger: [Shift+F10]
 Toggle a breakpoint: [Shift+F9]
 Trace step by step: [F7]
 Force step into: [Alt+Shift+f7]
 Using the Local
 Conditional breakpoints
 Enter debug mode after exception
27
Live Exercises
Summary

▪ Declare
… variables with 'let'
▪ Use
… if-else statements to check for
 conditions
…
▪ Use loops to avoid repeating code
▪ Use the debugger to check for mistakes
in the code

29
Questions?

© SoftUni – https://softuni.bg. Copyrighted document. Unauthorized copy, reproduction or use is not permitted.
Trainings @ Software University (SoftUni)
 Software University – High-Quality Education,
Profession and Job for Software Developers
 softuni.bg
 Software University Foundation
 softuni.foundation
 Software University @ Facebook
 facebook.com/SoftwareUniversity
 Software University Forums
 forum.softuni.bg
 3
License

 This course (slides, examples, demos, exercises, homework,

documents, videos and other assets) is copyrighted content
 Unauthorized copy, reproduction or use is illegal
 © SoftUni – https://about.softuni.bg/
 © Software University – https://softuni.bg

32