Một số ví dụ về JavaScript là gì?

Phần này chứa một bộ sưu tập phong phú các ví dụ thực hành thể hiện các kỹ thuật và tính năng khác nhau của ngôn ngữ JavaScript trong hành động thực tế

JavaScript cơ bản

Đầu ra tạo JavaScript

Các kiểu dữ liệu JavaScript

Toán tử JavaScript

Sự kiện JavaScript

Chuỗi JavaScript

Số JavaScript

JavaScript Nếu. Câu lệnh Else và Switch

Mảng JavaScript

Mảng sắp xếp JavaScript

Vòng lặp JavaScript

Hàm JavaScript

Đối tượng JavaScript

Bộ chọn JavaScript DOM

Kiểu dáng JavaScript DOM

JavaScript DOM Nhận đặt thuộc tính

Thao tác JavaScript DOM

Điều hướng JavaScript DOM

Cửa sổ JavaScript

Vị trí cửa sổ JavaScript

Hộp thoại JavaScript

Bộ hẹn giờ JavaScript

Ngày và giờ JavaScript

Phép toán JavaScript

Chuyển đổi loại JavaScript

Trình xử lý sự kiện JavaScript

Tuyên truyền sự kiện JavaScript

Phương thức mượn JavaScript

nâng JavaScript

Chế độ nghiêm ngặt JavaScript

Phân tích cú pháp JavaScript JSON

Tính năng JavaScript ES6

Trang này chứa các ví dụ về JavaScript - ví dụ về thủ thuật JavaScript mà bạn có thể sử dụng cho trang web của riêng mình. Bạn có thể sử dụng bất kỳ ví dụ nào trong số này bằng cách sao chép và dán mã thẳng vào trang web của mình

các cửa sổ

• Cửa sổ bật lên - onClick
• Cửa sổ bật lên - Không phô trương
• Chuyển hướng theo thời gian - onClick
• Chuyển hướng theo thời gian - Không phô trương
• Làm mới trang - onClick
• Làm mới trang - Không phô trương
• Tự động làm mới trang

Hộp thoại/Hộp

• Hộp cảnh báo - onClick
• Hộp cảnh báo - Không phô trương
• Hộp xác nhận - onClick
• Hộp xác nhận - Không phô trương
• Menu nhảy với Hộp xác nhận có điều kiện - Không phô trương
• Dấu nhắc cơ bản - onClick
• Dấu nhắc cơ bản - Không phô trương
• Lời nhắc có điều kiện - Không phô trương
• "In trang này" - onClick
• "In trang này" - Không phô trương

ngày

• Ngày/Giờ hiện tại
• Ngày/Giờ hiện tại - Chuỗi ngôn ngữ
• Ngày/Giờ hiện tại - Chuỗi ngôn ngữ với các ví dụ về ngôn ngữ
• Ngày hiện tại - MM/DD/YYYY
• Ngày hiện tại - DD/MM/YYYY
• Thời gian hiện tại - 24 giờ
• Giờ hiện tại - 12 giờ
• Ngày hiện tại - Định dạng dài [e. g. Thứ Bảy, ngày 26 tháng 11 năm 2016]
• Ngày Hiện tại - Định dạng Ngắn [e. g. Thứ bảy, ngày 26 tháng 11 năm 16]

vòng lặp

• Vòng lặp "Cho"
• "Trong khi lặp lại
• Vòng lặp "Làm trong khi"
• Phá vỡ vòng lặp "For"
• Phá vỡ vòng lặp "While"
• Phá vỡ và tiếp tục vòng lặp "For"
• Phá vỡ & Tiếp tục Vòng lặp "While"
• Vòng lặp "For In" [lặp qua vô số thuộc tính của một đối tượng]
• Vòng lặp "For" lồng nhau
• Vòng lặp "While" lồng nhau

Toán JavaScript

• Math.ceil[]
• Math.floor[]
• Math.max[]
• Math.min[]
• Math.PI
• Math.pow[]
• Math.round[]
• Math.sqrt[]

