Chapter 02 JavaScript Basics
Uploaded by
hazunirichmanChapter 02 JavaScript Basics
Uploaded by
hazunirichmanChapter 02
JavaScript
Basics
Contents
01 Introduction
02 Using the HTML Script Tags
03 Inline JavaScript tag
04 Using External JavaScript Files
05 Using JavaScript Comments
06 Understanding Variables
07 Understanding data types in JavaScript
01 Introduction
This chapter introduces front-end(browser-based) JavaScript Since
front-end JavaScript code is included in HTML documents, you need
to know how to tell Web browsers to run your scripts.
The most common way to set off a script is to use the HTML <script>
and </script> tags in your document. You can place your script tags
in either the head or the body section of an HTML document.
We will also learn basic data types and variables in JavaScript
02 Using the HTML Script Tags
Script tags are used to tell the browser where code for a scripting
language will begin and end in an HTML document.
There are three ways to use the <script> element: embed JavaScript code directly into
the page, using inline JavaScript or include JavaScript from an external file.
Script tag
Embed Script Inline Script External Script
To include Embedded JavaScript code, place JavaScript code inside the <script>
element directly, as follows:
<script> Begin of Script tag
[Link]("Hello world")
</script> End of Script tag
03 Inline JavaScript tag
Inline JavaScript refers to JavaScript code
embedded directly within HTML elements using
the onclick, onmouseover, or other event
attributes.
<button onclick="alert('Welcome')">Click
me</button>
In the above example, the Inline JavaScript in the
onclick attribute triggers the Alert() function
when the button is clicked
04 Using External
JavaScript Files
An external JavaScript file is a text file that contains
nothing but JavaScript code, and it is saved with the .js file
extension.
There are various ways to include external JavaScript into a
webpage
1) inside <head> tag: Ensures scripts are loaded before
rendering the page.
can cause page load delay if the JavaScript file
is large
May result in a slower initial page load time.
<script
2) Before Closing </body> Tag: allows the HTML content
src=“[Link]"></script>
to load before fetching and executing the script
How do I know when to add the script tag inside the head
section or in the body section?
In the past, JavaScript code was almost always placed inside
the head section, which kept it in a separate area from the
rest of the HTML code.
Modern coding practice is typically to place all JavaScript
code in an external .js file and to place the <script> tag(s)
right before the closing </body> tag.
This ensures that the HTML page has loaded in the browser
(since large scripts can delay the loading of the page if placed
elsewhere), giving the user a better experience.
05 Using JavaScript
Comments
You may need to make notes in your JavaScript code, such as
to describe what a line of code is supposed to do.
If you want to disable a line of the script for some reason
You can accomplish these tasks by using JavaScript comments.
You can insert comments that appear on one line or numerous
lines.
1) Inserting Comments on One Line: place a pair of two
forward slashes before the text of the comment
E.g // Your comment here
2) Adding Multiple-Line Comments: Start forward slash
flowed by asterisks at the beginning and end with asterisks
followed by forward slash
/* <------------------------ Start
Comment
E.g Your comment here
*/ <------------------------- End
06 Understanding
Variables
An identifier(Variable): are used to store data in
JavaScript. Variables are used to store reusable
values.
The values of the variables are allocated using the
assignment operator(“=”).
Basic rules to declare a variable in JavaScript
a) These are case-sensitive
b) Must begin with letter, underscore(“_”) or “$”
symbol
c) Can contain letters, numbers, underscore, or “$”
symbol
d) A variable name cannot be a reserved keyword.
Declaring variables
Using Var: statement declares variables with
function scope or globally.
Example var geek = "Hello, welcome";
using let keyword in JavaScript is used to make
variables that are scoped to the block they’re
declared in.
Once you’ve used let to define a variable, you cannot
declare it again within the same block.
Example: let variable_name = value;
Const keyword: is used to define variables that
cannot be changed once they’re assigned a value
Example: const x = 12;
07 Understanding Data
types in JavaScript
Data types in JavaScript define the type of data
that a variable can store.
JavaScript includes primitive and non-primitive
data types.
The primitive data types in JavaScript include
string, number, Boolean, undefined, null, and
symbol.
The non-primitive data type includes the object and
Arrays.
Primitive data types
Primitive data types are the built-in data types
provided by JavaScript.
A variable of primitive data type can contain only a
single value.
JavaScript supports the following primitive data types:
A. Number
B. String
C. Boolean
D. Undefined
E. Null
F. Symbol
A . Number
Number: data type in JavaScript can be used to
hold decimal values as well as values without
decimals.
let x = 250; let y = 40.5;
let sum=x+y;
[Link](x+"+"+y+"="+sum);
BigInt: can represent numbers greater than 253 -1
which helps to perform operations on large numbers.
The number is specified by writing ‘n’ at the end of
the value.
let bigNum = 123422222222222222222222222222222222222n
B. String
String are data type in JavaScript represents a
sequence of characters that are surrounded by
single or double quotes.
C. Boolean
Boolean: represents true or false values.
It’s used for logical operations, condition testing, and
variable assignments based on conditions.
Values like 0, NaN, empty strings, undefined, and null
are false.
non-empty strings, numbers other than 0, objects,
and arrays are true.
Example 1
let a1 = true;
let a2 = false;
Example 1
let a1 ="true";
D. Undefi ned
Undefined: a variable has been declared
but has not been assigned a value, or it has
been explicitly set to the
value `undefined`.
Example
let name;
[Link](name); // undefined
E. Null
null is an assignment value that represents no value
or no object.
•It is often used to indicate that a variable has no
value or that an object does not exist.
Example
let x=null;
let x=NaN;
[Link](x);
Note: null is not the same as NULL or
Null.
F. Symbol
Symbol are data type used to create objects
which will always be unique.
these objects can be created using Symbol
constructor.
Example:
let sym = Symbol("Hello")
[Link](typeof(sym));
Non-primitive data types
Non-primitive data types, also known as reference types,
are objects and derived data types.
They can store collections of values or more complex entities.
The two key non-primitive data types in JavaScript are Object
and array:
A) Object: a JavaScript is an entity having properties and
methods. Everything is an object in JavaScript.
Example:
Const car={type:"Fiat", model:"500", color:"white"};
[Link](car)
const person = new Object();
[Link] = “Ahmed";
[Link] = “Mohamed";
[Link] = 50;
[Link] = "blue";
Continue,…..
B) Array: is a data structure used to store multiple values in a
single variable.
It can hold various data types and allows for dynamic resizing.
Elements are accessed by their index, starting from 0.
Creating an Array using Array Literal:
let arrayName = [value1, value2, ...];
Creating an Array using JavaScript new Keyword (Array
Constructor)
let arrayName = new Array();
let courses=new Array("HTML",
"CSS","Javascript","React");
Practice
• Demonstrate the three ways to connect HTML with JavaScript — inline, embedded, and
external. Write a short practical example for each.
• Show how to write comments in JavaScript using both single-line and multi-line styles.
Provide examples of each.
• Using examples, explain the difference between let, var, and const based on redeclaration
and reassigning.
• Write a JavaScript program that declares two number variables — for example, a and
[Link] their difference and display the result in this format: 10-2=8
• Write a JavaScript program that declares two string variables — for example, firstName and
[Link] join them to display a sentence like:My best friend is Ayaan Warsame
• Write a JavaScript program that declares at least three variables with different values
— one should be 0, another an empty string "", and another a non-empty [Link] the
Boolean() function to check each variable’s truthy or falsy value and display the results
using [Link]().
• Create an object named car with the properties brand, model, and price.
Then, print each property value using [Link]().
Example: “The car model is Toyota Corolla and the price is 30000.”
• Create an array called students that holds three student objects.
Each student should have std_id, std_name, and std_tel.
Print only the names of all students using [Link]().
ANY
QUESTIONS
و ا ل س ال م ع ل ي ك م
ورحمة الله
وبركاته
