Web technologies-course 07.pptx

COURSE 07
JAVASCRIPT
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

PE – ANSWERS
Explain what a URL is.
Uniform Resource Locator – A string of characters
used to identify a resource on the internet via its
location
What is the difference between the HTTP and
HTTPS protocols?
As opposed to HTTP, HTTPS is a secured protocol
which encrypts information using Transport Layer
Security (TSL)

PE – ANSWERS
The “ipconfig -all” command outputs the
following response
• Is the device on a local or a public network?
Explain why!
• Does the device have a static or a dynamic IP
address? Explain why!

PE – ANSWERS
Private IP address: 192.168.x.x (16-bit block)
Dynamic IP address assigned by the DHCP server

PE – ANSWERS
Explain what “front-end” and “back-end” refer
to when talking about a web application.
Front-end: the design of the web page, the
user-interface, the look and feel of the
application
Back-end: the code behind the application that
implements its functionality

PE – ANSWERS
Explain the difference between block elements
and inline elements in HTML. Provide an
example for each element type.
Block elements take up all the width of the
screen (viewport). <div>
Inline elements take up only as much space as
they need (can be multiple in a single row).
<span>

PE – ANSWERS
Describe three ways of including CSS code in
your HTML webpage.
1. Importing an external stylesheet
2. Defining styles in the <head> using <style>
tags
3. Inlining styling attributes next to the element
tags

PE – ANSWERS
Explain the difference between an ID and a CSS
class in HTML/CSS.
IDs are unique: an element can have multiple
classes but only a single ID
IDs are more specific than classes: properties
defined in IDs will overwrite properties defined
in classes

PE – ANSWERS
Given the following HTML and CSS, explain what
element on the page will be colored red and
why. We presume that the CSS stylesheet is
correctly included in the HTML document.
No element will be colored
red because the div
references an ID while in
the CSS the selector
references a class.

PE – ANSWERS
Explain what SCSS/SASS is and what advantages
it has over traditional CSS.
SASS/SCSS (short for syntactically awesome style
sheets) is a style sheet language. It is
preprocessor scripting language that is
interpreted or compiled into CSS.
Advantages: easy variable handling, nesting to
reflect the structure of the HTML DOM, usage of
functions, conditional statements and code
reusing possibilities (mixins, extends).

PE – ANSWERS
Explain what Bootstrap 4 is and what it is used
for.
Bootstrap 4 is a front-end CSS framework
directed at responsive, mobile-first front-end
web development.
It contains CSS- and (optionally) JavaScript-
based design templates for typography, forms,
buttons, navigation and other interface
components.

C07 – JAVASCRIPT
• Introduction
• Including JavaScript
• Identifying HTML
elements
• Output
• Statements
• Keywords
• Comments
• Variables
• Arrays
• Operators
• Functions
• Variable scope
• Objects

JAVASCRIPT
• JavaScript often abbreviated as JS, is a high-
level, interpreted programming language
• JavaScript has curly-bracket syntax, dynamic
typing, prototype-based object-orientation,
and first-class functions
• Alongside HTML and CSS, JavaScript is one of
the core technologies of the World Wide Web

JAVASCRIPT
• JavaScript enables interactive web pages and is
an essential part of web applications
• Most websites use it and major web browsers
have a dedicated JavaScript engine to execute
it

JAVASCRIPT
• As a multi-paradigm language, JavaScript supports
event-driven, functional, and imperative (including
object-oriented and prototype-based)
programming styles
• It has APIs for working with text, arrays, dates,
regular expressions, and the DOM, but the
language itself does not include any I/O, such as
networking, storage, or graphics facilities
• It relies upon the host environment in which it is
embedded to provide these features

JAVASCRIPT
• JavaScript was invented by Brendan Eich in
1995, and became an ECMA standard in 1997
• ECMAScript is the official name of the
language
• From 2015 ECMAScript is named by year
(ECMAScript 2015)

JAVASCRIPT VERSIONS
Version Official Name Description
1
ECMAScript 1
(1997)
First Edition.
2
ECMAScript 2
(1998)
Editorial changes only.
3
ECMAScript 3
(1999)
Added Regular Expressions.
Added try/catch.
4 ECMAScript 4 Never released.
5 ECMAScript 5
(2009)
Added "strict mode".
Added JSON support.
Added String.trim().
Added Array.isArray().
Added Array Iteration Methods.
5.1
ECMAScript 5.1
(2011)
Editorial changes.
6 ECMAScript 2015
Added let and const.
Added default parameter values.
Added Array.find().
Added Array.findIndex().
7 ECMAScript 2016 Added exponential operator (**).
Added Array.prototype.includes.
Added string padding.

JAVASCRIPT
JavaScript can:
• Create/Change HTML content
• Change HTML attribute values
• Change HTML styles (CSS)
• Show/Hide HTML elements