Số ngẫu nhiên

• ________số 8
• Math.random[] dưới dạng số nguyên được làm tròn
• Hàm số. Số nguyên ngẫu nhiên [Không bao gồm tối đa]
• Hàm số. Số nguyên ngẫu nhiên [Bao gồm tối đa]

Mảng JavaScript

• Tạo một mảng
• Nối hai mảng
• Nối ba mảng
• Nối các phần tử mảng thành một chuỗi
• Xóa phần tử cuối cùng khỏi mảng
• Xóa phần tử đầu tiên khỏi mảng
• Thêm phần tử vào cuối Array
• Thêm phần tử vào đầu Array
• Sắp xếp mảng theo thứ tự bảng chữ cái [Tăng dần]
• Sắp xếp mảng theo thứ tự bảng chữ cái [Giảm dần]
• Đảo ngược một mảng
• Trích xuất các phần tử từ một mảng

Câu điều kiện

• Câu lệnh "Nếu" trong JavaScript
• Câu lệnh "Nếu khác" trong JavaScript
• Câu lệnh "If Else If" trong JavaScript
• Tuyên bố "Chuyển đổi" JavaScript
• Toán tử có điều kiện [bộ ba] trong JavaScript

Rất nhiều ví dụ về jQuery

JavaScript tạo ra các nền tảng có thể thu hút người dùng và đảm bảo rằng họ nhớ trang web của bạn và tiếp tục truy cập lại. Nó có thể được sử dụng để tạo trò chơi, API, khả năng cuộn và hơn thế nữa

Internet tràn ngập cảm hứng thiết kế web [mở trong tab mới] , bao gồm các ví dụ tuyệt vời về JavaScript được sử dụng để đưa trang web đến . Ở đây, chúng tôi chọn một số ví dụ yêu thích của chúng tôi về JavaScript đang hoạt động để truyền cảm hứng cho bạn.

01. Lịch sử [mở trong thẻ mới]

Nếu bạn đã từng xem Cosmos, bạn có thể nhớ Carl Sagan nói về Lịch vũ trụ. Nếu tuổi của vũ trụ được cô đọng lại trong một năm, thì lịch sử nhân loại được ghi lại sẽ khớp với những giây cuối cùng của ngày 31 tháng 12

14 tỷ năm sự kiện là một tập dữ liệu khổng lồ và hiển thị nó trong trình duyệt không phải là nhiệm vụ dễ dàng. Nhưng nhà thiết kế và nhà phát triển Matan Stauber đã vượt qua thử thách - mặc dù ngay cả anh ấy cũng không chắc điều đó có khả thi hay không. "Tôi nghĩ trở ngại chính sẽ phải là tỷ lệ," anh giải thích. "Làm thế nào để bạn tạo một dòng thời gian khi 99. 9 phần trăm lịch sử mà chúng tôi biết sẽ phải được cô đọng thành ít hơn một pixel của màn hình?"

Là con trai của một nhà sử học, Stauber đã tạo ra Lịch sử khi còn là sinh viên tại Học viện Nghệ thuật và Thiết kế Bezalel, dưới sự hướng dẫn của Ronel Mor. Ông nói: “Nếu chúng ta nghĩ về cách mọi người hình dung về lịch sử, thì các mốc thời gian có lẽ là cách phổ biến nhất, nhưng chúng vẫn không thay đổi nhiều kể từ thời của giấy in. "Tôi thấy đó là một cơ hội thiết kế thú vị, đặc biệt là ngày nay với quyền truy cập vào các nguồn dữ liệu lớn. "

Trang web quét và lập chỉ mục các sự kiện từ Wikipedia, lấy bài báo và lấy hình ảnh trên Google và video trên YouTube. Dữ liệu có thể dễ dàng khám phá và rất vui khi sử dụng. Nếu bạn đã từng mất hàng giờ để khám phá các bài viết trên Wikipedia, hãy dành nhiều thời gian cho bài viết này

