Bắt đầu sử dụng Javascript – cách bắt đầu javascript

Do các mô tả và ví dụ đơn giản nhưng chi tiết, bạn sẽ có cơ hội biết tất cả những gì bạn cần về tập lệnh, tập lệnh bên ngoài, bảng điều khiển JavaScript.

Bạn đang xem : cách khởi động javascript

Viết chương trình JavaScript đầu tiên của bạn

HTML không thể thực hiện phép toán, nó không thể tìm ra liệu ai đó đã điền đúng vào biểu mẫu hay chưa. HTML chỉ cho phép mọi người đọc văn bản, xem video, xem ảnh và nhấp vào liên kết. Bạn cần JavaScript để thêm thông tin vào các trang web của mình để chúng có thể trả lời khách truy cập trang web của bạn. Vì vậy, JavaScript cho phép bạn làm cho trang web của mình hấp dẫn, hiệu quả và hữu ích hơn.

JavaScript phức tạp hơn HTML hoặc CSS, mục tiêu chính của cuốn sách này là giúp bạn suy nghĩ giống một lập trình viên hơn. Chương trình JavaScript có loại ký hiệu ({} [];, ()! =) Và nhiều từ không quen thuộc (var, null, else if). Có thể nói, học một ngôn ngữ lập trình cũng giống như học một ngôn ngữ khác. Bạn cần học từ mới và hiểu cách ghép chúng lại với nhau.

Giới thiệu về Chương trình Máy tính?

Thêm JavaScript vào một trang web có nghĩa là bạn đang viết một chương trình máy tính.
Nhiều chương trình JavaScript đơn giản hơn nhiều so với các chương trình bạn sử dụng để đọc email, xây dựng trang web. Nhưng ngay cả khi các chương trình JavaScript, các tập lệnh cũng đơn giản hơn và ngắn hơn và chia sẻ nhiều thuộc tính giống như các chương trình phức tạp hơn.

Nếu bạn muốn hiển thị thông báo chào mừng bằng tên của khách truy cập trang web:
“Chào mừng, John Doe!”, Bạn cần thực hiện một số điều sau:

  • Hỏi tên của khách truy cập;
  • Nhận câu trả lời của khách truy cập;
  • In thông báo trên trang web.

Khi bạn muốn tạo một chương trình JavaScript, bạn phải xác định các bước cần thiết để đạt được mục tiêu của mình. Sau khi biết các bước, bạn sẽ dịch ý tưởng của mình thành mã lập trình – các từ và ký tự giúp trình duyệt web hoạt động theo cách bạn muốn.

Cách thêm JavaScript vào trang

Các trình duyệt web có thể hiểu HTML và CSS và chuyển đổi các ngôn ngữ đó thành hiển thị trực quan trên màn hình. Trình duyệt web yêu cầu HTML, vì vậy bạn phải hướng dẫn rõ ràng cho trình duyệt biết khi nào JavaScript xuất hiện bằng cách sử dụng thẻ & lt; script & gt;.

Sau khi mở bảng điều khiển ưa thích của bạn (như Node.js), bạn chỉ cần đính kèm tập lệnh vào trang web. Để liên kết Javascript với trang HTML, bạn cần sử dụng & lt; script & gt; phần tử, thẻ nào giúp chúng ta chèn các chương trình Javascript vào bất kỳ phần nào của tài liệu HTML. Ví dụ:

 

& lt;

html

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Trước tập lệnh ...

& lt ; /

p

& gt;

& lt;

script

& gt;

alert (

'Hello, world!'

);

& lt; /

script

& gt;

& lt;

p

& gt;

... Sau tập lệnh.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Hãy thảo luận về việc mở và đóng & lt; script & gt; các thẻ. Nếu bạn muốn thêm một tập lệnh vào trang của mình, bạn nên bắt đầu bằng cách chèn các thẻ, bao gồm chính tập lệnh đó hoặc liên kết đến một tệp bên ngoài có chứa các tập lệnh. Trong nhiều trường hợp, bạn sẽ đặt & lt; script & gt; trong trang & lt; head & gt; để giữ cho mã JavaScript của bạn được tổ chức thông minh trong một phần của trang web.

