Hướng dẫn how does javascript work in html? - javascript hoạt động như thế nào trong html?

Bạn đã bao giờ tự hỏi làm thế nào lập trình máy tính hoạt động, nhưng không làm bất cứ điều gì phức tạp hơn trên web hơn là tải ảnh lên Facebook?

Sau đó, bạn đang ở đúng nơi.

Đối với một người chưa bao giờ được mã hóa trước đây, khái niệm tạo một trang web từ đầu - bố cục, thiết kế và tất cả - có vẻ thực sự đáng sợ. Bạn có thể hình dung các sinh viên Harvard từ bộ phim, mạng xã hội, ngồi vào máy tính của họ với tai nghe khổng lồ trên và võng mã, và tự nghĩ, 'Tôi không bao giờ có thể làm điều đó.'

Trên thực tế, bạn có thể.

Bất cứ ai cũng có thể học cách viết mã, giống như bất cứ ai cũng có thể học một ngôn ngữ mới. Trên thực tế, lập trình giống như nói tiếng nước ngoài - đó chính xác là lý do tại sao chúng được gọi là ngôn ngữ lập trình. Mỗi người có các quy tắc và cú pháp riêng cần được học từng bước. Những quy tắc đó là cách để nói với máy tính của bạn phải làm gì. Cụ thể hơn, trong lập trình web, họ là cách để nói với trình duyệt của bạn phải làm gì.

Mục tiêu của bài đăng này là, bằng tiếng Anh đơn giản, dạy bạn những điều cơ bản của HTML, CSS và một trong những ngôn ngữ lập trình phổ biến nhất, JavaScript. Nhưng trước khi chúng ta bắt đầu, chúng ta hãy có ý tưởng về ngôn ngữ lập trình thực sự là gì.

Ngôn ngữ lập trình là gì?

Lập trình, hoặc mã hóa, giống như giải câu đố. Hãy xem xét một ngôn ngữ của con người, như tiếng Anh hoặc tiếng Pháp. Chúng tôi sử dụng các ngôn ngữ này để biến những suy nghĩ và ý tưởng thành hành động và hành vi. Trong lập trình, mục tiêu của câu đố hoàn toàn giống nhau - bạn chỉ đang lái những loại hành vi khác nhau và nguồn gốc của hành vi đó không phải là con người. Nó là một cái máy vi tính.

Một ngôn ngữ lập trình là cách chúng tôi giao tiếp với phần mềm. Những người sử dụng ngôn ngữ lập trình thường được gọi là lập trình viên hoặc nhà phát triển. Những điều chúng tôi nói phần mềm bằng ngôn ngữ lập trình có thể là làm cho một trang web nhìn theo một cách nhất định hoặc tạo một đối tượng trên trang di chuyển nếu người dùng con người thực hiện một hành động nhất định. programming language is our way of communicating with software. The people who use programming languages are often called programmers or developers. The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page move if the human user takes a certain action.

Lập trình phát triển web

Vì vậy, khi một nhà thiết kế web được đưa ra một mục tiêu cuối cùng như "Tạo một trang web có tiêu đề này, phông chữ này, những màu này, những hình ảnh này và một con kỳ lân hoạt hình đi trên màn hình khi người dùng nhấp vào nút này", công việc của nhà thiết kế web là lấy ý tưởng lớn đó và chia nó thành những mảnh nhỏ, sau đó dịch các phần này thành các hướng dẫn mà máy tính có thể hiểu - bao gồm đặt tất cả các hướng dẫn này theo đúng thứ tự hoặc cú pháp.

Mỗi trang trên web mà bạn truy cập được xây dựng bằng một chuỗi các hướng dẫn riêng biệt, từng trang. Trình duyệt của bạn (Chrome, Firefox, Safari, v.v.) là một diễn viên lớn trong việc dịch mã thành một thứ mà chúng ta có thể thấy trên màn hình của mình và thậm chí tương tác. Có thể dễ dàng quên mã đó mà không cần trình duyệt chỉ là một tệp văn bản - đó là khi bạn đặt tệp văn bản đó vào trình duyệt mà phép thuật xảy ra. Khi bạn mở một trang web, trình duyệt của bạn sẽ tìm thấy HTML và các ngôn ngữ lập trình khác liên quan và diễn giải nó.