02. Filippo Bello [mở trong thẻ mới]

Danh mục đầu tư trực tuyến thể hiện tài năng của nghệ sĩ 3D người Ý Filippo Bello đã được hình thành, thiết kế và phát triển nội bộ tại Adoratorio [mở trong tab mới] . Nhóm đã được trao toàn quyền tự do trong cách thiết kế nó.

Lối chơi có chiều sâu xuyên suốt trang web rất hiệu quả – hình ảnh di chuyển chậm về phía người xem, tạo cảm giác như đang đi sâu vào từng dự án. Điều này đạt được bằng cách sử dụng cái được gọi là hiệu ứng phân khúc. hình nền được sao chép trong các hộp khác nhau di chuyển về phía người xem. Nhóm đã thử thách bản thân bằng cách tránh những công nghệ rõ ràng nhất. Rossi, giám đốc nghệ thuật và đồng sáng lập cho biết: "WebGL không phù hợp với mọi loại người dùng". "Vì vậy, thách thức chính của trang web này là hiểu cách làm sâu sắc thêm màn hình bằng cách chỉ sử dụng các chuỗi mã CSS3 và JavaScript. "

Việc chuyển trang và các hiệu ứng thu phóng nhỏ trên hình ảnh là một điểm nhấn thú vị được thêm vào kết quả cuối cùng, mà – như Rossi mô tả – “hoàn toàn ngoài mong đợi của chúng tôi”

03. đường phố. Louis Browns

Đối với trang web này về lịch sử của St. Đội bóng chày Louis Browns, công ty kỹ thuật số HLK đã tạo ra một trải nghiệm rất đẹp. Trang web đọc giống như một cuốn sách cổ điển được làm thủ công, hoàn chỉnh với các chương và kiểu chữ có kết cấu. Người dùng có thể cuộn qua từng chương để có trải nghiệm giống như câu chuyện dựa trên thời gian

Cảm hứng cho trang web đã được lấy từ các bản thảo và quảng cáo của những năm 1920, với nhiều hình ảnh trực tiếp từ những năm mà chúng đang mô tả. Điều này mang lại cảm giác độc đáo cho một không gian kỹ thuật số hiện đại. Điều này được bổ sung bằng cách phối màu có tông xám và nâu, được tạo điểm nhấn bằng một màu cam duy nhất

Một số phần yêu thích của tôi trên trang web này là các chi tiết nhỏ, chẳng hạn như nút menu [hình tròn với menu bánh hamburger bên trong] chuyển đổi thành quả bóng chày khi di chuột. Tôi cũng thích dòng thời gian ở phía bên trái, chạy theo màn hình và cập nhật khi cuộn

Trang web được xây dựng bằng Node. js và Express framework để cho phép cập nhật và chuyển đổi mượt mà giữa các nội dung

04. Xưởng làm chân

Leg Work thực hiện rất nhiều công việc tuyệt vời trên web, từ thiết kế đồ họa đến tương tác và truyền thông. Vì vậy, không có gì ngạc nhiên khi thấy rằng trang cá nhân của chính nó cũng không ngoại lệ. Cá tính của studio tỏa sáng thông qua các hình minh họa đa phương tiện vui nhộn. Nó kết hợp các hiệu ứng ảnh cổ điển [chẳng hạn như mẫu lưới chấm] với các điểm nhấn màu trắng được sơn kỹ thuật số và quét chữ viết tay để tạo ra tác phẩm nghệ thuật độc đáo đại diện cho cơ quan

Tuy nhiên, không chỉ những hình ảnh minh họa làm cho trang web này trở nên đáng chú ý – các hình ảnh động tương tác thực sự khiến nó trở nên sống động. Bản thân một số hình minh họa thực sự là video thay vì hình ảnh tĩnh, được tạo bằng After Effects và các thành phần trang web như thanh bên hoạt hình mượt mà

