Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

Lecture 01 - HTMLJavaScript (1)

The document provides an overview of web application programming, focusing on HTML, CSS, and JavaScript. It covers key concepts such as the Document Object Model (DOM), styling with CSS, handling forms, and utilizing JavaScript for dynamic behavior. Additionally, it discusses Web APIs and includes references for further learning.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lecture 01 - HTMLJavaScript (1)

The document provides an overview of web application programming, focusing on HTML, CSS, and JavaScript. It covers key concepts such as the Document Object Model (DOM), styling with CSS, handling forms, and utilizing JavaScript for dynamic behavior. Additionally, it discusses Web APIs and includes references for further learning.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Chuyên đề Lập trình ứng dụng Web

HTML – CSS – JavaScript

1
Contents
◆ HTML DOM
◆ HTML Styles – CSS
◆ HTML Forms
◆ HTML Events
◆ HTML JavaScript
◆ Web APIs

2
References
◆ HTML: https://www.w3schools.com/html/

◆ CSS: https://www.w3schools.com/css/

◆ JavaScript: https://www.w3schools.com/js/

3
What is DOM?
◆ The Document Object Model (DOM)
 DOM represents a document as a tree structure, where
 Each node is an object representing a part of the document.
 Nodes:
• Document Node: The root node that represents the entire document.
• Element Node: Represents HTML or XML elements.
• Attribute Node: Represents attributes of HTML or XML elements.
• Text Node: Represents the text content inside elements

4
DOM tree

5
HTML Elements
◆ <tagname>Content goes here...</tagname>

◆ Nested HTML Elements

6
Accessing DOM Elements (1)
◆ When an HTML document is loaded into a web browser, it becomes
a document object.
◆ The document object is the root node of the HTML document.
◆ The document object is a property of the window object
 window.document or document
 let url = window.document.URL;
 let url = document.URL;

7
Accessing DOM Elements (2)
◆ Using JavaScript

8
What is CSS?
◆ Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
 color, font, the size of text, the spacing between elements,…
◆ Cascading
 a style applied to a parent element will also apply to all children elements
within the parent

9
Using CSS
◆ Inline - by using the style attribute inside HTML elements
 <h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

◆ Internal - by using a <style> element in the <head> section


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

◆ External - by using a <link> element to link to an external CSS file


 <link rel="stylesheet" href="styles.css">

10
HTML Forms
◆ An HTML form is used to collect user input.
◆ The user input is most often sent to a server for processing.

11
The <label> Element
◆ The for attribute of the <label> tag should be equal to the id
attribute of the <input> element to bind them together.

12
The form Attribute
◆ An input field located outside of the HTML form but still a part of
the form

13
The formaction Attribute
◆ An HTML form with two submit buttons, with different actions

14
The formmethod Attribute
◆ A form with two submit buttons with "get" and "post“ method

15
HTML DOM Events
◆ DOM Events allow JavaScript to add event listener or event
handlers to HTML elements.
 HTML onclick
• <button onclick="myFunction()">Click me</button>
 JavaScript click
• button.addEventListener("click", myFunction);

16
HTML JavaScript
◆ Why JavaScript?
 HTML to define the content of web pages
 CSS to specify the layout of web pages
 JavaScript to program the behavior of web pages
◆ Version of JavaScript
 The Original JavaScript ES1 ES2 ES3 (1997-1999)
 The First Main Revision ES5 (2009)
 The Second Revision ES6 (2015)
 The Yearly Additions (2016, 2017 ... 2021, 2022)

17
JavaScript Can Change HTML Styles (CSS)
◆ Using the HTML <script> tag to define a client-side script
(JavaScript).

18
JavaScript Functions
◆ JavaScript in <head>
◆ JavaScript in <body>

19
External JavaScript
◆ External file myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

◆ Using an external script


<script src="myScript.js"></script>
<script src="/js/myScript1.js"></script>
<script src="/js/myScript2.js"></script>

◆ External References
<script src="https://www.w3schools.com/js/myScript.js"></script>

20
The Window Object
◆ The window object represents an open window in a browser.
 Window alert()
 Window confirm()
 Window Console Object: access to the browser's debugging console.
window.console.error("You made a mistake");
console.error("You made a mistake");
console.log("Hello World!");

21
Web APIs
◆ API stands for Application Programming Interface.
◆ A Web API is an application programming interface for the Web.
◆ A Browser API can extend the functionality of a web browser.
◆ A Server API can extend the functionality of a web server.

22
Browser APIs
◆ All browsers have a set of built-in Web APIs to support complex
operations, and to help accessing data.
◆ For example, the Geolocation API can return the coordinates of
where the browser is located.

23
Third Party APIs
◆ Third party APIs are not built into your browser.
◆ To use these APIs, you will have to download the code from the
Web.
◆ Examples:
 YouTube API - Allows you to display videos on a web site.
 Twitter API - Allows you to display Tweets on a web site.
 Facebook API - Allows you to display Facebook info on a web site.

24
Exercise
◆ Xây dựng trang html có sử dụng
 External CSS
 Form và Events
 External JavaScript, sử dụng function để thay đổi CSS, thay đổi elements
của form
 console.log và console.error
 Web APIs (có sẵn trong trình duyệt) hoặc third-party APIs

25

You might also like