HTML và CSS thực sự không phải là ngôn ngữ lập trình kỹ thuật; Chúng chỉ là cấu trúc trang và thông tin phong cách. Nhưng trước khi chuyển sang JavaScript và các ngôn ngữ thực sự khác, bạn cần biết những điều cơ bản của HTML và CSS, vì chúng ở phía trước của mỗi trang web và ứng dụng.

Đầu những năm 1990, HTML là ngôn ngữ duy nhất có sẵn trên web. Các nhà phát triển web đã phải mã hóa các trang web tĩnh, từng trang. Rất nhiều đã thay đổi kể từ đó: Bây giờ có nhiều ngôn ngữ lập trình máy tính có sẵn.

Trong bài đăng này, tôi sẽ nói về HTML, CSS và một trong những ngôn ngữ lập trình phổ biến nhất: JavaScript.

HTML, CSS, & JavaScript: Hướng dẫn

Một cái nhìn tổng quan:

• HTML cung cấp cấu trúc cơ bản của các trang web, được tăng cường và sửa đổi bởi các công nghệ khác như CSS và JavaScript.provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
• CSS được sử dụng để kiểm soát trình bày, định dạng và bố cục. is used to control presentation, formatting, and layout.
• JavaScript được sử dụng để kiểm soát hành vi của các yếu tố khác nhau. is used to control the behavior of different elements.

Bây giờ, chúng ta hãy xem riêng từng người để giúp bạn hiểu được vai trò mà mỗi người đóng trên một trang web và sau đó chúng ta sẽ đề cập đến cách chúng khớp với nhau. Hãy bắt đầu với ol 'html tốt.

HTML

HTML là cốt lõi của mỗi trang web, bất kể sự phức tạp của một trang web hoặc số lượng công nghệ liên quan. Đó là một kỹ năng thiết yếu cho bất kỳ chuyên gia web nào. Đó là điểm khởi đầu cho bất kỳ ai học cách tạo nội dung cho web. Và, may mắn cho chúng tôi, thật dễ dàng để học.

HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. "Ngôn ngữ đánh dấu" có nghĩa là, thay vì sử dụng ngôn ngữ lập trình để thực hiện các chức năng, HTML sử dụng các thẻ để xác định các loại nội dung khác nhau và các mục đích mà mỗi mục đích mà mỗi người phục vụ cho trang web.

Hãy để tôi chỉ cho bạn những gì tôi muốn nói. Hãy xem bài viết dưới đây. Nếu tôi yêu cầu bạn dán nhãn các loại nội dung trên trang, có lẽ bạn sẽ làm khá tốt: có tiêu đề ở trên cùng, sau đó là một tiêu đề phụ bên dưới nó, văn bản cơ thể và một số hình ảnh ở phía dưới là Một vài bit của văn bản.

Các ngôn ngữ đánh dấu hoạt động theo cách tương tự như bạn vừa làm khi bạn dán nhãn các loại nội dung đó, ngoại trừ chúng sử dụng mã để thực hiện - cụ thể, chúng sử dụng các thẻ HTML, còn được gọi là "các yếu tố". Các thẻ này có tên khá trực quan: thẻ tiêu đề, thẻ đoạn văn, thẻ hình ảnh, v.v.

Mỗi trang web được tạo thành từ một loạt các thẻ HTML này biểu thị từng loại nội dung trên trang. Mỗi loại nội dung trên trang được "gói" vào, tức là được bao quanh bởi các thẻ HTML.

