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ế Show
JavaScript cơ bảnĐầu ra tạo JavaScriptCác kiểu dữ liệu JavaScriptToán tử JavaScriptSự kiện JavaScriptChuỗi JavaScriptSố JavaScriptJavaScript Nếu. Câu lệnh Else và SwitchMảng JavaScriptMảng sắp xếp JavaScriptVòng lặp JavaScriptHàm JavaScriptĐối tượng JavaScriptBộ chọn JavaScript DOMKiểu dáng JavaScript DOMJavaScript DOM Nhận đặt thuộc tínhThao tác JavaScript DOMĐiều hướng JavaScript DOMCửa sổ JavaScriptVị trí cửa sổ JavaScriptHộp thoại JavaScriptBộ hẹn giờ JavaScriptNgày và giờ JavaScriptPhép toán JavaScriptChuyển đổi loại JavaScriptTrình xử lý sự kiện JavaScriptTuyên truyền sự kiện JavaScriptPhương thức mượn JavaScriptnâng JavaScriptChế độ nghiêm ngặt JavaScriptPhân tích cú pháp JavaScript JSONTính năng JavaScript ES6Trang 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ổ
Hộp thoại/Hộp
ngày
vòng lặp
Toán JavaScript
Số ngẫu nhiên
Mảng JavaScript
Câu điều kiện
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)Adoratorio đã chọn sử dụng CSS3 và Javascript thay vì WebGL để tạo cảm giác có chiều sâuDanh 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đường phố. Trang web của Louis Browns có phong cách giống như một cuốn sách cổ điểnĐố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ânTrang web của Leg Work Studio sử dụng hình ảnh động tương tác để mang lại trải nghiệm sống độngLeg 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ậnTrang web theo chủ đề Nashville của Code ConfTrang 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ế IBMTrang web của IBM Design được lấy cảm hứng từ thế giới vật chất trái ngược với thế giới kỹ thuật số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 dẫn đầu bằng hình ảnh cho dự án sản xuất rượu vang Ý Masi TupungatoTrang 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. tota11ytota11y làm cho khả năng truy cập đơn giản hơnTạ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 LupusTrang web Biết Lupus khám phá tình trạng này một cách thú vị, nhiều thông tinTổ 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ềnThe Boat, một tiểu thuyết đồ họa trực tuyếnCá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. Run4TigerBạn có thể chạy nhiều như một con hổ?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?10 ứng dụng thực tế hàng đầu của JavaScript . Phát triển web. JavaScript là một ngôn ngữ kịch bản được sử dụng để phát triển các trang web. . Ứng dụng web. Các khung JavaScript khác nhau được sử dụng để phát triển và xây dựng các ứng dụng web mạnh mẽ. . thuyết trình. . Ứng dụng máy chủ. . máy chủ web. . Trò chơi. . Mỹ thuật. . Ứng dụng đồng hồ thông minh 5 câu lệnh JavaScript là gì?Các câu lệnh JavaScript bao gồm. Giá trị, Toán tử, Biểu thức, Từ khóa và Nhận xét .
Việc sử dụng phổ biến nhất cho JavaScript là gì?Một số cách sử dụng JavaScript phổ biến nhất là. . phát triển web ứng dụng web máy chủ web Ứng dụng di động phát triển trò chơi Thuyết trình và trình chiếu JavaScript được sử dụng để làm gì?JavaScript là ngôn ngữ kịch bản cho phép bạn tạo nội dung cập nhật động, kiểm soát đa phương tiện, tạo ảnh động và gần như mọi thứ khác . |