Xem Thêm  Cách căn giữa mọi thứ bằng CSS - Căn chỉnh Div, Text, v.v. - cách căn giữa hộp trong css

Tập lệnh & lt; & gt; phần tử có một số thuộc tính mà ngày nay chúng tôi không sử dụng thường xuyên. Nhưng chúng ta vẫn có thể gặp chúng ở mã cũ:

Thuộc tính type:
& lt; script type =… & gt;

Để có một loại HTML cũ – HTML4, bắt buộc phải có một tập lệnh. Trước đó nó là type = “text / javascript”, ngày nay không bắt buộc. Ngoại trừ điều đó, tiêu chuẩn HTML hiện đại đã thay đổi hoàn toàn ý nghĩa của thuộc tính này. Ngày nay chúng ta có thể sử dụng nó cho các mô-đun JavaScript. Nhưng chúng ta sẽ nói về các mô-đun sau, vì đây là một chủ đề nâng cao.

Thuộc tính ngôn ngữ:
& lt; script language =… & gt;

Thuộc tính được trình bày ở trên nhằm hiển thị ngôn ngữ của tập lệnh. Nhưng vì JavaScript là ngôn ngữ mặc định nên không cần sử dụng nó.

Tệp JavaScript bên ngoài

Như chúng tôi đã đề cập trước đó, sử dụng & lt; script & gt; thẻ cho phép bạn thêm JavaScript vào một trang web. Nhưng bạn cũng sẽ cần tạo các tập lệnh mà bạn muốn chia sẻ với tất cả các trang trên trang web của mình. Nhưng chỉ sao chép và dán cùng một mã JavaScript vào mỗi trang không phải là ý kiến ​​hay, đặc biệt là khi bạn có một trang có hàng trăm trang.

Tóm lại, chúng tôi sử dụng các tập lệnh bên ngoài khi chúng tôi có nhiều mã JavaScript. Bằng cách đó, chúng tôi có được khả năng tái sử dụng mã, vì một tệp JavaScript duy nhất có thể được sử dụng trong một số trang html.
Phần mở rộng cho tệp JavaScript là .js. Nếu muốn sử dụng tập lệnh bên ngoài, chúng ta nên đặt tên của tệp tập lệnh trong thuộc tính src (source) của & lt; script & gt; thẻ:

  & lt; script src = "W3DocsScript.js" & gt; & lt; / script & gt;  

Với sự trợ giúp của thuộc tính src, chúng tôi có thể đính kèm các tệp script vào HTML.

  & lt; script src = "/ path / W3DocsScript.js" & gt; & lt; / script & gt;  

Trong ví dụ này /path/W3DocsScript.js
là một đường dẫn tuyệt đối cho tập lệnh, cũng có thể cung cấp một số đường dẫn tương đối từ cùng một trang.
Ví dụ: src = "W3DocsScript.js" có nghĩa là một tệp "W3DocsScript.js".

Chúng tôi cũng có thể cung cấp một URL đầy đủ, có dạng như sau:

  & lt; script src = "https://ajax.googleapis.com/ajax/libs/ jquery / 3.4.1 / jquery.min.js "& gt; & lt; / script & gt;  

Nếu chúng ta muốn đính kèm nhiều tập lệnh, chúng ta nên sử dụng nhiều thẻ:

  & lt; script src = "/ W3DocsScript1.js" & gt; & lt; / script & gt;
& lt; script src = "/ W3DocsScript2.js" & gt; & lt; / script & gt;
...  

Nếu đặt src, nội dung tập lệnh sẽ bị bỏ qua. Nó có nghĩa là một & lt; script & gt; không thể có cùng lúc thuộc tính src và mã bên trong. Nó chỉ không hoạt động:

 

