Scribd
Upload
2 views

JavaScript Basics

The document provides an overview of JavaScript, its purpose, and basic coding concepts including variables, data types, and operators. It explains the use of code editors, the structure of JavaScript code, and introduces tasks for practical application. Additionally, it covers control flow with loops and conditionals, as well as functions and object manipulation.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

JavaScript Basics

The document provides an overview of JavaScript, its purpose, and basic coding concepts including variables, data types, and operators. It explains the use of code editors, the structure of JavaScript code, and introduces tasks for practical application. Additionally, it covers control flow with loops and conditionals, as well as functions and object manipulation.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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

You might also like