Trang web được thiết kế dành cho thiết bị di động và các tương tác trên thiết bị di động được phản ánh trong trải nghiệm trên máy tính để bàn, nơi người dùng có thể vuốt bằng bàn di chuột để xem qua các phần. Trang web được xây dựng bằng Modernizr để đảm bảo tính tương thích và jQuery để tương tác

05. mã xác nhận

Trang web dành cho CodeConf thực sự vượt trội so với trang web hội nghị tiêu chuẩn. Hội nghị được tổ chức tại Nashville, Tennessee và mọi thứ về thiết kế này đều bày tỏ lòng kính trọng đối với địa điểm này

Bản thân trang web phản hồi độc đáo và có bảng màu ấm áp, gắn kết. Các hình minh họa hay thay đổi mang lại nét đặc sắc cho trang web và tạo ra tính thẩm mỹ country-rock vui tươi tiếp tục xuyên suốt trang [và thậm chí trong chính sự kiện]

Không có chi tiết nào được bỏ qua, vì ngay cả các quy tắc trang trí theo chiều ngang của menu [chỉ thấy trên các kích thước màn hình nhỏ hơn] cũng phù hợp với tính thẩm mỹ của country-rock. Trang web triển khai các tính năng vị trí của Google Maps và được xây dựng bằng jQuery và AngularJS

Mọi thứ đều được minh họa. tất cả các địa điểm, 'danh sách' diễn giả, lời kêu gọi hành động mua vé và thời gian nghỉ giữa các phần. Ngoài ra còn có một dàn nhân vật vui nhộn có thể được tìm thấy rải rác trên trang web. xương rồng vector, kỳ lân, rồng, octocats, cao bồi và các cô gái chơi nhạc và tạo dáng tinh nghịch trên trang

06. thiết kế IBM

Trong vài năm qua, IBM đã đầu tư vào việc phát triển một chương trình thiết kế và hướng công ty tới cách tiếp cận lấy con người làm trung tâm để tạo ra phần mềm. Gần đây, nó đã ra mắt Ngôn ngữ thiết kế của IBM, trong đó có một bản cập nhật cho từ vựng hoạt hình của nó. Nó cung cấp tài nguyên và hướng dẫn thiết kế cho các nhà phát triển web, tất cả đều có nguồn mở trên GitHub

Điều tôi thích ở bản cập nhật hoạt hình này [thậm chí còn hơn cả việc nó có nguồn mở] là cách hãng phim nhìn vào di sản của IBM và thế giới vật chất để lấy cảm hứng, thay vì các thuộc tính kỹ thuật số khác. Hayley Hughes, trưởng nhóm ngôn ngữ thiết kế của IBM, nói rằng nhóm đã lấy cảm hứng từ máy móc;

Cô giải thích: “Từ cú đánh mạnh mẽ của cánh tay máy in đến chuyển động mượt mà của cỗ máy đánh chữ, mỗi chuyển động đều phù hợp với mục đích và được thiết kế có chủ ý”. "Phần mềm của chúng tôi đòi hỏi sự chú ý đến từng chi tiết để làm cho sản phẩm trở nên sống động và chân thực. "

Tại sao hoạt hình lại quan trọng đối với Ngôn ngữ thiết kế của IBM?

07. Masi Tupungato [mở trong thẻ mới]

Trang web tuyệt vời này từ cơ quan sáng tạo kỹ thuật số quốc tế AQuest cho Masi Tupungato, một dự án sản xuất rượu vang có trụ sở tại Ý, gần như để hình ảnh tự nói lên

Bất thường, màn hình tải được sử dụng cho mỗi trang khi hình ảnh toàn màn hình sắc nét tải lên. Thông thường, đây sẽ là một điều tối kỵ – người dùng muốn có nội dung càng sớm càng tốt. Tuy nhiên, ở đây nó thực sự cải thiện trải nghiệm của người dùng bằng cách đảm bảo hình ảnh được tải đầy đủ trước khi bất kỳ nội dung nào được tiết lộ. Thiết kế tạo cảm giác đồng cảm, khiến người dùng có cảm giác như được đến xưởng rượu và tự mình hái nho

