0% found this document useful (0 votes)
6 views21 pages

JavaScript Basics: Syntax and Applications

about javascript indeep

Uploaded by

Abel Sisay
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views21 pages

JavaScript Basics: Syntax and Applications

about javascript indeep

Uploaded by

Abel Sisay
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Chapter Four

JAVASCRIPT
Introduction

• JavaScript is a lightweight, interpreted


programming language.
• Very easy to implement because it is integrated
with HTML.
• It is open and cross-platform.
• Great for developing front-end as well as back-end
softwares using different JavaScript based
frameworks like jQuery, React, Express, [Link] etc.
• It comes installed on every modern web browser
• Chrome, Firefox, Safari, …
• you really do not need any special environment setup.
• JavaScript engines were originally used only in web
browsers
• now extended to mobile app development, desktop
app development, and game development.
Application of JavaScript

• Some of the applications of JavaScript


• Client side validation
• Verifying any user inputs before submitting to server
• Manipulating HTML Pages
• Adding and deleting any html tags, Change its look and
feel..
• User Notifications
• Back-end Data Loading
- Retrieve data from server using Ajax
• Presentations
• creating presentations with website look and feel with libraries like
RevealJS, BespokeJS
• Server Applications
• Build fast and scalable network applications including
webservers with Node JS
JavaScript Syntax

• You can place the <script> tags, anywhere in your page.


• In <Head> is Recommended.
• Language attribute specifies what scripting language you are using.
Type also tells the same thing and recommended in recent version of
HTML
• function [Link] which writes a string or HTML (both)
into our HTML document.
• there is no main() function/method
JavaScript Syntax

• spaces, tabs, and newlines that appear in JavaScript


programs are ignored.
• Semicolons are Optional (if each statement is on separate
line).

• JavaScript is a
case-sensitive
language.

• Comments
Datatype

• Datatype - defines type of value and operation.


• JavaScript allows you to work with three primitive data types
• Numbers e.g. 123, 120.50, 123e5, 123e-5 etc.
− JavaScript does not make a distinction between integer
values and floating-point values.
− All numbers are represented as 64-bit floating-point values.
• Strings e.g “hello world" etc.
• You can use single or double quotes.
• Boolean e.g. true or false.
• JavaScript also defines two trivial data types,
• null and
• Undefined – a variable without a value
Datatype

• JavaScript supports a composite data type known as object.


• written with curly braces { }

• JavaScript arrays
• support numbered indexing
• are written with square brackets.
• Array items are separated by commas.
Identifiers and Reserved Words

• In JavaScript, the first character must be a letter, or an


underscore (_), or a dollar sign ($).
• Subsequent characters may be letters, digits, underscores, or
dollar signs.
• Reserved words (like JavaScript keywords) cannot be used as
names. abstract else instanceof switch do
boolean enum int synchronized double
break export interface this import
byte extends long throw in
case false native throws static
catch final new transient super
char finally null true with
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
Variables

• Variables are containers for storing data (values).


• There are 3 ways to declare a JavaScript variable: var, let,
const.

• After the declaration, the variable has no value ( undefined )


• To assign a value to the variable, use the equal sign.

• You can also assign a value to the variable when you declare
it.
• JS is untyped language. variable can hold a value of any data
type
Variables

• var
• can be re-declared and updated
• You can use the variable before it is declared (called
Hoisting)
• can NOT have block scope - Variables declared inside a { }
block can be accessed from outside the block

• let ( introduced in ES6 (2015) )


• can be updated but not re-declared
• must be Declared before use.
• have Block Scope - Variables declared inside a { } block
cannot be accessed from outside the block

• const ( also introduced in ES6 (2015) )


• Can not be updated and re-declared
• have Block Scope - Variables declared inside a { } block
cannot be accessed from outside the block
Operators

• Arithmetic Operators: +, -, *, /, %, **, ++, --


• Assignment Operators: =, +=, -=, /=, %=,
**=
• Comparision Operators: ==, ===, !=, !==, >,
>=, <, <=, ?
• Logical Operators: &&, ||, !
• Type Operators: typeof, instanceof
• Bitwise Operators: &, |, ~, ^, <<, >>, >>>
Operators

• + operator can also be used to add (concatenate) strings.

• Assignment operator += can also be used to concatenate


strings

• Adding a number and string, the result will be string.

• The order of the operation also matters


Operators

• JavaScript will try to convert strings to numbers in all numeric


operations.

• Trying to do arithmetic with a non-numeric string will result in


NaN

• Operator Precedence.
Conditional Statements

• Perform different actions for different decisions using


conditional statements
• If statement
• Switch statement
If Statements