INCLUDING JAVASCRIPT
• Your JavaScript code needs to be included in
your HTML document using the
<script></script> tag either:
• Locally inside the HTML document
Local script

• Your JavaScript code needs to be included in
your HTML document using the
<script></script> tag either:
• Locally inside the HTML document
• In a separate .js file, which is then imported in the
HTML document Imported
script

• JavaScript can be placed either in the <head> or
in the <body> of the HTML document
• External JavaScript advantages:
• It separates HTML and code
• It makes HTML and JavaScript easier to read and
maintain
• Cached JavaScript files can speed up page loads

DEFERRING SCRIPT LOADING
• JavaScript will usually manipulate the HTML DOM
• This is impossible if the script is loaded before
the DOM is
• You can tell the browser to only load the JS file,
after the DOM is ready by using the defer
attribute

IDENTIFYING ELEMENTS IN HTML
• Often, with JavaScript, you want to manipulate
HTML elements.
• To do so, you have to find the elements first.
There are several ways to do this:
• Finding HTML elements by id
• Finding HTML elements by tag name

IDENTIFYING ELEMENTS IN HTML
• Often, with JavaScript, you want to manipulate
HTML elements.
• To do so, you have to find the elements first.
There are several ways to do this:
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections

OUTPUT
JavaScript can "display" data in different ways:
• Writing into an HTML element, using innerHTML
• Writing into the HTML output using
document.write()
• Writing into an alert box, using window.alert()
• Writing into the browser console, using
console.log()

STATEMENTS
• A JavaScript program is a list of programming
statements
• JavaScript statements are composed of:
• Values
• Operators
• Expressions
• Keywords
• Comments

STATEMENTS
• JavaScript statements need to be separated by
a semicolon (;)
• When separated by semicolons, multiple
statements on one line are allowed (BUT
DON’T!)

STATEMENTS
• JavaScript ignores multiple spaces. You can
add white space to your script to make it more
readable
So help me God, I
will fail you for
this!

STATEMENTS
• JavaScript ignores line breaks
• For best readability, programmers often like to
avoid code lines longer than 80 characters.
• If a JavaScript statement does not fit on one
line, the best place to break it is after an
operator

STATEMENTS
• JavaScript statements can be grouped together
in code blocks, inside curly brackets {...}.
• The purpose of code blocks is to define
statements to be executed together
• One place you will find statements grouped
together in blocks, is in JavaScript functions

KEYWORDS
• JavaScript statements often start with a
keyword to identify the JavaScript action to be
performed

KEYWORDS
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger
Stops the execution of JavaScript, and calls (if available) the
debugging function
do ... while
Executes a block of statements, and repeats the block, while
a condition is true
for
Marks a block of statements to be executed, as long as a
condition is true
function Declares a function
if ... else
Marks a block of statements to be executed, depending on a
condition
return Exits a function
switch
Marks a block of statements to be executed, depending on
different cases

SYNTAX
• The JavaScript syntax defines two types of
values:
• Fixed values (literals)
• Variable values (variables)
• Fix values (numbers) are written with or
without decimals
• Strings can be written with single or double
quotes

SYNTAX
• JavaScript is case sensitive
• When joining multiple words together you can
use any style to your liking:
• Hyphens – not allowed in JavaScript
• Underscores
• camelCase/CamelCase

COMMENTS
• JavaScript allows both C style commenting:
• Single line comments
• Block comments

VARIABLES
• JavaScript variables are containers for storing
data values
• All JavaScript variables must be identified with
unique names
• These unique names are called identifiers
• Identifiers can be short names (like x and y) or
more descriptive names (age, sum,
totalVolume)
• Always use descriptive names! (This is something for
which I will also fail you, if you don’t!)

VARIABLES
The general rules for constructing names for
variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and
dollar signs
• Names must begin with a letter
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different
variables)
• Reserved words (JavaScript keywords) cannot be
used as names (duuuh!)

VARIABLES
• Creating a variable in JavaScript is called
"declaring" a variable.
• You declare a JavaScript variable with the var
keyword

VARIABLES
• You can declare many variables in one
statement
• Start the statement with var and separate the
variables by comma
• A declaration can span multiple lines

VARIABLES
• JavaScript is not strongly typed (types are
dynamic)
• The same variable can store any data type

VARIABLES
Data types in JavaScript:
• Number – represents both integer and floating-point
numbers
• Special values: Infinity, -Infinity, NaN
• String
• Boolean – true or false
• Null – null is not a “reference to a non-existing object”
or a “null pointer” like in some other languages, it’s just
a special value which represents “nothing”, “empty” or
“value unknown”
• Undefined – it means that the “value is not assigned”. If
a variable is declared but not assigned, it has the value
of undefined

