Scribd
Upload
4 views

L02 - Frontend Basic

Uploaded by

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

L02 - Frontend Basic

Uploaded by

leanhtuan280704
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

9/3/2019

FRONTEND

Frontend
̵ Front-end web development is the practice of
converting data to graphical interface for user
to view and interact with data through digital
interaction using HTML, CSS and JavaScript.
̵ A front-end developer architects and develops
websites and applications using web
technologies (i.e., HTML, CSS, DOM, and
JavaScript), which run on the Open Web
Platform or act as compilation input for non-
web platform environments

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

1
9/3/2019

Frontend

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

HTML
̵ HTML: Hypertext Markup Language is the
standard markup language for documents
designed to be displayed in a web browser.
̵ Web browsers receive HTML documents from a
web server or from local storage and render
the documents into multimedia web pages.
̵ HTML is the backbone of any website
development process, without which a web
page doesn't exist.

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

2
9/3/2019

CSS
̵ Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation
of a document written in a markup language
like HTML.
̵ CSS is designed to enable the separation of
presentation and content, including layout,
colors, and fonts.

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

JavaScript
̵ JavaScript (JS) is a high-level, interpreted
scripting language that conforms to the
ECMAScript specification.
̵ JavaScript lets you add interactive features to
your Web sites, including dynamically updated
content, controlled multimedia, animated
images, and much more.

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

3
9/3/2019

HTML

08/2019 KHOA CNTT - NLU

HTML Tag
̵ HTML is a markup language that provides a
description of the structure/layout of your web
page.
̵ An HTML element is formed using a tag.
 EX:
<p> : tag is used to describe a paragraph
HTML element.
<h1> : Highest-level heading
<h6> : Lowest-level heading
<img> : An image

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

4
9/3/2019

HTML Tag
̵ These tags are enclosed within angle braces.
̵ HTML elements contain both opening and closing
tags to indicate where an element starts and ends.
 Opening tag: <tag name>
 Closing tag: </tag name>
 EX: <p> has its closing tag </p>
<body> tag has its closing tag </body>
<div> tag has its closing tag </div>
̵ However, not all of these elements require the end
tag. Some elements, the so-called void elements,
do not have an end tag.
 EX: <hr/> horizontal line
<br/> line break tag
9

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

Basic HTML File


̵ Basic HTML file to get a better understanding
of how to use markup to define the structure
of a web page.

10

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

10

5
9/3/2019

Basic HTML File


̵ The root element is html tag. Within this root
element there are multiple elements.
̵ <head> and <body> tag within the root
<html> element.

11

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

11

Basic HTML File


̵ The <head> tag contains supporting
information about the file, links to Javascript
files and CSS stylesheets.
̵ The <body> element contains the main
content of an HTML file, the information that is
rendered by your web browser.
̵ There can be only one <body> and <head>
tag within an HTML file, and most of the HTML
you write will exist within this element.

12

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

12

6
9/3/2019

HTML Attributes
̵ HTML attributes provide additional information
about an HTML element. Attributes can be
considered as properties of the element.
̵ An element may have a single attribute, many
attributes, or no attributes at all.

̵ EX:

13

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

13

Id and Class attribute


̵ The id and class attributes can be used to
identify specific HTML elements across your
HTML page.
̵ The id attribute give any element a unique
identifier.
̵ The class attribute is similar to the id attribute
in that it is used to identify specific elements.
̵ Id and Class can later be used for things like
applying specific styles with CSS or capturing
input with some Javascript code.
14

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

14

7
9/3/2019

Id attribute
̵ An id value should only be used for a single
element.
̵ An id value must not contain any whitespace
̵ A single element cannot have multiple id values

15

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

15

Class attribute
̵ The same class value can be used across
multiple elements
̵ An element can have multiple class values,
separated by whitespaces
̵ Ex:

16

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

16

8
9/3/2019

Basic tag
̵ Tag <a>: Hyperlinking
 connect to a HTML page or other web pages by
creating a hyperlink.
 Attribute href: A URL connect to web address.
 An absolute URL: URL have three main components:
