Web technologies-course 12.pptx

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

FINAL EXAM ANSWERS
1. Explain what the defer attribute is used for
when importing an external JavaScript file into
an HTML document.
It is used for executing the code in the JavaScript
file only after the whole HTML document has been
loaded and the DOM is available.

FINAL EXAM ANSWERS
2. Explain the difference between the == and
=== comparison operators.
The == operator only compares values while the
=== operator compares both values and data type.

FINAL EXAM ANSWERS
3. Explain the difference between declaring
variables using the var versus the let keywords.
The let keyword defines a variable with block
scope, while the var keyword defines a function
scope variable.

FINAL EXAM ANSWERS
4. Explain what “strict” mode is and how and why
it is used in JavaScript.
“strict” mode is used to write more secure
JavaScript code, because it changes previously
accepted “bad syntax” into real errors.

FINAL EXAM ANSWERS
5. What is the HTML Document Object Model
(DOM), by definition?
The W3C Document Object Model (DOM) is a
platform and language-neutral interface that
allows programs and scripts to dynamically access
and update the content, structure, and style of a
document.

FINAL EXAM ANSWERS
6. Enumerate at least 3 methods of finding
elements in the HTML DOM.
1. By ID
2. By tag name
3. By class name
4. By CSS selector
5. By HTML object collection

FINAL EXAM ANSWERS
7. Specify what are the .classList.add(),
.classList.remove() and .classList.toggle()
methods used for in JavaScript.
The methods are used for manipulating (i.e.:
adding, removing or toggling) CSS classes for
HTML elements via JavaScript.

FINAL EXAM ANSWERS
8. Specify 3 ways of adding events to HTML
elements.
1. Using the HTML event attribute
2. Assigning events using the DOM
3. Using the AddEventListener() method

FINAL EXAM ANSWERS
9. Explain the difference between event bubbling
and event capturing in JavaScript.
These refer to the order in which events are
executed for embedded elements. In case of event
bubbling the inner most element’s event is
handled first, then the outer one’s. While in case of
event capturing, the outermost element’s event is
handled first and then the inner one’s.

FINAL EXAM ANSWERS
10. Explain the difference between the
setTimeout(function, time) and
setInterval(function, time) methods.
The setTimeout() method will wait “time”
milliseconds and then call the “function” once. The
setInterval() method will call the “function” every
“time” milliseconds, until it is stopped.

FINAL EXAM ANSWERS
11. Explain what the JSON.parse() method is used
for.
It is used for converting JSON data, which is always
a string response from a server, to valid JavaScript
object.

FINAL EXAM ANSWERS
12. Explain what an AJAX call is used for in
JavaScript.
An AJAX call is used to either read data from a web
server or to send data to a web server and then
dynamically update the page without reloading it.

FINAL EXAM ANSWERS
13. Given the following code, find and specify at least 3 coding style guidelines which
are violated:
var myH1=document.getElementById("myH1");
var myCar={
make:"Ford",
model:"Focus",
year:"2006"
}
if (myCar.make<2010)
{
var myoutput="Dude, get a new car!"
myH1.innerHTML=myoutput;
};

FINAL EXAM ANSWERS
14. Specify what will the below script output to the
console and why.
"use strict";
my12 = 12;
my34 = 34;
my56 = "56";
console.log(my12 + my34);
console.log(my34 + my56);
console.log(my56 + my12 + my34);
Error: use of undeclared identifier
“my12”

FINAL EXAM ANSWERS
15. Given the code below, explain what the
mysteryFunction does.
function mysteryFunction(inArray) {
let arrayLength = inArray.length;
for (let i = 0; i < (arrayLength / 2); i++) {
var tempElem = inArray[i];
inArray[i] = inArray[arrayLength - i - 1];
inArray[arrayLength - i - 1] = tempElem;
}
return inArray;
}
console.log(mysteryFunction([1, 2, 3, 4, 5, 6]));
console.log(mysteryFunction(["a", "b", "c", "d", "e"]));
What will the console log after the two function calls?
6, 5, 4, 3, 2, 1 and e, d, c, b, a
The function reverses the
array passed as an
argument.

C12 – ANGULAR
• What is Angular?
• Prerequisites
• Creating an Angular project
• Angular project structure
• Building an Angular application – example
• Deploying an Angular application

WHAT IS ANGULAR?
• Angular (commonly referred to as "Angular 2+"
or "Angular v2 and above") is a TypeScript-
based open-source web application framework
led by the Angular Team at Google and by a
community of individuals and corporations
• Angular is a complete rewrite from the same
team that built AngularJS

PREREQUISITES
• In order to create, run and deploy Angular
applications you will need to install
• Node.js
• Angular CLI (Command Line Interface)

PREREQUISITES
• Node.js can be downloaded and installed from
https://nodejs.org/en/

PREREQUISITES
• You can check if you have Node.js installed by
typing “node –v” into a Command Prompt
window

PREREQUISITES
• Node.js (installed with the default options) will
also install NPM (Node Package Manager)

PREREQUISITES
• To install Angular CLI run the following
command
npm install –g @angular/cli

CREATING AN ANGULAR
PROJECT
• In order to create an Angular project, navigate
to the folder you want to save your project in
and run:
ng new ProjectName
• Then Select “Y” to Add Routing
• And SCSS for your stylesheet format

CREATING AN ANGULAR
PROJECT
• Now, to open the created project in Visual
Studio Code just type
code .
• Then change the directory to your app and to
run the project in the server, run the serve
command
ng serve –o

ANGULAR PROJECT STRUCTURE
End-to-end
testing
Node.js
module
Actual source
code

ANGULAR PROJECT STRUCTURE
Main component of
the app
Angular apps consist of
components
Main component
template
Main component
stylesheet

STRUCTURE OF A COMPONENT
Imports
Component properties
Component logic

BUILDING AN ANGULAR APP
• When creating a new Angular app, we are
provided with a “Demo app”
• This can be deleted, in order to build our own
app
• Delete the contents of the app template:
app.component.html
• Leave the <router-outlet> tags

• Let’s just test that our HTML template file is
working

• Let’s start by building a navigation bar

• Now, we shall use the Angular CLI to generate our
components
ng generate component ComponentName
ng g c ComponentName

• Now, we need to route our components

• Now, let’s start building our application

Click event
Click event handler
function
Data binding

Data we bound before
Click event handler
functions

• Now, let’s try two-way data binding

Data set
Data read

• Let’s do something interactive
• Display in a container “Go ahead, click the button!”
on startup
• But then, when the user clicked the button 5 or more
times, display “Stop clicking the damn button!” in
the same container

• With Angular we can also do style binding and
class binding

• However, if we want to change more than one
CSS property, it’s not the most efficient or the
prettiest of ways

• Still not pretty enough: can’t we just somehow
change the CSS class?

Pretty enough for you, Mr. “Let’s
change the code 1435 times just
to make it look nice without
adding and functionality
whatsoever?”

• Now, let’s fetch some data
• For that, we need to generate a service
ng generate service ServiceName
ng g s ServiceName

• Let’s just test our HTTP service

DEPLOYING AN ANGULAR APP
• When you are finished, you will need to deploy
your application into production
ng build --prod

BIBLIOGRAPHY
• https://angular.io/
• https://coursetro.com/posts/code/174/Angul
ar-8-Tutorial-&-Crash-Course

IF YOU’D LIKE TO MEET AGAIN…
• 4th year, 2nd semester – choose Elements of
Automated Testing (Elemente de Testare
Automata – ETA)

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

Web technologies-course 12.pptx

More Related Content

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

More from Stefan Oprea (20)

Recently uploaded (20)

Web technologies-course 12.pptx