Trang web có thể ở bên nặng trên một số trang [từ 1. 2MB đến 5MB trọng lượng], có thể được cải thiện bằng cách giới thiệu một số kỹ thuật tải chậm. Tuy nhiên, bất chấp trọng lượng của nó, trang web được xây dựng tốt, với thời gian bắt đầu kết xuất dưới một giây và các lượt truy cập quay lại cũng tải trong khoảng thời gian thứ hai. Khung dựa trên phi nghĩa. com, là phiên bản kế thừa của Hệ thống lưới 960

Khi xem trang web trên máy tính để bàn và chế độ xem lớn hơn, người dùng có thể xem và tương tác với từng loại rượu riêng biệt. Họ có thể tận dụng kích thước màn hình lớn hơn để hiển thị tất cả các đặc tính và chi tiết của rượu cạnh nhau. Ngược lại, trên trang web dành cho thiết bị di động, các chi tiết và mô tả trượt vào và có thể trượt ra một cách mượt mà

08. tota11y

Tạo các trang web có thể truy cập là cực kỳ quan trọng. Tuy nhiên, các kỹ thuật và thử nghiệm liên quan thường có vẻ như chúng đòi hỏi chuyên môn sâu có thể khiến các nhà phát triển và thiết kế web cảm thấy như họ đang bị lạc lõng.

Nhập tota11y. một công cụ đơn giản có thể được đưa vào dưới dạng tệp JavaScript trong một trang hoặc đơn giản hơn nữa là được sử dụng làm dấu trang trên bất kỳ trang web nào. Nó gắn cờ các mục trong trang vi phạm nguyên tắc trợ năng - chẳng hạn như độ tương phản hình ảnh thấp hoặc thiếu các lựa chọn thay thế văn bản cho hình ảnh

Các yếu tố bướng bỉnh được gắn cờ trực quan, giúp dễ dàng chụp ảnh màn hình và cho các thành viên trong nhóm hoặc khách hàng biết chính xác vấn đề là gì, trong khi phần giải thích mở rộng hướng dẫn người dùng các phương pháp khắc phục nhanh các trục trặc

Trang web của Khan Academy cho tota11y không quá hào nhoáng, nhưng sau đó, công việc quan trọng không phải lúc nào cũng hào nhoáng. Sự đơn giản trong kinh doanh của văn bản - cả về hình thức và nội dung - cho thấy sự phức tạp của vấn đề mà chính công cụ này nhằm mục đích giảm bớt

09. Biết Lupus

Tổ chức Lupus Foundation of America [LFA] là một tổ chức quốc gia hoạt động để giải quyết bí ẩn của bệnh lupus. Viget hợp tác với LFA trong một dự án nâng cao nhận thức cộng đồng miễn phí để giúp công chúng hiểu về căn bệnh này

Laura Sweltz, nhà thiết kế UX và trưởng dự án giải thích: "LFA muốn tạo ra một trò chơi vui nhộn nhưng chứa nhiều thông tin, giúp giáo dục công chúng một cách hấp dẫn, giúp khắc phục vấn đề đó". "Quá trình thiết kế của chúng tôi tập trung vào việc hoàn thành mục tiêu đó, đồng thời tạo ra thứ gì đó mà những người mắc bệnh lupus thực sự cảm thấy hào hứng khi chia sẻ. "

Giải pháp của Viget là một trò chơi bài lấy cảm hứng từ sòng bạc được xây dựng bằng React, trong đó mỗi lá bài nêu bật một sự thật về bệnh lupus. Hình minh họa tùy chỉnh của nhà thiết kế Blair Culbreth giúp trò chơi trở nên vui vẻ trong khi đề cập đến chủ đề nghiêm túc. Hiệu ứng âm thanh lấy cảm hứng từ sòng bạc xuyên suốt trò chơi