• The Protocol: http://, https:// ftp://
• The Domain: Domain name of website
• The path: information direct to webpage
 A relative URL: provide less information than
absolute URLs and generally refer to pages on the
same domain.
 Ex:
17

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

17

Basic tag
̵ Block-level Elements
 Headings (<h1>-<h6>)
 Ordered and Unordered Lists (<ol>, <ul>)
 List Items (<li>)
 Paragraphs (<p>)
 Logical divisions ( <div> )

18

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

18

9
9/3/2019

Basic tag
̵ Headings tag: h1  h6
 <h1>: Highest-level heading
 <h6>: Lowest-level heading
 The HTML standard has five additional text heading
elements h2 h6
 You should use heading levels in structure of your
HTML pages, an h2 element should be used for a
header one level below an h1 element, an h3
element should be used a level below h2, and so
on.

19

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

19

Basic tag

20

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

20

10
9/3/2019

Basic tag

21

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

21

Basic tag
̵ Lists: a bulleted or numbered list in web page
content.
̵ Unordered Lists <ul> : a list begin a bulleted.
̵ Ordered Lists <ol>: a list begin a number.
̵ Attribute: type
 Ex: <ol type="I"> </ol>

22

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

22

11
9/3/2019

Basic tag
̵ Unordered Lists

23

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

23

Basic tag
̵ Order list

24

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

24

12
9/3/2019

Basic tag
̵ Block Elements: HTML tag can make full
width in web page, making a block around
content.
 Ex: <h1>-<h6>,<ol>, <ul>,<li>,<p>,<div>
̵ Inline Elements: HTML tag cannot make full
width. Inline Elements do not start a new line,
it’s part of the content in a block.
 Ex: <a>, <i>, <img>, <em>

25

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

25

Basic tag

26

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

26

13
9/3/2019

Basic tag

27

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

27

Basic tag
̵ Div tag <div>: defines a division or a section
for web page.
̵ Div tag is often used as a container for other
HTML elements.
̵ Div tag does render anything on web page, it’s
create a block and we can use style sheet to
format.

28

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

28

14
9/3/2019

Basic tag

29

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

29

Basic tag

30

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

30

15
9/3/2019

Basic tag
̵ Table tag <table>: defines an HTML table
with multi row and colume.
̵ The <tr> tag is used to create table rows.
̵ The <td>, <th> tag is used to create data
cells.

31

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

31

Basic tag
̵ Table Header, Body, and Footer
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.

32

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

32

16
9/3/2019

Basic tag

33

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

33

Basic tag

34

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

34

17
9/3/2019

HTML Forms
̵ HTML forms are how we receive user input on
our web pages.
̵ If you’ve ever visited a blog and left a
comment or used your credit card online to
purchase something, you have used HTML
forms to interact with the web page you were
visiting.
̵ Ex: when you visit a website and you must
login to access some function, You must
provide the username and password for the
website.
35

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

35

HTML Forms
̵ Input tag <input> defind some control allow
the user to input data.
̵ Input tag no need close tag.
̵ Label tag <label> using with input tag to make
label for every input tag.

36

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

36

18
9/3/2019

HTML Forms
̵ Attribute type is used to define a type of form
control.
̵ List of type

37

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

37

HTML Forms

38

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

38

19
9/3/2019

HTML Forms
̵ To input a text with single line, you need to
use input tag with type “text”.
̵ To input a text with multi line, you need to use
textarea tag <textarea>

39

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

39

HTML Forms

40

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

40

20
9/3/2019

HTML Forms
̵ A <button> element should be used whenever
you want to create a clickable button to
perform some action on the page.
 submit: submits form data to a server
 reset: resets all the data in the current form
 button: no default behavior.

41

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

41

HTML Forms
̵ <select> tag (with nested <option>) used to
create a drop-down selection of items that a
user can choose from.
̵ Including the selected attribute in an <option>
element will show that option by default.

42

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

42

21
9/3/2019

CSS

43

