• Tidak ada hasil yang ditemukan

CÁC KHÁI NIỆM CƠ BẢN: HTML + CSS + JAVASCRIPT

N/A
N/A
17. Bùi Bảo Long

Academic year: 2023

Membagikan "CÁC KHÁI NIỆM CƠ BẢN: HTML + CSS + JAVASCRIPT"

Copied!
117
0
0

Teks penuh

Nó là mô hình quản lý các đối tượng thẻ HTML trong tài liệu HTML theo cấu trúc cây dựa trên mối quan hệ cha-con giữa thẻ HTML và nội dung của thẻ HTML. DOM sẽ khởi tạo từng đối tượng HTML với nội dung và thuộc tính của nó thành ĐỐI TƯỢNG, cho phép Javascript dễ dàng thực hiện các thao tác tác động đến nội dung, thành phần và thuộc tính của từng ĐỐI TƯỢNG, cụ thể là DOM. Các bước cơ bản mà trình duyệt thực hiện để xây dựng một trang (vẽ một trang trên màn hình).

Trong khi trình duyệt đang xây dựng DOM, nó gặp một thẻ liên kết trong phần tiêu đề dẫn đến tệp CSS bên ngoài có tên là theme.css. Tương tự như HTML, công cụ phải chuyển đổi tất cả CSS thành thứ mà trình duyệt có thể xử lý, đó là CSSOM. Khi tính toán tập kiểu cuối cùng cho từng đối tượng trên trang, trình duyệt sẽ bắt đầu với quy tắc áp dụng toàn cục nhất cho nút đó (ví dụ: nếu nó là phần tử con của phần tử nội dung thì tất cả các kiểu nội dung sẽ được áp dụng) và tinh chỉnh đệ quy các kiểu được tính toán bằng cách áp dụng các quy tắc cụ thể hơn.

Nếu span là phần tử con của phần tử p, thì nội dung của nó sẽ bị ẩn vì nó có kiểu cụ thể hơn được áp dụng cho nó (trong trường hợp này là display: . none). Mỗi trình duyệt cung cấp một bộ kiểu tiêu chuẩn, được gọi là kiểu tác nhân người dùng. Đây là những gì chúng tôi sẽ thấy nếu chúng tôi không cung cấp các kiểu cụ thể.

Bắt đầu từ gốc của cây DOM, nó sẽ đi qua mọi nút hiển thị. Một số nút có thể bị ẩn (ví dụ: thẻ script, meta, v.v.) hoặc bị bỏ qua vì chúng không được phản ánh trong kết quả hiển thị. Ví dụ: nút span trong ví dụ trên sẽ không xuất hiện trong cây kết xuất vì chế độ xem kiểu: không đã được đặt.

Đối với mỗi nút hiển thị, trình duyệt sẽ tìm các quy tắc CSSOM thích hợp và liên kết chúng lại với nhau rồi áp dụng chúng. Trình duyệt sẽ hiển thị các nút hiển thị với nội dung và kiểu dáng phù hợp. Cây kết xuất về cơ bản kết hợp DOM và CSSOM để tạo ra một bản đồ hoàn chỉnh về cách trang thực sự sẽ được trình bày và tạo kiểu.

Render/Hiển thị

Javascript là ngôn ngữ kịch bản phía máy khách được thêm vào HTML để cho phép lập trình một trang web để giao tiếp và xử lý thông tin. Bởi vì việc thực hiện và thực hiện các mục được lập trình diễn ra hoàn toàn trên thiết bị (client) của người dùng. Vì là ngôn ngữ lập trình nên chúng ta có thể thao tác với nội dung HTML như thêm, xóa và chỉnh sửa các thành phần HTML.

Xử lý thông tin điện toán và giao tiếp với người dùng thông qua các sự kiện cũng như thao tác chuột và bàn phím.

DANH SÁCH CHIA NHÓM DOM

CÁCH SỬ DỤNG

DOM HTML

DOM CSS

Viết mã JS vào một tệp riêng có tên có phần mở rộng *.js và chèn mã đó vào HTML thông qua các thẻ. Viết mã JS ngắn bên trong một thuộc tính sự kiện (sẽ nói thêm về điều này sau). Lúc này khối lệnh cũng đóng vai trò như một bước (gồm nhiều bước nhỏ).