• JavaScript supports the following forms of if..else statement −


• if statement

• if...else statement

• if...else if... statement.


switch Statements

• to perform a multiway branch


• especially when all of the branches depend on the value of a single
variable
Loops

• JavaScript supports different kinds of loops:


• for - loops through a block of code a number of times

• for/in - loops through the properties of an object


- one property from object is assigned to variablename
- this loop continues till all the properties of the object are
exhausted.
Loop …

• for/of - loops through the values of an iterable object


(iterable data structures such as Arrays, Strings, Maps, NodeLists)
Loop …

• while - loops through a block of code while a specified


condition is true

• do/while - also loops through a block of code while a specified


condition is true
Function

• a block of code designed to perform a particular task


• executed when "something" invokes it or calls it.
• Declaration always begins with keyword function,
• no return type
Example Code

Common questions

Powered by AI

The primary difference between 'let' and 'const' in JavaScript lies in their mutability and scope. Variables declared with 'let' can be updated but not redeclared within the same scope, and they have block scope; thus, they cannot be accessed outside the block in which they were defined. On the other hand, 'const' declarations also have block scope, but the variables cannot be updated or redeclared, making them immutable once they are assigned a value. These features affect how variables are managed within different parts of a program, with 'const' being suitable for fixed constants and 'let' for variables that require changes .

JavaScript engines initially served to interpret and execute JavaScript code within web browsers. However, their role has significantly expanded to include areas such as mobile app development, desktop app development, and game development. Engines like V8 (used in Node.js) execute JavaScript code outside of the browser, allowing for back-end server environments and standalone applications. This expansion enables developers to use JavaScript as a unified language across different platforms, maintaining consistency in both front-end and back-end development workflows .

JavaScript facilitates both front-end and back-end development through its integration in various frameworks. For front-end development, frameworks such as jQuery and React are commonly used, allowing developers to create interactive and dynamic web pages. For back-end development, Node.js is widely used to build fast and scalable network applications. These frameworks extend JavaScript's capabilities beyond simple scripts in web pages, making it possible to develop comprehensive software solutions for both client-side and server-side applications .

JavaScript being case-sensitive means that identifiers such as variable names, function names, and other keywords must be used with consistent capitalization throughout the code. This affects programming syntax as developers need to be precise with their usage of case, otherwise they may encounter unexpected errors. For example, a variable declared as 'myVariable' will be different from 'MyVariable' or 'MYVARIABLE', leading to potential bugs if not meticulously handled .

The 'switch' statement in JavaScript is used to simplify the code where multiple conditions need to be checked based on the value of a single variable. It allows for cleaner and more readable code compared to multiple 'if...else' statements. The switch statement evaluates the variable and runs the code block corresponding to the first matching case. If no cases match, the optional 'default' case is executed. This helps in reducing nested conditionals and makes the logic easier to understand and maintain .

Hoisting in JavaScript is a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means that variables declared with 'var' can be used before they are declared, as JavaScript treats the declaration as if it is at the beginning of the scope. However, only the declarations are hoisted, not the initializations. For instance, using a variable before it's declared will give 'undefined' if the variable was not initialized before use .

JavaScript's 'typeof' operator is a useful tool for debugging and type-checking because it allows developers to determine the type of a given variable during runtime. This helps in identifying and fixing type-related issues, ensuring that variables are correctly used according to their expected data type. For example, 'typeof' can return 'string', 'number', 'boolean', 'undefined', 'object', 'function', or 'symbol', aiding in runtime analysis of type-related errors and verifying that functions receive correctly typed parameters .

JavaScript's dynamic typing system implies that variables do not have a fixed type and can hold values of any data type. This flexibility allows developers to create variables without explicitly defining their type, making the language easier to use but also potentially leading to type-related errors that are harder to debug. For example, a variable can initially store a numeric value and later be reassigned a string. This characteristic requires careful planning and validation to ensure that any type-related issues are managed properly .

Composite data types in JavaScript, like arrays and objects, differ from primitive data types in that they can store collections of values and more complex entities. Primitive data types, such as numbers, strings, and booleans, hold single values. Arrays are ordered collections of values that can be indexed numerically, while objects are collections of key-value pairs where each property is a key associated with a value. This allows developers to create complex data structures and manipulate them efficiently .

JavaScript plays a crucial role in client-side validation by verifying user inputs before they are submitted to the server. This process enhances the user experience by providing immediate feedback on the correctness of their input, thus reducing the number of errors and improving overall efficiency. For example, JavaScript can check if all required fields are filled, ensure that email addresses have the correct format, or validate that a password meets specific criteria before form submission .

You might also like