Các hình ảnh động mượt mà và linh hoạt, tạo thêm một lớp thú vị khác cho trò chơi. Trải nghiệm di động cũng tương tác như máy tính để bàn và các chuyển đổi phản hồi nhanh đã được xem xét đầy đủ. Kết quả cuối cùng là một trải nghiệm thú vị khiến việc học trở nên dễ dàng

10. Thuyền

Cách kể chuyện dài dòng đã dần trở nên phổ biến trên các trang tin tức và phương tiện truyền thông, nhưng The Boat của đài truyền hình SBS, một tiểu thuyết đồ họa trực tuyến dựa trên một câu chuyện của Nam Le, mang lại cảm giác độc đáo cả về phong cách và cách thực hiện. Hình minh họa bằng mực Sumi, hoạt hình được thực hiện một cách chuyên nghiệp và khung cảnh âm thanh rùng rợn ghi lại câu chuyện về hành trình của một người tị nạn trẻ Việt Nam

Để câu chuyện trở nên sống động, họa sĩ minh họa Matty Huỳnh đã dành sáu tháng với văn bản gốc của Nam Le, phác thảo các hình thu nhỏ và lặp đi lặp lại việc tạo ra các nhân vật

Nhà sản xuất Kylie Boltin giải thích: “Tôi nghĩ rằng sự cân bằng mà bạn thấy đến từ giai đoạn phát triển kéo dài này. "Khoảng thời gian hướng nội sâu sắc đó đã giúp các thành viên cốt lõi của nhóm hiểu rõ câu chuyện từ trong ra ngoài. Chúng tôi biết nhịp điệu của câu chuyện và chúng tôi biết khoảnh khắc nào cần được làm nổi bật. Nguyên tắc hướng dẫn là bổ sung cho cách kể chuyện cốt lõi, thay vì chế ngự nó hoặc thêm một yếu tố chỉ vì lợi ích của nó. "

Các bảng đồ họa giống như những bản phác thảo nhật ký – khẩn cấp, không hoàn hảo và xúc động sâu sắc. Trang web này chứng minh cách kể chuyện trực tuyến hấp dẫn và mạnh mẽ như thế nào nếu được sử dụng đúng cách

11. Run4Tiger

Hungry Boys có trụ sở tại Moscow đã thiết kế trang web chiến dịch ngừng chiếu này cho Quỹ Động vật hoang dã Thế giới Nga để nâng cao nhận thức cộng đồng về chiến dịch Cứu hổ. Tại sao phải đua với bạn bè khi bạn có thể đua với hổ Amur được theo dõi bằng GPS?

Trang web cho phép bạn đồng bộ hóa ứng dụng đang chạy mà bạn chọn [hiện nó hỗ trợ chín ứng dụng khác nhau. ] và khiến bạn và những vận động viên khác phải đấu với con mèo lớn, trung bình 20 km một ngày. Nếu con hổ đánh bại bạn, bạn quyên góp $5 cho WWF

Đó là một khái niệm tuyệt vời và có một thiết kế tuyệt vời đi kèm với nó. Bảng màu đen và vàng sắc nét – đậm đặc trưng cho một ứng dụng từ thiện – truyền tải tính cấp bách của sáng kiến ​​Cứu hổ

Người tạo ra Run4Tiger, Ksenia Apresyan nói rằng nhóm chắc chắn đã nghĩ đến chuyển động khi thiết kế. "Chúng tôi muốn làm cho trang web năng động nhất có thể. Đó là lý do tại sao chúng tôi quyết định sử dụng các công nghệ mới nhất và hiển thị thông điệp chính của chúng tôi, được làm từ các hạt động, trên trang chính. "

Ví dụ JavaScript được sử dụng ở đâu?

5 câu lệnh JavaScript là gì?

Việc sử dụng phổ biến nhất cho JavaScript là gì?

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