Một câu lệnh được nhận dạng nếu nó kết thúc bằng ; ví dụ: cảnh báo(“Xin chào thế giới”);. Nhóm nhiều câu lệnh thành một khối bằng cách đặt các câu lệnh trong cặp dấu ngoặc kép. Biến là thành phần dùng để lưu trữ các giá trị dữ liệu mà chúng ta có thể thay đổi giá trị trong quá trình sử dụng.

JS DOM FORM VALUE : Cách thao tác với dữ liệu của object trong DOM về FORM

No1. JS DOM SELECTOR

No2.1 JS DOM CONTENT  Reading

No2.2 JS DOM CONTENT  Writing

No3.1 JS DOM ATTRIBUTES  Reading

No3.2 JS DOM ATTRIBUTES  Writing

No4.1 JS DOM CSS Understanding

No4.2 JS DOM CSS Reading

No4.3 JS DOM CSS Writing

No5.1 JS DOM FORM VALUE Reading

No5.2 JS DOM FORM VALUE Writing

TRA CỨU JS DOM CSS

OOP là viết tắt của Object Oriented Programming, chúng ta gọi là “Lập trình hướng đối tượng”, nó là mô hình lập trình trong đó chúng ta tạo ra các đối tượng, đối tượng giống như “nhân viên” của một công ty, mỗi đối tượng có những đặc điểm và khả năng khác nhau, ở mức độ cao của các đối tượng sẽ có quyền quản lý, ra lệnh cho các đối tượng thuộc quyền quản lý của mình, tập hợp tất cả lại với nhau, điều phối các hoạt động cho sự vận hành của xã hội.Công ty là chương trình, nhân viên là đối tượng, đặc điểm của đối tượng được gọi là thuộc tính, năng lực. của các đối tượng được gọi là phương thức Trong JS, các biến có thuộc tính hoặc phương thức được gọi chung là biến đối tượng.

Nhu cầu trao đổi dữ liệu giữa các nền tảng và công nghệ khác nhau ngày càng tăng. Tại thời điểm này, XML trở nên cồng kềnh và đè nặng lên dữ liệu do cấu trúc thẻ của nó. Điều này dẫn đến nhu cầu tạo ra một kiểu dữ liệu mới có tên JSON nhằm giải quyết vấn đề trao đổi dữ liệu giữa các nền tảng và giảm dung lượng lưu trữ dữ liệu khi trao đổi.

JSON là viết tắt của Ký hiệu đối tượng Javascript, một bộ quy tắc để biểu diễn và mô tả dữ liệu trong một chuỗi lớn, thống nhất, được gọi chung là chuỗi JSON. Nhiều dữ liệu có thể được chứa trong JSON, được phân tách bằng dấu phẩy. Trong một dữ liệu, giá trị của một thuộc tính có thể lấy một trong các kiểu dữ liệu sau: giá trị chuỗi, giá trị số, mảng (giá trị của một phần tử của mảng cũng có nguyên tắc tương tự), JSON khác.

Chuỗi JSON là dữ liệu dùng để trao đổi giữa các nền tảng, bản thân nó cũng chỉ là một chuỗi như bao chuỗi khác. Các biến JSON trong Javascript là các đối tượng tương đương để làm việc với chuỗi JSON. Khi nhận được một chuỗi JSON, chúng ta có thể sử dụng JSON.parse() để tạo một đối tượng để làm việc.

JSON_obj.name = "Họ và Tên Mới" ; // truy cập thuộc tính JSON theo tên thuộc tính và thay đổi giá trị var JSON_str_2 = JSON.stringify(JSON_obj); // tạo chuỗi JSON từ đối tượng JSON. Tạo một biểu mẫu dữ liệu (nếu cần) và gọi biến form_data để gửi với Yêu cầu var form_data = new FormData();. Sử dụng lệnh .append(key, value) để thêm giá trị và tên của nó ở dạng đã tạo form_data.append("username" , "dangvanlel"); đặt

Khi cần thêm (hoặc thay đổi) dữ liệu tiêu đề yêu cầu, bạn có thể sử dụng lệnh sau để thêm xhr. Thông báo trạng thái HTTP được chia thành 5 nhóm giá trị tương ứng với 5 loại kết quả phản hồi khác nhau.

Gambar

Hình ảnh: W3SCHOOL

Referensi

Dokumen terkait