08/2019 KHOA CNTT - NLU

43

CSS
̵ CSS (Cascading Style Sheets) is a style sheet
language used for describing the presentation
of a document written in a markup language
̵ CSS describes how HTML elements are to
be displayed on screen, paper, or in other
media
̵ CSS saves a lot of work. It can control the
layout of multiple web pages all at once
̵ External stylesheets are stored in CSS files

44

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

44

22
9/3/2019

CSS
̵ CSS can be added to HTML elements in 3
ways:
 Inline - by using the style attribute in HTML
elements
 Internal - by using a <style> element in the
<head> section
 External - by using an external CSS file

45

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

45

CSS
<h1 style="color:blue;">This is a Blue Heading</h1>

<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

<head>
<link rel="stylesheet" href="styles.css">
</head>

46

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

46

23
9/3/2019

CSS Systax

̵ 3 type of selector
 Tag Selector
 Id Selector
 Class Selector

47

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

47

CSS
̵ Tag selector:
 The tag selector selects elements based on the tag
name.
 Ex: You can select all <p> elements on a page like
this
p {
text-align: center;
color: red;
}

48

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

48

24
9/3/2019

̵ Id selector:
 The id selector uses the id attribute of an HTML
element to select a specific element.
 The id of an element should be unique within a page,
so the id selector is used to select one unique
element!
 To select an element with a specific id, write a hash
(#) character, followed by the id of the element.
<p id="para1">This paragraph refers to two
classes.</p>

#para1 {
text-align: center;
49
color: red;
}
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

49

CSS
̵ Class selector:
 The class selector selects elements with a specific
class attribute.
 To select elements with a specific class, write a
period (.) character, followed by the name of the
class.

<p class="center">This paragraph refers to two


classes.</p>

.center {
text-align: center;
color: red;
} 50

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

50

25
9/3/2019

CSS
̵ Define multi selector:
h3, .red, #redElement{
color: red;
}
̵ Define child selector: apply exactly for some
selector.
#header #menu #item p{
color: red;
}

̵ Nested selector
#header #menu #item > p{
color: red; 51
}
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

51

HTML Box Model


̵ Your browser renders every HTML element as a
box, you can format all component of box.
Margin
Border
Padding

Content

52

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

52

26
9/3/2019

HTML Box Model


̵ The CSS box model is essentially a box that
wraps around every HTML element. It consists
of: margins, borders, padding, and the actual
content.
 Margin - Clears an area outside the border. The
margin is transparent
 Border - A border that goes around the padding
and content
 Padding - Clears an area around the content. The
padding is transparent
 Content - The content of the box, where text and
images appear
53

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

53

HTML Box Model

54

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

54

27
9/3/2019

HTML Box Model


̵ height and width:
 Use the height and width CSS properties to change
the height and width of an element’s content area.

55

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

55

HTML Box Model


̵ padding: to create spacing between an
element’s content area and border.
̵ The padding property is a shorthand property
for:
 padding-top
 padding-right
 padding-bottom
 padding-left

56

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

56

28
9/3/2019

HTML Box Model


̵ Padding property with four values:
 padding:20px 15px 10px 5px;
• Top padding is 20px
• Right padding is 15px
• Bottom padding is 10px
• Left padding is 5px
̵ Padding property with three values:
 padding:20px 15px 10px;
• Top padding is 20px
• Right and left padding are 15px
• Bottom padding is 10px

57

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

57

HTML Box Model


̵ Padding property with two values:
 padding:20px 15px;
• Top and bottom padding are 120px
• Right and left padding are 15px
̵ Padding property with one values:
 padding:20px;
• All four paddings are 20px

58

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

58

29
9/3/2019

HTML Box Model


̵ Margin: The margin property is very similar to
the padding property, except it allows you to
define the spacing around the outside of an
HTML element past the border.
̵ Margin with value auto: making a html element
position to center with outside element.

59

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

59

HTML Box Model

60

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

60

30
9/3/2019

HTML Box Model