VARIABLES
• The object type is special
• All other types are called “primitive” because their
values can contain only a single item (be it a string
or a number or whatever)
• In contrast, objects are used to store collections of
data and more complex entities
• The symbol type is used to create unique
identifiers for objects

VARIABLES
• If you re-declare a JavaScript variable, it will
not lose its value

VARIABLES
• In JavaScript you can declare variables whenever
you want, even after using them: this is because
JavaScript will “hoist” variables
• JavaScript will only hoist declarations, but not
initializations
• Good programming practices do not rely on this!

ARRAYS
• Arrays are used to store multiple values in a
single variable
• An array can hold many values under a single
name, and you can access the values by
referring to an index number

ARRAYS
Arrays can be created by
• Using an array literal
• Using the keyword new
Avoid it like the
plague!

ARRAYS
You access an array element by referring to the
index number
JavaScript is 0 indexed!

ARRAYS
You can access the full array by referring to its
name

ARRAYS
You can get the length of the array by using the
length property

ARRAYS
You can add elements to the array by
• Using the push() method
• Manually adding the last element

ARRAYS
You can remove
• The last element from the array by using the pop()
method
• The first element from the array by using the
shift() method
Write a function that removes
element with index x from an
array!

ARRAYS
You can
• Sort an array by using the sort() method
• Reverse an array by using the reverse() method
• Iterate over an array by using the forEach()
method
6, 11, 16, 21

OPERATORS
JavaScript arithmetic operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
%
Modulus (Division
Remainder)
++ Increment
-- Decrement

OPERATORS
JavaScript assignment operators
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

OPERATORS
JavaScript string operators
• The + operator can also be used to add
(concatenate) strings

OPERATORS
JavaScript comparison operators
== equal to
=== equal value and equal type
!= not equal
!==
not equal value or not equal
type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator

OPERATORS
JavaScript logical operators
&& logical and
|| logical or
! logical not

OPERATORS
JavaScript bitwise operators
& AND
| OR
~ NOT
^ XOR
<< Zero fill left shift
>> Signed right shift
>>> Zero fill right shift

OPERATORS
• Because JavaScript is not strongly typed,
adding strings and numbers is possible, which
can sometimes cause confusion
9
123
912
1254

FUNCTIONS
• A function is a block of code designed to
perform a particular task
• A function is executed when it is
invoked/called

FUNCTIONS
• A JavaScript function is defined with the function
keyword, followed by a name, followed by
parentheses ()
• Function names can contain letters, digits,
underscores, and dollar signs (same rules as
variables)
• The parentheses may include parameter names
separated by commas: (parameter1, parameter2,
...)
• The code to be executed, by the function, is placed
inside curly brackets: {}

FUNCTIONS
The code inside the function will execute when
"something" invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
• When JavaScript reaches a return statement, the
function will stop executing
• If the function was invoked from a statement, JavaScript
will "return" to execute the code after the invoking
statement
• If the function computes a return value, that value will
be “returned” to the caller

FUNCTIONS
• The () operator will invoke the function
• Accessing a function without () will return the
function definition instead of the function
result

VARIABLE SCOPE
In JavaScript there are two types of scope:
• Local scope
• Global scope

VARIABLE SCOPE
• Variables declared with the var keyword can
not have Block Scope
• Variables declared inside a block {} can be
accessed from outside the block

VARIABLE SCOPE
• Variables declared with the let keyword have
Block Scope
Global scope Block scope

OBJECTS
• Objects are variables that can contain
• Properties
• Defined as propertyName: value pairs
• Accessed as object.propertyName or
object[“propertyName”]
• Methods
• Stored as function definitions
• Accessed as object.methodName()

OBJECTS
The this keyword
• In a function definition, this refers to the
"owner" of the function
• In the example above, this is the student
object that "owns" the getAge function
• In other words, this.birthYear means the
birthYear property of this object

OBJECTS
• Do Not Declare Strings, Numbers, and
Booleans as Objects!
• When a JavaScript variable is declared with the
keyword "new", the variable is created as an
object
• Avoid String, Number, and Boolean objects,
they complicate your code and slow down

BIBLIOGRAPHY
• https://www.w3schools.com/js/default.asp
• https://www.w3schools.com/js/js_statements.
asp
• https://www.w3schools.com/js/js_syntax.asp
• https://www.w3schools.com/js/js_comments.
asp
• https://www.w3schools.com/js/js_variables.as
p
• https://www.w3schools.com/js/js_operators.a
sp
• https://www.w3schools.com/js/js_arithmetic.a

COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies

Web technologies-course 07.pptx

Web technologies-course 07.pptx

Recommended

Recommended

More Related Content

Similar to Web technologies-course 07.pptx

Similar to Web technologies-course 07.pptx (20)

More from Stefan Oprea

More from Stefan Oprea (20)

Recently uploaded

Recently uploaded (20)

Web technologies-course 07.pptx