Important post
Lorem ipsum ...
Slide 1
Slide 1 text
Frontend development
crash course for testers
Pavels Jelisejevs, C.T.Co LTD
Slide 2
Slide 2 text
What happens when you
open “http://google.com"?
Slide 3
Slide 3 text
A lot, actually
• The browser contacts you DNS server to lookup the IP address
of the website using its domain name
• The browser downloads and interprets the HTML file returned
by the server
• The browser downloads external resources such as CSS and
JavaScript files or images
• The browser interprets the CSS files and renders the page
• The browser interprets the JavaScript files and provides
interaction with the web page
Slide 4
Slide 4 text
HTML
The structure of the web
Slide 5
Slide 5 text
What is HTML?
HTML is a markup language for describing web documents (web
pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
Slide 6
Slide 6 text
What are tags?
• An HTML document consists of tags
• Each tag defines an element, it’s default dehaviour and
appearance
• A tag can be paired to wrap some content, such as
• Each tag has a certain set of attributes -
Header
, or standalone -• Each tag has a certain set of attributes -
Slide 7
Slide 7 text
How does it look like?
Java School 2016
Welcome to Java school!
Java is not the only thing you'll learn here
Slide 8
Slide 8 text
Structure of the HTML file
• Each HTML file starts with a directive
• The body of an HTML element usually starts with the
tag with and inside:
// meta information goes here
// actual context goes here
Slide 9
Slide 9 text
HTML syntax is forgiving
• This means that you can write
or
, without a
closing tag etc.
• Browsers will try to do their best to display the broken syntax
correctly.
• Can doesn't mean should. Don't ever do this
or
,
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Basic elements: text with a link
Google will help you find more information on any element.
Slide 12
Slide 12 text
Basic elements: a list
- Element 1
- Element 2
- Element 1
- Element 2
Slide 13
Slide 13 text
Media content: images
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Semantics
• Each HTML tag has a special meaning
• There are specialized tags for particular UI elements: for
navigation bars, for sidebars and for headers.
• They should be used whenever possible instead of more generic
elements like
for headers.
• They should be used whenever possible instead of more generic
elements like or .
Slide 16
Slide 16 text
Why is semantics important?
Important post
Lorem ipsum ... Posted 2 days ago Semantic HTML allows robots to better distingquish your content. Consider two examples:Slide 17
Slide 17 text
How is it used?
• For SEO (search engine optimization) – semantic HTML can help
search engines better understand your content and achieve
better ranking
• Accessibility – semantic HTML used together with other ARIA
features can help users with limited abilities to access your
content
Slide 18
Slide 18 text
CSS
The style of the web
Slide 19
Slide 19 text
What is CSS?
• Cascading Style Sheets (CSS) are a stylesheet language used to
describe the presentation of a document written in HTML. CSS
describes how elements should be rendered on screen, on
paper, in speech, or on other media.
Slide 20
Slide 20 text
Example
An error ocurred!
.error {
color: red;
}
Slide 21
Slide 21 text
How to define styles
There are three ways you can define styles:
1. Inline, using the style attribute
2. Using the tag
3. Using a separate CSS file
<link rel="stylesheet" type="text/css" href="styles.css">
Slide 22
Slide 22 text
Syntax
A CSS block usually looks like this:
selector {
rule1: value1;
rule2: value2;
}
Slide 23
Slide 23 text
Selectors
HTML elsements can be referenced in various ways:
1. By element type: h1, article
2. By class: .login-form, .blog-post
3. By ID: #sign-up-button
4. By pseudo class: :first-child, :visited
Slide 24
Slide 24 text
Values
Values can have different
types:
• Keywords:
• auto, smaller
• Numeric:
• order: 2
• width: 50%
• Numeric with units:
• width: 300px;
• font-size: 1.5em;
• Colors:
• color: red;
• background: #EEEEEE;
• URLs:
• background: url('my-image.jpg')
• Compound:
• border: 1px solid red;
Slide 25
Slide 25 text
The notion of cascade
Element styles are define in different sources thus forming a cascade.
The sources are:
1. Browser default styles
2. User styles (browser settings)
3. Author's styles defined in the web page itself
Additionally, each elements inherits styles from the parent elements,
i.e. a link can inherit the font size from the paragraph text.
Slide 26
Slide 26 text
Inheritance
Elements inherit styles from the parent elements.
Be sure to visit Mozilla Developer Network for more information
p { font-size: 2em; color: black; } a { color: red; }Slide 27
Slide 27 text
Overriding styles
Styles can be overriden by a more specific selector
Black text
Red text
p { color: black; } p.highlight { color: red; }Slide 28
Slide 28 text
Responsive design
Responsive web design (RWD) is an approach to web
design aimed at crafting sites to provide an optimal viewing and
interaction experience across a wide range of devices (from
desktop computer monitors to mobile phones)
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Approaches to responsive design
• Define a list of form factors you are willing to support
• Keep the list short
• Choose your primary platform
• Choose a technique to implement responsiveness: media
queries, CSS/JS libraries etc.
Slide 32
Slide 32 text
JavaScript
Language of the web
Slide 33
Slide 33 text
What is JavaScript?
JavaScript (JS) is a lightweight, interpreted, programming
language with first-class functions.
Most well-known as the scripting language for Web pages, many
non-browser environments also use it, such as node.js.
JS is a flexible and multi-paradigm language.
Slide 34
Slide 34 text
Or ECMAScript?
ECMAScript (or ES) is a trademarked scripting-
language specification standardized by Ecma
International in ECMA-262 and ISO/IEC 16262.
Each version of ECMAScript defines a certain list of features to
be implemented by browsers or other platforms.
Slide 35
Slide 35 text
Mucho Importante
JavaScript is in no way related to
Java.
Slide 36
Slide 36 text
Data types
JavaScript has the following types:
• Numbers: 2, 3.4
• String: "Java"
• Boolean: true, false
• Array: [1, 2, 3]
• Object: { name: 'John' }
• Null
• Undefined
• Symbol
Slide 37
Slide 37 text
Variables
• Variables in JavaScript are declared using the var, let or const
keywords.
const PI = 3.14;
let names = ["Peter", "Winston"]
• Variables defined using let of const are block-scoped
• Variables defined using the var keyword are function-scoped
Slide 38
Slide 38 text
Control structures
• Most of the control structures are familiar to other languages,
such as Java:
if (true) {
for (var i = 0; i < 5; i++) {
console.log(i);
}
}
else {
// this will never happen
}
Slide 39
Slide 39 text
Functions
• Functions are first-class citizens in JavaScript
function greet(name) {
console.log('Hello ' + name);
}
greet('Jose');
var myGreetFunctions = greet;
Slide 40
Slide 40 text
More abount functions
• Passing functions as parameters is an important pattern in JavaScript
function getName() {
return 'Carl';
}
function greet(getNameCallback) {
console.log('Hello ' + getNameCallback());
}
greet(getName);
Slide 41
Slide 41 text
Objects
var user = {
name: 'John',
sayHello: function() {
console.log('Hi, I\'m ' + this.name);
}
}
user.sayHello(); // Hi, I'm John
Slide 42
Slide 42 text
Adding JavaScript to HTML
JavaScript can be included into a page in three ways:
• In an event attribute:
Say hello
• By writing it inside of the tag
<script>
alert('Hey!');
• By loading an external file with the same tag
<script src="scripts.js">
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
TypeScript
• A language that is compiled into JavaScript
• Strictly typed
• Includes additional features from the modern versions of ES
Slide 45
Slide 45 text
Popular frameworks
Some of the most popular frameworks at the time of writing are:
• Angular
• React
Slide 46
Slide 46 text
Angular 2
• A heavyweight, “batteries included” framework
• Provides most of the required development features out of the
box
• Written in TypeScript
Slide 47
Slide 47 text
React JS
• More of a view library then a framework
• Mixes template and logic into the JSX syntax
• Fast and lightweight
Slide 48
Slide 48 text
THE BROWSER
Slide 49
Slide 49 text
HTML, CSS and JavaScript engines
• Browsers have their own engines for parsing and interpreting
HTML, CSS and JavaScript.
• Each browser supports different features, meaning that your
application can behave differently in different browsers.
Slide 50
Slide 50 text
Web API’s
• Networking
• User interaction events: clicking, taping, scrolling etc.
• DOM (HTML and CSS) manipulation
• Location information
• Access to camera and microphone
• Mobile features, e.g. vibration
• Drawing using canvas or SVG
• Profiling: performance measurements and debugging
Slide 51
Slide 51 text
Security
• Secure connections
• Sandboxed environment: the JS executed on a website is
isolated from the host machine
• JS executed on a website cannot access data from other
websites
Slide 52
Slide 52 text
Persistance
Browsers provide mechanisms for persisting data:
• Cookies - used for storing small amounts of data (e.g. a
session ID)
• Local storage - used for storing larger amounts of data, e.g.
for offline applications. Available throw different tabs and
persists when closing the browser.
• Session storage - similar to local storage but limited to
particular tab and perishes after a tab has been closed.
Slide 53
Slide 53 text
Caching
• Browsers can cache results to improve user experience
• The developer can define caching lifetime for different
resources
Slide 54
Slide 54 text
Debug tools
Browsers provide powerful tools to debug your web applications.
For example, Chrome Developer Tools.
Slide 55
Slide 55 text
Thank you