JavaScript Basics
Submitted By : Dr.Fatma Al_Rubaie
Introduction
JavaScript was initially created to “make web pages alive”.
The programs in this language are called scripts. They can be written right in the HTML
and executed automatically as the page loads.
Scripts are provided and executed as a plain text. They don’t need a special preparation
or a compilation to run.
In this aspect, JavaScript is very different from another language called Java.
There are many languages that get “transpiled” to JavaScript and provide certain
features. It is recommended to take a look at them, at least briefly, after mastering
JavaScript.
Code editors
A code editor is the place where programmers spend most of their time.
There are two archetypes: IDE and lightweight editors. Many people feel comfortable
choosing one tool of each type.
IDE: The term IDE (Integrated Development Environment) means a powerful editor with many
features that usually operates on a “whole project.” As the name suggests, that’s not just an
editor, but a full-scale “development environment.” for example : webstorm, visual studio
code and NetBeans.
“Lightweight editors” are not as powerful as IDEs, but they’re fast, elegant and simple. For
example : Notepad++ and Sublime text
Start Coding
Press F12, if you're on Mac, press cmd+opt+J .
JavaScript programs can be inserted in any part of an HTML document with the
help of the <script> tag.
Code structure
Statements : are syntax constructs and commands that perform actions.
Semicolons : may be omitted in most cases when a line break exists.
Comments : As time goes on, the program becomes more and more complex. It becomes
necessary to add comments which describe what happens and why
The modern mode, "use strict"
The directive looks like a string: "use strict” or ‘use strict’ When it is located on the top of the
script, then the whole script works the “modern” way.
Variables
A Variable is a “named storage” for data.
To create a variable in JavaScript, we need to use the a let keyword.
In older scripts you may also find another keyword: var instead of let
the dollar sign '$‘and the underscore '_‘can also be used in names. They are regular symbols, just
like letters, without any special meaning.
Constants
To declare a constant (unchanging) variable, one can use const intead of let.
Variables should be named in a way that allows us to easily understand what’s inside.
Tasks
Declare two variables : admin and name.
Assign the value “John” to name.
Copy the value from name to admin.
Show the value of admin using alert.
You have 3 minutes
Data Types
A variable in JavaScript can contain any data. A variable can at one moment be a string and
later receive a numeric value:
The number type serves both for integer and floating point numbers.
A string in JavaScript must be quoted.
Data Types(cont. ..)
The boolean type has only two values: true and false.
The special null value does not belong to any type of those described above.
The special Undefined stands apart. It makes a type of its own, just like null
All other types are called “primitive”, because their values can contain only a single thing (be it
a string or a number or whatever).
The symbol type is used to create unique identifiers for objectsز
The typeof operator returns the type of the argument.
Tasks
What is the output of the script?
You have 3
mintues
Type Conversions
String conversion happens when we need the string form of a value.
Numeric conversion happens in mathematical functions and expressions automatically.
Type Conversions (cont.)
Boolean conversion is the simplest one.
Tasks
What are results of these expressions?
You have 5
minutes
Operators
Terms unary and binary .
Strings Concatenations.
Operators(cont. …)
Numeric conversions.
Assignments.
Operators(cont. …)
Reminder %.
Exponentiation
Increment/decrement.
Operators(cont.)
Bitwise operators.
Tasks
What are the final values of all variables a, b, c and d after the code below?
You have 2 minutes
Comparisons
Many comparison operators we know from maths:
Tasks
What will be the result for expressions?
You have 5
minutes
Interaction :alert, promote, confirm
Alert.
Promote : Function accepts two arguments
Confirm .
Task
Create a web-page that asks for a name and outputs it.
You have 2 minutes
Conditional Operator :’if’ , ‘?’
Loops
The while loop.
The do…..while loop.
Loops (cont.)
The for loop.
Task
What is the last value alerted by this code? Why?
You have 2
minutes
The switch statement
The switch has one or more blocks and optional default.
Task
You have 5
minutes
Write the code using if..else which would correspond to the following switch :
Functions and arrows
Task
You have
2 minutes
Replace Function Expressions with arrow functions in the code:
Operating destructing
Spread operator.
Operating destructing
Destructing.
Objects