Ví dụ, các từ bạn đang đọc ngay bây giờ là một phần của một đoạn văn. Nếu tôi mã hóa trang web này từ đầu (thay vì sử dụng trình soạn thảo WYSIWG trong CMS của HubSpot), tôi đã bắt đầu đoạn văn này với một thẻ đoạn mở đầu:. Phần "thẻ" được biểu thị bằng dấu ngoặc mở và chữ cái "P" cho máy tính rằng chúng tôi đang mở một đoạn thay vì một số loại nội dung khác.

Khi một thẻ đã được mở, tất cả các nội dung sau đây được coi là một phần của thẻ đó cho đến khi bạn "đóng" thẻ. Khi đoạn văn kết thúc, tôi đã đặt một thẻ đoạn kết:. Lưu ý rằng các thẻ đóng trông giống hệt như các thẻ mở, ngoại trừ có một dấu gạch chéo phía trước sau khung góc trái. Đây là một ví dụ:

Đây là một đoạn văn.

Sử dụng HTML, bạn có thể thêm các tiêu đề, đoạn định dạng, ngắt dòng điều khiển, lập danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên kết, xây dựng bảng, kiểm soát một số kiểu dáng và nhiều hơn nữa.

Để tìm hiểu thêm về mã hóa trong HTML, tôi khuyên bạn nên kiểm tra hướng dẫn của chúng tôi về HTML cơ bản và sử dụng các lớp và tài nguyên miễn phí trên Codecademy - nhưng bây giờ, chúng ta hãy chuyển sang CSS.

CSS

CSS là viết tắt của các bảng phong cách xếp tầng. Ngôn ngữ lập trình này chỉ ra cách các phần tử HTML của một trang web thực sự xuất hiện trên mặt trận của trang.

HTML vs CSS

HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên một trang web. CSS, mặt khác, giúp tạo kiểu cho nội dung này để nó xuất hiện với người dùng theo cách mà nó được dự định sẽ được nhìn thấy. Các ngôn ngữ này được giữ riêng biệt để đảm bảo các trang web được xây dựng chính xác trước khi chúng được định dạng lại.

Nếu HTML là vách thạch cao, CSS là sơn.

Trong khi HTML là cấu trúc cơ bản của trang web của bạn, CSS là thứ mang lại cho toàn bộ trang web của bạn phong cách của nó. Những màu sắc trơn tru, phông chữ thú vị và hình ảnh nền? Tất cả cảm ơn CSS. Ngôn ngữ này ảnh hưởng đến toàn bộ tâm trạng và giai điệu của một trang web, làm cho nó trở thành một công cụ cực kỳ mạnh mẽ - và một kỹ năng quan trọng để các nhà phát triển web học hỏi. Đó cũng là những gì cho phép các trang web thích ứng với các kích thước màn hình và loại thiết bị khác nhau.

Để cho bạn thấy CSS làm gì với một trang web, hãy xem hai ảnh chụp màn hình sau. Ảnh chụp màn hình đầu tiên là bài đăng trên blog của đồng nghiệp của tôi, nhưng được hiển thị trong HTML cơ bản và ảnh chụp màn hình thứ hai là cùng một bài đăng trên blog với HTML và CSS.

Ví dụ về HTML (không có CSS)

Lưu ý tất cả các nội dung vẫn còn đó, nhưng kiểu dáng trực quan thì không. Đây là những gì bạn có thể thấy nếu bảng kiểu không tải trên trang web, vì bất kỳ lý do gì. Bây giờ, đây là những gì cùng một trang web trông giống như CSS được thêm vào.

Ví dụ về HTML + CSS

Điều đó không đẹp hơn?

Nói một cách đơn giản, CSS là danh sách các quy tắc có thể gán các thuộc tính khác nhau cho các thẻ HTML, được chỉ định cho các thẻ đơn, nhiều thẻ, toàn bộ tài liệu hoặc nhiều tài liệu. Nó tồn tại bởi vì, khi các yếu tố thiết kế như phông chữ và màu sắc được phát triển, các nhà thiết kế web đã gặp rất nhiều khó khăn khi điều chỉnh HTML với các tính năng mới này.