& lt;

html

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Trước tập lệnh ...

& lt ; /

p

& gt;

& lt;

script

src

=

" W3DocsScript.js "

& gt;

alert (

"Hello, world!"

);

& lt; /

script

& gt;

& lt;

p

& gt;

... Sau tập lệnh.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Chúng tôi cần chọn & lt; script src = "…" & gt; bên ngoài hoặc & lt; script & gt; với mã. Chỉ sau đó, chúng tôi có thể chia ví dụ này thành hai tập lệnh để hoạt động:

 

& lt;

html

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Trước tập lệnh ...

& lt ; /

p

& gt;

& lt;

script

src

=

" W3DocsScript.js "

& gt;

& lt; /

script

& gt;

& lt;

script

& gt;

alert (

"Hello, world!"

);

& lt; /

script

& gt;

& lt;

p

& gt;

... Sau tập lệnh.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Chương trình JavaScript đầu tiên của bạn

Hãy bắt đầu lập trình, chương trình đầu tiên của bạn sẽ rất đơn giản:

  • Mở tệp test1.html trong trình soạn thảo văn bản yêu thích của bạn.
  • Trước khi đóng & lt; / head & gt; nhấp vào thẻ dòng trống và nhập:

    & lt; script & gt;

  • Nhấn phím Quay lại để tạo một dòng trống mới và nhập: alert ('Chào mừng bạn đến với W3Docs');

    Xin chúc mừng! Bạn đã nhập dòng mã JavaScript đầu tiên của mình.

  • Sau đó, nhập & lt; / script & gt ;. Mã sẽ trông như thế này:
     
    

    & lt;

    html

    & gt;

    & lt;

    head

    & gt;

    & lt;

    liên kết

    href

    =

    " ../_ css / style.css "

    rel

    =

    " stylesheet "

    & gt;

    & lt; /

    head

    & gt;

    & lt;

    body

    & gt;

    & lt;

    p

    & gt;

    Trước tập lệnh ...

    & lt ; /

    p

    & gt;

    & lt;

    script

    & gt;

    alert (

    'Chào mừng bạn đến với W3Docs'

    );

    & lt; /

    script

    & gt;

    & lt; /

    body

    & gt;

    & lt; /

    html

    & gt;


    Hãy tự mình thử »

  • Kích hoạt trình duyệt web và mở tệp test1.html để xem trước.
    Lưu ý rằng trang trống khi cảnh báo xuất hiện.
  • Bằng cách nhấp vào nút OK của hộp Cảnh báo, bạn sẽ đóng nó.
    Sau khi hộp Cảnh báo biến mất, trang web sẽ xuất hiện trong cửa sổ trình duyệt.

Viết văn bản trên trang web

Tập lệnh trong phần trước xuất hiện ở giữa màn hình của bạn. Nhưng nếu bạn muốn in thư trực tiếp lên trang web bằng JavaScript, bạn có thể cài sẵn lệnh JavaScript:

  • Mở tệp test2.html trong trình soạn thảo văn bản của bạn.

    Trong khi & lt; script & gt; các thẻ xuất hiện trong & lt; head & gt ;, bạn có thể đặt chúng và các chương trình JavaScript ngay trong nội dung của trang.

  • Bên dưới & lt; h1 & gt; Ghi vào cửa sổ tài liệu & lt; / h1 & gt ;, nhập mã này:
     
    

    & lt;

    html

    & gt;

    & lt;

    head

    & gt;

    & lt;

    liên kết

    href

    =

    " ../_ css / style.css "

    rel

    =

    " stylesheet "

    & gt;

    & lt; /

    head

    & gt;

    & lt;

    body

    & gt;

    & lt;

    p

    & gt;

    Trước tập lệnh ...

    & lt ; /

    p

    & gt;

    & lt;

    script

    & gt;

    document

    .write (

    '& lt; p & gt; Chào mừng bạn đến với W3Docs! & lt; / p & gt;'

    );

    & lt; /

    script

    & gt;

    & lt; /

    body

    & gt;

    & lt; /

    html

    & gt;


    Hãy tự mình thử »

    Document.write () là một lệnh JavaScript giống như hàm alert (), nó viết ra bất kỳ thứ gì bạn đặt giữa các dấu ngoặc đơn mở và đóng. Trong ví dụ này, HTML & lt; p & gt; Hello world! & Lt; p & gt; được thêm vào trang: một thẻ đoạn văn và hai từ.

  • Bây giờ, hãy lưu trang và mở nó trong trình duyệt web.