̵ Border: border CSS property sets the border of
an element. The syntax for the border property
is as follows:
 border: width style color;
• Width: width of border.
• Style: can include things like dotted, groove, double, and
solid.
• Color: color value for border.

61

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

61

HTML Text Format


Color Color: colorcode; Format color for text content.
Font Size font-size: size; Set the size of the text.
Font Weight font-weight: type; The weight of a font.
font-family font-family: font name; The font for an element.
text-align text-align: alignment ; The horizontal alignment of text in an
element

62

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

62

31
9/3/2019

CSS Layout
̵ Safe study and presentation.

63

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

63

Bootstrap Framework
̵ Safe study and presentation.

64

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

64

32
9/3/2019

Font Awesome
̵ Safe study and presentation.

65

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

65

JAVASCRIPT

66

08/2019 KHOA CNTT - NLU

66

33
9/3/2019

Javascript
̵ Javascript is the programming language of
the web.
̵ Javascript allow access and control HTML
element in webpage.
̵ Javascript allows making dynamic webpage
from static webpage.
̵ One of the main reasons we use Javascript to
build interactivity is because it allows us to
manipulate the Document Object Model (or
DOM) for short.
67

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

67

Javascript
̵ Using Javascript, we can manipulate the DOM
to do things like:
 Modify existing HTML elements
 Modify attributes on HTML elements
 Add or modify the CSS associated with HTML
elements
 Add and delete HTML elements

68

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

68

34
9/3/2019

Variable
̵ The var keyword is used to declare a variable.
 Ex: var text=“new text”;