Bạn thấy đấy, HTML, được phát triển trở lại vào năm 1990, không thực sự có ý định hiển thị bất kỳ thông tin định dạng vật lý nào. Ban đầu nó chỉ nhằm xác định nội dung cấu trúc của tài liệu, như các tiêu đề so với các đoạn văn. HTML vượt qua các tính năng thiết kế mới này và CSS đã được phát minh và phát hành vào năm 1996: tất cả các định dạng có thể được xóa khỏi các tài liệu HTML và được lưu trữ trong các tệp CSS (.CSS) riêng biệt.

Vì vậy, CSS chính xác là gì? Nó là viết tắt của các bảng phong cách xếp tầng - và "bảng phong cách" đề cập đến chính tài liệu này. Bao giờ trình duyệt web có một bảng kiểu mặc định, vì vậy mỗi trang web ngoài kia đều bị ảnh hưởng bởi ít nhất một bảng kiểu - bảng kiểu mặc định của bất kỳ trình duyệt nào mà khách truy cập trang web đang sử dụng - bất kể nhà thiết kế web có áp dụng bất kỳ kiểu nào không . Ví dụ: kiểu phông chữ mặc định của trình duyệt của tôi là thời gian New Roman, kích thước 12, vì vậy nếu tôi truy cập một trang web mà nhà thiết kế không áp dụng một bảng kiểu của riêng họ, tôi sẽ thấy trang web trong thời gian New Roman, Size 12 .

Rõ ràng, phần lớn các trang web tôi truy cập không sử dụng thời gian mới, kích thước 12 - đó là bởi vì các nhà thiết kế web đằng sau các trang đó bắt đầu với một bảng kiểu mặc định có kiểu phông chữ mặc định và sau đó chúng vượt qua trình duyệt của tôi Mặc định với CSS tùy chỉnh. Đó là nơi mà từ "xếp tầng" phát huy tác dụng. Hãy nghĩ về một thác nước - khi nước đổ xuống mùa thu, nó đánh vào tất cả các tảng đá trên đường xuống, nhưng chỉ có những tảng đá ở phía dưới ảnh hưởng đến nơi nó sẽ chảy. Theo cách tương tự, bảng kiểu được xác định cuối cùng thông báo cho trình duyệt của tôi về hướng dẫn nào được ưu tiên.

Để tìm hiểu các chi tiết cụ thể của mã hóa trong CSS, tôi sẽ chỉ cho bạn các lớp và tài nguyên miễn phí trên Codecademy. Nhưng bây giờ, hãy nói một chút về JavaScript.

JavaScript

JavaScript là một ngôn ngữ phức tạp hơn HTML hoặc CSS và nó không được phát hành ở dạng beta cho đến năm 1995. Ngày nay, JavaScript được hỗ trợ bởi tất cả các trình duyệt web hiện đại và được sử dụng trên hầu hết mọi trang web trên web để biết chức năng mạnh mẽ và phức tạp hơn.

JavaScript được sử dụng để làm gì?

JavaScript là ngôn ngữ lập trình dựa trên logic có thể được sử dụng để sửa đổi nội dung trang web và làm cho nó hoạt động theo những cách khác nhau để đáp ứng các hành động của người dùng. Sử dụng phổ biến cho JavaScript bao gồm các hộp xác nhận, gọi hành động và thêm danh tính mới vào thông tin hiện có.

Nói tóm lại, JavaScript là ngôn ngữ lập trình cho phép các nhà phát triển web thiết kế các trang web tương tác. Hầu hết các hành vi động bạn sẽ thấy trên một trang web là nhờ JavaScript, điều này làm tăng các điều khiển và hành vi mặc định của trình duyệt.

Tạo hộp xác nhận