Khi bạn thấy trang sẽ mở ra và “Chào mừng bạn đến với w3Docs” xuất hiện bên dưới tiêu đề.

Bảng điều khiển JavaScript của Chrome

Nhiều nhà phát triển web thích sử dụng trình duyệt Chrome của Google. Thuộc tính DevTools của nó cung cấp cho bạn nhiều cách để sửa và cân bằng các vấn đề HTML, CSS và JavaScript. Bảng điều khiển JavaScript là một nơi tuyệt vời để theo dõi các lỗi và lỗi trong mã của bạn. Nó cũng nhận ra dòng trong mã của bạn nơi từng lỗi xảy ra.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

liên kết

href

=

" ../_ css / style.css "

rel

=

" stylesheet "

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Trước tập lệnh ...

& lt ; /

p

& gt;

& lt;

script

& gt;

alert (

'Chào mừng bạn đến với W3Docs'

);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Nhấp vào nút menu Tùy chỉnh để mở bảng điều khiển JavaScript và chọn Công cụ → Bảng điều khiển JavaScript. Hoặc sử dụng phím tắt Ctrl + Shift + J (Windows) hoặc ⌘-Option-J (Mac), v.v.


Xem thêm những thông tin liên quan đến chủ đề cách bắt đầu javascript

Phỏng vấn siêu tốc JavaScript, React và thuật toán

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2019-09-17
  • Đánh giá: 4 ⭐ ( 1466 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Do nhiều bạn yêu cầu, hôm nay mình share clip phỏng vấn JavaScript, React và thuật toán cho các bạn Junior/Fresher nhe.
    Có vài câu dài dài nữa nhưng mình cắt bớt á, thêm chắc dài 20p lun hihi.

    Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer - lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscrible channel để xem clip mới vào 8H TỐI T3 VÀ T6 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

Bắt đầu với JavaScript

  • Tác giả: codefly.vn
  • Đánh giá: 4 ⭐ ( 7117 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bắt Đầu với Javascript (P1)

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7407 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần này sẽ giới thiệu về JavaScript và thảo luận về một số khái niệm cơ bản.

Lập trình JavaScript cho người mới bắt đầu: Các cách học JavaScript

  • Tác giả: vn.bitdegree.org
  • Đánh giá: 3 ⭐ ( 1320 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lập trình JavaScript cho người mới bắt đầu: tìm hiểu cách tốt nhất học JavaScript & phát triển sự nghiệp IT qua hướng dẫn lập trình JavaScript này

Javascript Function

  • Tác giả: codetot.net
  • Đánh giá: 4 ⭐ ( 8699 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, ta sẽ cùng tìm hiểu cách thức 1 Javascript function hoạt động như thế nào dành cho người bắt đầu.

Hướng dẫn dành cho người mới bắt đầu JavaScript

  • Tác giả: nordiccoder.com
  • Đánh giá: 4 ⭐ ( 6103 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JavaScript cơ bản cho người mới bắt đầu

  • Tác giả: www.jt1.vn
  • Đánh giá: 4 ⭐ ( 5226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là ngôn ngữ lập trình quan trọng. Bài viết này, JT1 sẽ chia sẻ mốt số điều về JavaScript cơ bản cho những bạn mới bắt đầu.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình