Web technologies Tehnologii web.

Web technologies Tehnologii web

Course 07 JavaScript lect. eng. Rajmond JÁNÓ, PhD
fb.com/janorajmond Room E05

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. Importing an external stylesheet Defining styles in the <head> using <style> tags 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.

PE – Points (AVG/Groups)

LT01 – Points (AVG/Groups)

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

JavaScript is not Java!

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 is not Java!

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. 8 ECMAScript 2017 Added string padding. Added new Object properties. Added Async functions. Added Shared Memory. 9 ECMAScript 2018 Added rest / spread properties. Added Asynchronous iteration. Added Promise.finally(). Additions to RegExp.

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

Including JavaScript 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

Including JavaScript 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()

Output

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!)

So help me God, I will fail you for this!
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 Terminates a switch or a loop
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 try ... catch Implements error handling to a block of statements var, let Declares a variable

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 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 counting ≠ indexing

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

Write a function that removes element with index x from an array!
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 = 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 Operator Description ==
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 Operator Description &&
logical and || logical or ! logical not

Operators JavaScript bitwise operators Operator Description & 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 Methods
Defined as propertyName: value pairs Accessed as object.propertyName or object[“propertyName”] Methods Stored as function definitions Accessed as object.methodName()

Objects

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 execution speed

JavaScript

Bibliography https://www.w3schools.com/js/default.asp

Courses Available online at: Information for Students -> Courses -> Web Technologies

Web technologies Tehnologii web.

Similar presentations

Presentation on theme: "Web technologies Tehnologii web."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Web technologies Tehnologii web.

Similar presentations

Presentation on theme: "Web technologies Tehnologii web."— Presentation transcript:

Similar presentations

About project

Feedback