var button = document.querySelector('button’);
̵ Variable always has a data type associated
with it that tells the computer exactly how to
handle the data that it’s given. In Javascript,
the data’s type is automatically determined
when the code is executed
̵ You can you method console.log() to output
data to console webpage.
69

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

69

JS Operator
̵ Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Power Operator
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement 70

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

70

35
9/3/2019

JS Operator
̵ 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

71

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

71

JS Operator
̵ Comparison Operators
perator 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 72

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

72

36
9/3/2019

JS Operator
̵ Logical Operators

Operator Description
&& logical and
|| logical or
! logical not

73

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

73

JS Operator
̵ Bitwise Operators
perato Description Example Same as Result Decimal
r
& AND 5&1 0101 & 0001 0001 1
| OR 5|1 0101 | 0001 0101 5
~ NOT ~5 ~0101 1010 10
^ XOR 5^1 0101 ^ 0001 0100 4
<< Zero fill left shift 5 << 1 0101 << 1 1010 10
>> Signed right shift 5 >> 1 0101 >> 1 0010 2
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010 2

74

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

74

37
9/3/2019

JS Operator
̵ Logical Operators

Operator Description
&& logical and
|| logical or
! logical not

75

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

75

JS Condition
̵ Conditional statements are used to perform
different actions based on different conditions.
̵ Syntax

if (condition) {
// execute if the condition is true
}

if (condition) {
//execute if the condition is true
} else {
// execute if the condition is false
} 76

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

76

38
9/3/2019

JS Condition
̵ Syntax

if (condition1) {
//execute if condition1 is true
} else if (condition2) {
//execute if the condition1 is false and
condition2 is true
} else {
//execute if the condition1 is false and
condition2 is false
}

77

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

77

JS Switch
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

78

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

78

39
9/3/2019

JS For Loop
̵ For loop execute a block of code a number of
times.
̵ Syntax
for (for init; for condition; for update) {
// code block to be executed
}

̵ For Each: loops through the values of an


iterable objects (ex: array)
for (variable of iterable) {
// code block to be executed
} 79

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

79

JS While Loop
̵ While loop execute a block of code until
condition is false.
̵ Syntax
while (condition) {
// code block to be executed
}

80

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

80

40
9/3/2019

JS do while Loop
̵ Do while loop similar while loop but do while
loop will execute the code block once, before
checking condotion.
̵ Syntax
do {
// code block to be executed
}
while (condition);

81

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

81

JS Function (Method)
̵ Define:
function name(parameter1, parameter2, …) {
// code here
}

var name = function (parameter1, parameter2, …) {


// code here
}

82

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

82

41
9/3/2019

Data Structures: Arrays


̵ Arrays are used to store multiple values in a
single variable.
var phone = ["Apple", "Sam Sung", "Sony"];

̵ JS Arrays can store any valid data type.


var data = ["Tí", "Nguyễn Vannw", 20];

̵ JS Arrays don’t limit to storing data.

83

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

83

Arrays
̵ Declaration:
 Way 1: Use [] instead.
 Way 2: new Array().

var data = []; // Good


var data = new Array(); // Bad

̵ Access data: You access an array element


by referring to the index number. Array
indexes start with 0.
var cars = ["Saab", "Volvo", "BMW"];
var myCar = cars[2];
84

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

84

42
9/3/2019

Arrays
̵ Add data:
 Use the Array.push() method to add items to the
end of an array.
var data = [];
data.push("Lemon"); //or
data[1]="Apple";

85

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

85

Arrays
̵ Remove data:
 Method Array.pop() to remove the last item in the
array and returns the removed item.
 Method Array.shift() to remove the first item in the
array and returns the removed item.
 Array.unshift() adds an item to the beginning of an
array. Array.unshift() returns the new size of the
array.
var data = [];
data.push("Lemon"); //or
data[1]="Apple";
var item = data.shift();//remove Lemon, return lemon
var size = data.unshift();//add Lemon, return 2
86
var item1 = data.pop(); //remove Apple, return Apple
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

86

43
9/3/2019

Arrays
̵ Edit data:
 To edit data we use index num to accsess.
 Index number: start: 0; end: n-1.
var data = [];
data.push("Lemon"); //or
data[1]="Apple";
data[1]="Orange"; // change Apple  Orange

̵ Array size:
 Array.length will return the number of items
currently in the array.

87

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

87

Arrays
̵ Retrieve Arrays
var printArray = function(arrays){
for(var i = 0; i < arrays.length; i++) {
console.log(arrays[i]);
}
}
printArray(data);

var printArray = function(arrays){


for(var a of arrays){
console.log(a);
}
}
printArray(data);
88

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

88

44
9/3/2019

Arrays
̵ Print array or convert array to string
 The Array.toString() method will take an array
and convert it into a string, with items separated by
commas.
 The console.log(array) method will show all data
of array to brower console;

89

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

89

Data Structures: Object


̵ JS Object is a special data type that can
contain multiple data type.
̵ Data of JS Objcect is called properties.
̵ Define:
 We use “{}” to create Object.
 A properties of the object have 2 parts:
“name:value”
var person = {
firstName: "Tí",
lastName: "Nguyễn Văn",
age: 20,
class: "CNTT"
90
};
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

90

45
9/3/2019

Data Structures: Object


̵ Accessing Object Properties
 object.properties
 object[‘properties’]

var fName = person.lastName;


var lName = person["firstName"];

̵ Add or modify properties:


person["firstName"] = Teo" ;
person.score = 8.2;

91

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

91

Data Structures: Object


̵ Remove properties: using the delete keyword
to remove a properties.
delete person.score;

̵ Retrieve Arrays

for(var properties of person){


console.log(properties);// get properties name
console.log(persion[properties]);// get
//properties value
}

92

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

92

46
9/3/2019

JS HTML DOM
̵ Working with Element Nodes: Each element
on your HTML page has an associated element
node in the Document Object Model (DOM).
̵ The DOM can be accessed using Javascript
through the document object.
̵ document object behaves like any other
Javascript object, and has many different
properties and methods that are useful in
accessing nodes in the DOM.

93

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

93

JS HTML DOM

94

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

94

47
9/3/2019

JS HTML DOM
̵ The HTML DOM is a standard object model
and programming interface for HTML. It
defines:
 The HTML elements as objects
 The properties of all HTML elements
 The methods to access all HTML elements: add,
get, modify, remove.
 The events for all HTML elements

95

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

95

DOM Methods
̵ Access element
 document.querySelector(): return the first element
it finds with the selector provided. If not found
return null.
 document.getElementById(id): get element with an
id attribute.
 document.getElementsByTagName(tag): get
element with an html name tag.
 document.getElementsByClassName(class): get
element with class attribute.

96

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

96

48
9/3/2019

DOM Methods

var app = document. querySelector("#app");


var name = document.getElementById("name");
var table = document.getElementByTagName("table");
var title = document.getElementByClassName("title");

97

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

97

DOM Methods
̵ Create Elements:
document.createElement(element)
̵ Insert Elements:
Element.appendChild(element_node)

var h1 = document.createElement('h1');
h1.innerHTML = "A new HTML element!";

var content = document.querySelector('#content');


content.appendChild(h1);

98

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

98

49
9/3/2019

DOM Methods
̵ Remove Element: To remove an HTML
element, you must know the parent of the
element:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

var child = document.getElementById("p1");


99
child.parentNode.removeChild(child);
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

99

DOM Modifying Attributes


̵ Add, Remove, and View Element Attributes:
 Element.getAttributeNames()
 Element.getAttribute(name)
 Element.setAttribute(name, value)
 Element.removeAttribute(name)

var fName = person.lastName;


var lName = person["firstName"];
100

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

100

50
9/3/2019

JS Mouse Event
Event Description
onclick The event occurs when the user clicks on an element

oncontextmenu The event occurs when the user right-clicks on an element to open a context
menu
ondblclick The event occurs when the user double-clicks on an element

onmousedown The event occurs when the user presses a mouse button over an element

onmouseenter The event occurs when the pointer is moved onto an element

onmouseleave The event occurs when the pointer is moved out of an element

onmousemove The event occurs when the pointer is moving while it is over an element

onmouseout The event occurs when a user moves the mouse pointer out of an element, or
out of one of its children

onmouseover The event occurs when the pointer is moved onto an element, or onto one of
its children
101
onmouseup The event occurs when a user releases a mouse button over an element

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

101

Jquery
̵ jQuery is JavaScript library.
̵ The purpose of jQuery is to make it much
easier to use JavaScript on your website.
̵ The jQuery library contains the following
features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
102

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

102

51
9/3/2019

jQuery Syntax
̵ $(selector).action()
 “$”: character to access jQuery.
 $(selector): to access to selector maching.
 action(): method of jQuery.

$(this).show() - show the current element.


$("a").hide() - hides all <p> elements.
$(".item").hide() - hides all elements with class="item".
$("#item").hide() - hides the element with id="item".

103

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

103

jQuery Running
̵ To run jQuery we must reference to jQuery lib.
̵ 2 way to reference:
 jQuery CDN: include cdn link.
<script src="https://code.jquery.com/jquery-
3.4.1.min.js"></script>

 jQuery lib:
• Download lester version from jQuery homepage
https://jquery.com/download/.
• Extrax and link lib file to html page.

<script src="jquery-3.4.1.min.js"></script>
104

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

104

52
9/3/2019

jQuery Running
̵ Document ready event: all jQuery methods
must be declared inside document ready event
 Way 1:
$(document).ready(function(){
// jQuery methods
});

 Way 2:
$(function(){n
// jQuery methods
});
105

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

105

jQuery Selectors
Syntax Description

$("*") Selects all elements


$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first
<ul>
$("ul li:first-child") Selects the first <li> element of every <ul>

106

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

106

53
9/3/2019

jQuery Selectors
̵ Filtering Selectors:
 first(): return first element in all element selected.
 last(): return first element in all element selected.
 eq(n): return nth element in (n+1) element
selected.
 filter(): filter all element want to select.
 Not(): filter all element want to remove.

107

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

107

jQuery Selectors

108

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

108

54
9/3/2019

jQuery Selectors
Syntax Description

$("[href]") Selects all elements with an href attribute


$("a[target='_blan Selects all <a> elements with a target
k']") attribute value equal to "_blank"
$("a[target!='_blan Selects all <a> elements with a target
k']") attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input>
elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
109

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

109

jQuery event
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

̵ Ex:
$(“.btn").click(function(){
// action
});

110

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

110

55
9/3/2019

jQuery - HTML
̵ Get Content:
 text(): Get the text content of selected elements
 html(): Get the content of selected elements
(including HTML markup)
 val(): Get the value of form fields
 attr("attributeName"): Get value of html element
attribute.
<p id="test">This is some <b>bold</b> text in a
paragraph.</p>
---
$("#test").text()  "This is some bold text in a
paragraph. "
$("#test").html()  "This is some <b>bold</b> text in a 111
paragraph."
08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

111

jQuery - HTML
̵ Get Content:
 text(“text”): Set the text content of selected
elements
 html(“html”): Set the content of selected elements
(including HTML markup)
 val(“value”): Set the value of form fields
 attr(“attributeName”, “value”): Set value for html
element attribute.
$("#test").text("This is some bold text in a
paragraph. ")

$("#test").html("This is some <b>bold</b> text in a


paragraph.")
112

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

112

56
9/3/2019

jQuery - HTML
̵ Add Elements
 Append: Inserts content at the end of the selected
elements
 prepend(): Inserts content at the beginning of the
selected elements
 after(): Inserts content after the selected elements
 before(): Inserts content before the selected
elements
$("p").append(“Appended text.");
$("p").prepend(“Prepended text.");
$(“p").after(“Text after");
$(“p").before(“Text before");
113

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

113

jQuery - HTML
̵ Remove Elements
 remove(): Removes the selected element (and its
child elements)
 empty(): Removes the child elements from the
selected element

$("#content").remove();
$("#content").empty();

114

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

114

57
9/3/2019

jQuery
̵ Get, Set CSS Classes
 addClass(): Adds one or more classes to the
selected elements
 removeClass(): Removes one or more classes from
the selected elements
 toggleClass(): Toggles between adding/removing
classes from the selected elements

$("h1, h2, p").addClass("bg-success border");


$("h1, h2, p").removeClass("bg-success border");
$("h1, h2, p").toggleClass("bg-success border");

115

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

115

jQuery
̵ Get, Set CSS Classes
 css("propertyname"): return the value of a CSS
property
 css("propertyname","value"): set a CSS property
$("p").css("background-color");
$("p").css("background-color", "yellow");

116

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

116

58
9/3/2019

jQuery - HTML
̵ Dimensions

117

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

117

jQuery - HTML
 width(): set or get the width of an element
(without padding, border and margin).
 height(): set or get the height of an element
(without padding, border and margin).
 innerWidth(): get returns the width of an element
(includes padding)
 innerHeight(): get returns the width of an
element (includes padding)

118

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

118

59
9/3/2019

jQuery - HTML
 outerWidth(): get the width of an element
(includes padding and border)
 outerHeight(): get the height of an element
(includes padding and border)
 outerWidth(true): get the width of an element
(includes padding, border, and margin)
 outerHeight(true): get the height of an element
(includes padding, border, and margin)

119

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

119

jQuery - HTML
#div1 {
height: 100px;
width: 400px;
margin: 20px;
padding: 10px;
border: 13px solid blue;
background-color: lightblue;
}

120

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

120

60
9/3/2019

jQuery - Traversing
̵ HTML DOM is designed like a tree in data
structure. Every HTML elements has a parent
element and childrent element. Traversing is
understood as moving through each element
(parent and child) .

121

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

121

jQuery - Traversing
̵ Traversing method:
 parent(): returns a direct parent of this element.
 children(): returns all direct children of this
element.
 find(): returns descendant elements of the selected
element (search in all children).
 next(): return element next to this element.
 nextAll(): return all next element.
 prev() return element previous to this element.
 prevAll(): return all previous element.

122

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

122

61
9/3/2019

AJAX
̵ Safe study and presentation.

123

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

123

Datatable
̵ Safe study and presentation.

124

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

124

62
9/3/2019

Q&A

125

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 123

125

63

You might also like