Một ví dụ về JavaScript trong hành động là các hộp bật lên trên màn hình của bạn. Hãy suy nghĩ về lần cuối cùng bạn nhập thông tin của mình vào một biểu mẫu trực tuyến và một hộp xác nhận xuất hiện, yêu cầu bạn nhấn "OK" hoặc "Hủy" để tiến hành. Điều đó đã được thực hiện vì JavaScript - trong mã, bạn sẽ tìm thấy một câu lệnh "Nếu ... khác ..." cho máy tính làm một việc nếu người dùng nhấp vào "OK" và một điều khác nếu Người dùng nhấp vào "Hủy."

Kích hoạt CTA trượt trong

Một ví dụ khác về JavaScript trong hành động là một cuộc gọi hành động trượt (CTA), giống như những bài chúng tôi đặt trên các bài đăng trên blog của chúng tôi, xuất hiện ở phía dưới bên phải của màn hình khi bạn cuộn qua cuối thanh bên. Đây là những gì nó trông giống như:

Lưu trữ thông tin mới

JavaScript đặc biệt hữu ích cho việc gán danh tính mới cho các yếu tố trang web hiện có, theo các quyết định mà người dùng đưa ra khi truy cập trang. Ví dụ: giả sử bạn đang xây dựng một trang đích với biểu mẫu bạn muốn tạo khách hàng tiềm năng từ bằng cách nắm bắt thông tin về khách truy cập trang web. Bạn có thể có một "chuỗi" JavaScript dành riêng cho tên người dùng. Chuỗi đó có thể trông giống như thế này:

chức năng updateFirstName () {

Đặt FirstName = nhắc nhở ('Tên đầu tiên');

}

Sau đó, sau khi khách truy cập trang web nhập tên của mình - và bất kỳ thông tin nào khác bạn yêu cầu trên trang đích - và gửi biểu mẫu, hành động này cập nhật danh tính của phần tử "FirstName" ban đầu trong mã của bạn. Đây là cách bạn có thể cảm ơn khách truy cập trang web của bạn bằng tên trong JavaScript:

para.textContent = 'cảm ơn,' + FirstName + "! Bây giờ bạn có thể tải xuống ebook của mình."

Trong chuỗi JavaScript ở trên, phần tử "FirstName" đã được gán tên đầu tiên của khách truy cập trang web và do đó sẽ tạo ra tên thực tế của anh ấy hoặc cô ấy trên mặt trận của trang web. Đối với người dùng tên Kevin, câu sẽ trông như thế này:

Cảm ơn, Kevin! Bây giờ bạn có thể tải xuống ebook của bạn.

Bảo mật, trò chơi và các hiệu ứng đặc biệt

Các ứng dụng khác cho JavaScript bao gồm tạo mật khẩu bảo mật, biểu mẫu kiểm tra, trò chơi tương tác, hình ảnh động và hiệu ứng đặc biệt. Nó cũng được sử dụng để xây dựng các ứng dụng di động và tạo các ứng dụng dựa trên máy chủ. Bạn có thể thêm JavaScript vào tài liệu HTML bằng cách thêm các "tập lệnh" này hoặc các đoạn mã JavaScript, vào tiêu đề hoặc phần thân của tài liệu của bạn.

Nếu bạn muốn tìm hiểu thêm về JavaScript, Codecademy có các khóa học trực tuyến miễn phí mà bạn có thể tham gia.

Phần khó nhất của mã hóa là bắt đầu - nhưng một khi bạn tìm hiểu những điều cơ bản, sẽ dễ dàng hơn để học các ngôn ngữ lập trình nâng cao hơn. Và nếu bạn từng cảm thấy choáng ngợp, hãy đến Hackertyper.net và nhấn các phím ngẫu nhiên trên bàn phím của bạn.

Tin tôi đi, bạn sẽ cảm thấy tốt hơn.

Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 11 năm 2018 và đã được cập nhật về tính toàn diện.

JavaScript được sử dụng như thế nào trong HTML?

JavaScript hoạt động như thế nào trên trang web?

JavaScript hoạt động như thế nào trong các thuật ngữ đơn giản?