JavaScript là ngôn ngữ lập trình mã nguồn mở, có lẽ là ngôn ngữ phổ biến nhất. It is designed for creating web-centric applications. Nó được biết đến là nhẹ và thông dịch, làm cho nó nhanh hơn nhiều so với các ngôn ngữ khác. JavaScript được tích hợp với HTML, giúp triển khai JavaScript trong các ứng dụng web dễ dàng hơn
Trong bài viết 'Dự án JavaScript' này, chúng tôi hoàn toàn tập trung vào ứng dụng thực tế của JavaScript trong các ứng dụng web trong thế giới thực. Chúng tôi sẽ xây dựng ba dự án hoàn toàn dựa trên JavaScript, trong suốt bài viết này. Vì vậy, hãy chuẩn bị tinh thần và bắt đầu hành trình JavaScript của bạn
Ứng dụng máy tính JavaScript
Cách tốt nhất để học là làm. Vì vậy, hãy bắt đầu bằng cách xây dựng ứng dụng JavaScript đầu tiên của bạn - một ứng dụng thực hiện các phép tính toán học đơn giản và trông cũng đẹp mắt. Logic không phức tạp lắm và chúng tôi nghĩ bạn sẽ thấy vui khi phát triển ứng dụng này, vì vậy hãy bắt đầu
Quả sung. Ứng dụng máy tính JavaScript
Bất kỳ trình soạn thảo văn bản nào cũng có thể được sử dụng để phát triển ứng dụng này. Visual Studio Code là một tùy chọn tuyệt vời để sử dụng các ngôn ngữ lập trình khác nhau như JavaScript và Python
Cả ba ứng dụng đều được xây dựng bằng ba công nghệ sau
- HTML - Đây là tệp cơ sở chứa bố cục và nội dung của các ứng dụng web
- CSS - Đây là biểu định kiểu mà chúng tôi sử dụng để cách điệu các thành phần khác nhau của ứng dụng web
- JS - Tệp JavaScript này chứa tất cả những điều kỳ diệu đằng sau hậu trường để các ứng dụng này hoạt động
thư mục dự án
Thư mục dự án sẽ trông giống như hình ảnh được hiển thị bên dưới
Quả sung. thư mục dự án
mục lục. html
Tệp này chứa bố cục chung của máy tính. Các phần tử được tạo kiểu thêm trong tệp CSS và được tạo tương tác trong một tệp JavaScript riêng
Máy tính
Máy tính
- Nhập cả biểu định kiểu CSS và tệp JavaScript vào tệp HTML này bằng các lệnh tương ứng
- Create a header ‘Calculator’ for this application using
HTML tag.
- Use the HTML table to create the layout of calculator using
HTML tag. The
, tags are part of the tag that help in managing data within the table.
- Use HTML tags to create the screen and buttons for the calculator.
- Attach the buttons to the relevant JavaScript functions
- Add a Simplilearn logo to the web application
app. js
This file contains the scripts attached to the HTML file and makes each element in the application interactive
chức năng hiển thị [val] {
tài liệu. getElementById["kết quả"]. giá trị += giá trị;
}
hàm giải[] {
đặt x = tài liệu. getElementById["kết quả"]. giá trị;
đặt y = eval[x];
tài liệu. getElementById["kết quả"]. giá trị = y;
}
hàm clearScreen[] {
tài liệu. getElementById["kết quả"]. giá trị = "";
}
- Hàm display[] dùng để hiển thị giá trị trên màn hình máy tính
- Hàm đánh giá [] được gắn vào nút bằng và được sử dụng để tính toán cho ứng dụng máy tính của chúng tôi
- Chức năng xóa [] được gắn vào nút xóa và xóa màn hình máy tính
phong cách. css
Tệp này chứa biểu định kiểu để tạo kiểu cho các thành phần HTML được sử dụng trong ứng dụng này. Tất cả các kiểu CSS đều rõ ràng và được áp dụng cho từng lớp được xác định trong tệp HTML. Bạn có thể chơi với các phong cách để mang lại cho ứng dụng này một dấu ấn cá nhân
@mặt chữ {
họ phông chữ. Montserrat;
src. url["phông chữ/Montserrat-Thường. ttf"];
}
* {
họ phông chữ. Montserrat;
}
cơ thể người {
màu nền. mòng két;
}
h1 {
căn chỉnh văn bản. trung tâm;
màu. trắng;
lề trên. 50px;
}
màn hình {
màu nền. xám;
ranh giới. 2px màu đen đặc;
màu. trắng;
cỡ chữ. trung bình;
chiều rộng. 100%;
con trỏ. vỡ nợ;
đệm. 10px;
lề. tự động;
lề dưới. 10px;
}
đầu vào [loại = "nút"]. bay lượn {
màu nền. #ffff;
}
đầu vào [loại = "nút"]. tích cực {
màu nền. đỏ cam;
}
nhà điều hành {
màu nền. quả cam;
đệm. 5px;
màu. màu đen;
ranh giới. 2px màu đen đặc;
chiều rộng. 100%;
chiều cao. 40px;
con trỏ. con trỏ;
}
số {
đệm. 5px;
chiều cao. 40px;
màu. màu đen;
ranh giới. 2px màu đen đặc;
chiều rộng. 100%;
con trỏ. con trỏ;
}
số thập phân {
màu nền. xanh nhạt;
đệm. 5px;
màu. màu đen;
ranh giới. 2px màu đen đặc;
chiều rộng. 100%;
chiều cao. 40px;
con trỏ. con trỏ;
}
thông thoáng {
màu nền. cá hồi;
đệm. 5px;
màu. màu đen;
ranh giới. 2px màu đen đặc;
chiều rộng. 100%;
chiều cao. 40px;
con trỏ. con trỏ;
lề. tự động;
lề dưới. 10px;
}
công bằng {
màu nền. màu xanh lợt;
đệm. 5px;
màu. màu đen;
ranh giới. 2px màu đen đặc;
chiều rộng. 100%;
chiều cao. 40px;
con trỏ. con trỏ;
}
thùng đựng hàng {
bề rộng. 40%;
màu nền. #ffff;
tự sắp xếp. trung tâm;
trưng bày. khối;
lề. tự động 100px;
bán kính đường viền. 10px;
đệm. 15px;
bóng hộp. 5px 10px 20px màu đen;
}
bàn {
chiều rộng. 100%;
}
div. liên quan đến {
chức vụ. tuyệt đối;
đứng đầu. 600px;
đúng. 120px;
}
Kết quả cuối cùng
Máy tính JavaScript cuối cùng sẽ trông giống như thế này, mặc dù bạn có thể tự do điều chỉnh logic và phong cách của trò chơi này và biến nó thành của riêng bạn
Quả sung. Ứng dụng máy tính JavaScript [Kết quả cuối cùng]_JavaScript_Projects
Ứng dụng JavaScript To-Do
Bây giờ bạn đã tạo ứng dụng đầu tiên của mình dựa trên JavaScript, hãy chuyển sang xây dựng ứng dụng JavaScript tiếp theo của chúng tôi, đây sẽ là danh sách việc cần làm. Vì vậy, không cần phải quảng cáo thêm, hãy bắt đầu
Quả sung. Ứng dụng JavaScript To-Do
thư mục dự án
Cuối cùng, thư mục dự án sẽ trông giống như hình bên dưới
Quả sung. thư mục dự án
mục lục. html
Tệp này chứa bố cục chung của danh sách việc cần làm. Các phần tử được tạo kiểu thêm trong tệp CSS và được tạo tương tác trong một tệp JavaScript riêng
Danh sách việc cần làm
Danh sách việc cần làm của tôi
Thêm
- Tìm hiểu JavaScript
- Đăng ký Simplilearn
- Mua đồ tạp hóa
- Đọc sách
- Nhập cả biểu định kiểu CSS cũng như tệp JavaScript vào tệp HTML này để phản ánh các kiểu trong ứng dụng
- Use HTML tag to design the to-do list container.
- Thêm một nút mới để thêm các mục vào danh sách này
- Use the
- [unordered list] ] tag to add items to the todo-list by default.
- Add a Simplilearn logo to the web application
app. js
Tệp này chứa các tập lệnh được đính kèm với tệp HTML và làm cho từng phần tử trong ứng dụng có tính tương tác. Chúng tôi đã thêm nhận xét trong mã để hiểu rõ hơn về từng chức năng trong tệp này
// Tạo nút "đóng" và thêm nó vào từng mục trong danh sách
var myNodelist = tài liệu. getElementsByTagName["LI"];
tôi;
for [i = 0; i < myNodelist. chiều dài;
var span = tài liệu. createElement["SPAN"];
var txt = tài liệu. createTextNode["\u00D7"];
nhịp. className = "đóng";
nhịp. appendChild[txt];
myNodelist[i]. appendChild[span];
}
// Bấm vào nút đóng để ẩn mục danh sách hiện tại
var đóng = tài liệu. getElementsByClassName["đóng"];
tôi;
cho [i = 0; i < đóng. chiều dài;
đóng [tôi]. title = chức năng [] {
var div = cái này. phần tử cha mẹ;
div. Phong cách. hiển thị = "không";
}
}
// Thêm ký hiệu "đã kiểm tra" khi nhấp vào một mục trong danh sách
danh sách var = tài liệu. querySelector['ul'];
danh sách. addEventListener['click', function[ev] {
nếu [ev. mục tiêu. tagName === 'LI'] {
ev. mục tiêu. danh sách lớp học. chuyển đổi ['đã kiểm tra'];
}
}, sai];
// Tạo một mục danh sách mới khi nhấp vào nút "Thêm"
hàm newElement[] {
var li = tài liệu. createElement["li"];
var inputValue = tài liệu. getElementById["mục"]. giá trị;
var t = tài liệu. tạoTextNode[inputValue];
li. appendChild[t];
nếu [giá trị đầu vào === ''] {
alert["Trường này không được để trống. "];
} khác {
tài liệu. getElementById["danh sách"]. appendChild[li];
}
tài liệu. getElementById["mục"]. giá trị = "";
var span = tài liệu. createElement["SPAN"];
var txt = tài liệu. createTextNode["\u00D7"];
nhịp. className = "đóng";
nhịp. appendChild[txt];
li. appendChild[span];
cho [i = 0; i < đóng. chiều dài;
đóng [tôi]. title = chức năng [] {
var div = cái này. phần tử cha mẹ;
div. Phong cách. hiển thị = "không";
}
}
}
- Tạo một nút đóng và nối nó vào từng mục danh sách
- Nhấp vào nút đóng để ẩn mục danh sách hiện tại
- Thêm biểu tượng 'đã kiểm tra' khi nhấp vào mục danh sách
- Tạo mục danh sách mới khi nhấp vào nút 'Thêm'
phong cách. css
Tệp này chứa biểu định kiểu để tạo kiểu cho các phần tử HTML được sử dụng trong ứng dụng này. Tất cả các kiểu CSS đều rõ ràng và được áp dụng cho từng lớp được xác định trong tệp HTML. Vui lòng chơi với các kiểu CSS này và cung cấp cho ứng dụng này dấu ấn cá nhân của bạn
@mặt chữ {
họ phông chữ. Montserrat;
src. url[phông chữ/Montserrat-Regular. ttf];
}
* {
kích thước hộp. hộp viền;
họ phông chữ. Montserrat;
}
cơ thể người {
màu nền. lightsteelblue;
hình nền. url["bg. jpg"];
chiều cao. 600px;
vị trí nền. trung tâm;
Bối cảnh Lặp lại. không lặp lại;
kích thước nền. che phủ;
}
thùng đựng hàng {
chiều rộng. 50%;
màu nền. #ffff;
tự sắp xếp. trung tâm;
trưng bày. khối;
lề. tự động 120px;
bóng hộp. 5px 10px 20px màu đen;
}
ul {
lề. 0;
biên giới bên trái. 6px màu xanh mòng két;
kiểu danh sách. không có;
đệm. 0;
}
ul li {
con trỏ. con trỏ;
chức vụ. liên quan đến;
đệm. 12px 8px 12px 40px;
lý lịch. #eee;
cỡ chữ. 18px;
chuyển tiếp. 0. 2s;
-webkit-người dùng-chọn. không có;
-moz-người dùng-chọn. không ai;
-ms-người dùng-chọn. không có;
người dùng chọn. không ai;
}
ul li. con thứ n[lẻ] {
lai lịch. #f9f9f9;
}
ul li. bay lượn {
lai lịch. #ddd;
}
ul li. đã kiểm tra {
lai lịch. #888;
màu. #ffff;
trang trí văn bản. đường cắt ngang;
}
ul li. đã kiểm tra. trước {
nội dung. "";
chức vụ. tuyệt đối;
màu viền. #ffff;
kiểu viền. chất rắn;
chiều rộng biên giới. 0 2px 2px 0;
đứng đầu. 10px;
bên trái. 16px;
biến đổi. xoay [45 độ];
chiều cao. 15px;
bề rộng. 7px;
}
Thoát {
chức vụ. tuyệt đối;
đúng. 0;
đứng đầu. 0;
đệm. 12px 16px 12px 16px;
}
Thoát. bay lượn {
màu nền. #f44336;
màu. trắng;
}
tiêu đề {
màu nền. mòng két;
đệm. 30px 30px;
màu. trắng;
căn chỉnh văn bản. trung tâm;
}
tiêu đề. sau đó {
nội dung. "";
trưng bày. bàn;
thông thoáng. cả hai;
}
đầu vào {
lề. 0;
ranh giới. không có;
bán kính đường viền. 0;
chiều rộng. 75%;
đệm. 10px;
trôi nổi. bên trái;
cỡ chữ. 16px;
}
thêmBtn {
đệm. 10px;
bề rộng. 25%;
lai lịch. #d9d9d9;
màu. #555;
trôi nổi. bên trái;
căn chỉnh văn bản. trung tâm;
cỡ chữ. 16px;
con trỏ. con trỏ;
chuyển tiếp. 0. 3s;
bán kính đường viền. 0;
}
addBtn. bay lượn {
màu nền. #bbb;
}
div. liên quan đến {
chức vụ. tuyệt đối;
đứng đầu. 600px;
Phải. 75px;
}
Kết quả cuối cùng
Danh sách việc cần làm cuối cùng sẽ trông như thế này. Mặc dù bạn có thể tự do điều chỉnh logic và phong cách của ứng dụng này và biến nó thành của riêng bạn
Quả sung. Ứng dụng JavaScript To-Do [Kết quả cuối cùng]_JavaScript Projects
Ứng dụng thời tiết JavaScript
Đây là dự án thứ ba và cuối cùng trong bài viết này. Chúng tôi hy vọng bạn đã hiểu rõ hơn về JavaScript sau khi hoàn thành hai dự án trước đó. Dự án này sẽ giúp bạn củng cố mọi thứ bạn đã học cho đến nay. Bắt đầu nào
Quả sung. Ứng dụng thời tiết JavaScript
điều kiện tiên quyết
- Tạo tài khoản trên OpenWeatherMap vì chúng tôi đang sử dụng API của họ để hiển thị điều kiện thời tiết của một thành phố cụ thể
Quả sung. Trang web OpenWeatherMap
- Tạo khóa API miễn phí và sử dụng khóa đó trong ứng dụng này
- Ghi chú. Việc tạo khóa API của bạn rất quan trọng vì khóa trong mã sẽ không hoạt động
thư mục dự án
Thư mục dự án của bạn cuối cùng sẽ trông như thế này
mục lục. html
Tệp này chứa bố cục chung của ứng dụng thời tiết. Các phần tử được tạo kiểu thêm trong tệp CSS và được tạo tương tác trong một tệp JavaScript riêng
Theo thời tiết
Theo thời tiết
-°C
-
-
- Nhập cả biểu định kiểu CSS cũng như tệp JavaScript để phản ánh trong ứng dụng
- Use HTML tag to design the weather container.
- Use another
that contains the search bar, app title, and current location button.- Use
tag for notification whenever API fails to fetch the weather conditions.- Use
tag for sub box that contains the weather fetched by API.- Các div liên tiếp cho các biểu tượng thời tiết, nhiệt độ, mô tả và vị trí tương ứng
- Thêm logo Simplilearn vào ứng dụng web
app. js
This file contains the scripts attached to the HTML file and makes each element in the application interactive
// CHỌN CÁC PHẦN TỬ
const iconElement = tài liệu. truy vấnSelector[". biểu tượng thời tiết"];
const locationIcon = tài liệu. truy vấnSelector[". biểu tượng vị trí"];
const tempElement = tài liệu. truy vấnSelector[". giá trị nhiệt độ p"];
const descElement = tài liệu. truy vấnSelector[". mô tả nhiệt độ p"];
const locationElement = tài liệu. truy vấnSelector[". vị trí p"];
const notificationElement = tài liệu. truy vấnSelector[". thông báo"];
// Lấy trường đầu vào
đầu vào var = tài liệu. getElementById["tìm kiếm"];
hãy để thành phố = "";
đặt vĩ độ = 0. 0;
đặt kinh độ = 0. 0;
// Thực thi hàm khi người dùng nhả phím trên bàn phím
đầu vào. addEventListener["keyup", function [sự kiện] {
// Số 13 là phím "Enter" trên bàn phím
nếu [sự kiện. mã khóa === 13] {
// Hủy hành động mặc định nếu cần
sự kiện. ngăn chặn Mặc định[];
// Kích hoạt phần tử nút bằng một cú nhấp chuột
thành phố = đầu vào. giá trị;
getSearchWeather[thành phố];
bảng điều khiển. nhật ký [thành phố];
}
}];
// Dữ liệu chương trình
const thời tiết = {};
thời tiết. nhiệt độ = {
đơn vị. "độ C",
};
// ỨNG DỤNG CONSTS VÀ VARS
hằng KELVIN = 273;
// MÃ API
khóa const = "b8946f440b89108412a9559cc9e0707b";
// KIỂM TRA NẾU TRÌNH DUYỆT HỖ TRỢ VỊ TRÍ ĐỊA LÝ
if ["định vị địa lý" trong bộ điều hướng] {
hoa tiêu. định vị. getCienPosition[setPosition, showError];
} khác {
thông báoElement. phong cách. hiển thị = "khối";
notificationElement.innerHTML = "
Browser doesn't Support Geolocation
";}
// THIẾT LẬP VỊ TRÍ CỦA NGƯỜI DÙNG
hàm setPosition[vị trí] {
vĩ độ = vị trí. hợp âm. vĩ độ;
kinh độ = vị trí. hợp âm. kinh độ;
getWeather[vĩ độ, kinh độ];
}
biểu tượng vị trí. addEventListener["click", function [sự kiện] {
bảng điều khiển. nhật ký ["xin chào"];
getWeather[vĩ độ, kinh độ];
}];
// HIỂN THỊ LỖI KHI CÓ SỰ CỐ VỚI DỊCH VỤ ĐỊNH VỊ ĐỊA LÝ
hàm showError[lỗi] {
thông báoElement. phong cách. hiển thị = "khối";
notificationElement.innerHTML = `
${error.message}
`;}
// TÌM KIẾM ĐIỀU KIỆN THỜI TIẾT TẠI VỊ TRÍ NGƯỜI DÙNG NHẬP
function getSearchWeather[city] {
hãy để api = `http. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?q=${city}&appid=${key}`;
tìm nạp [api]
. sau đó [hàm [phản hồi] {
để dữ liệu = phản hồi. json[];
trả về dữ liệu;
}]
. sau đó [hàm [dữ liệu] {
thời tiết. nhiệt độ. giá trị = Toán học. tầng [dữ liệu. chủ yếu. tạm thời - KELVIN];
thời tiết. mô tả = dữ liệu. thời tiết[0]. Sự miêu tả;
thời tiết. iconId = dữ liệu. thời tiết[0]. biểu tượng;
thời tiết. thành phố = dữ liệu. Tên;
thời tiết. quốc gia = dữ liệu. hệ thống. quốc gia;
}]
. sau đó [hàm [] {
displayWeather[];
}];
}
// NHẬN THỜI TIẾT TỪ NHÀ CUNG CẤP API
hàm getWeather[vĩ độ, kinh độ] {
hãy để api = `http. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?lat=${vĩ độ}&lon=${kinh độ}&appid=${key}`;
tìm nạp [api]
. sau đó [hàm [phản hồi] {
để dữ liệu = phản hồi. json[];
trả về dữ liệu;
}]
. sau đó [hàm [dữ liệu] {
thời tiết. nhiệt độ. giá trị = Toán học. tầng [dữ liệu. chủ yếu. tạm thời - KELVIN];
thời tiết. mô tả = dữ liệu. thời tiết[0]. Sự miêu tả;
thời tiết. iconId = dữ liệu. thời tiết[0]. biểu tượng;
thời tiết. thành phố = dữ liệu. Tên;
thời tiết. quốc gia = dữ liệu. hệ thống. quốc gia;
}]
. sau đó [hàm [] {
displayWeather[];
}];
}
// HIỂN THỊ THỜI TIẾT ĐẾN UI
chức năng hiển thịThời tiết[] {
iconElement.innerHTML = ``;
tempElement.innerHTML = `${weather.temperature.value}°C`;
descElement. bên trongHTML = thời tiết. sự miêu tả;
yếu tố vị trí. innerHTML = `${thời tiết. thành phố}, ${thời tiết. nước}`;
}
- Chọn các phần tử HTML và lưu trữ chúng trong các biến riêng biệt
- Lấy trường đầu vào
- Xác định các hằng số cho dữ liệu ứng dụng, đơn vị và khóa API
- Kiểm tra xem trình duyệt có hỗ trợ định vị địa lý không
- Đặt vị trí của người dùng
- Hiển thị lỗi khi có sự cố với dịch vụ định vị địa lý
- Tìm nạp điều kiện thời tiết ở vị trí đã tìm kiếm
- Tìm nạp điều kiện thời tiết từ API tùy thuộc vào vị trí hiện tại của người dùng
- Hiển thị thời tiết lên giao diện người dùng
phong cách. css
Tệp này chứa biểu định kiểu để tạo kiểu cho các thành phần HTML được sử dụng trong ứng dụng này. Tất cả các kiểu CSS đều rõ ràng và được áp dụng cho từng lớp được xác định trong tệp HTML. Bạn có thể thay đổi các kiểu này theo lựa chọn thiết kế của mình
@mặt chữ {
họ phông chữ. Montserrat;
src. url["phông chữ/Montserrat-SemiBold. ttf"];
}
* {
họ phông chữ. "Montserrat";
}
cơ thể người {
hình nền. url["bg. jpg"];
màu nền. màu xanh thép;
chiều cao. 500px;
vị trí nền. trung tâm;
Bối cảnh Lặp lại. không lặp lại;
kích thước nền. che phủ;
}
thùng đựng hàng {
chiều rộng. 50%;
màu nền. #ffff;
tự sắp xếp. trung tâm;
trưng bày. khối;
lề. tự động 100px;
bán kính đường viền. 10px;
đệm-đáy. 50px;
bóng hộp. 5px 10px 20px màu đen;
}
tiêu đề ứng dụng {
chiều rộng. 100%;
chiều cao. 150px;
bán kính đường viền. 10px 10px 0 0;
trưng bày. uốn cong;
sắp xếp các mục. trung tâm;
biện minh cho nội dung. trung tâm;
hướng uốn. column;
}
tiêu đề ứng dụng p {
căn chỉnh văn bản. trung tâm;
đệm. 15px;
margin. 0 ô tô;
cỡ chữ. 1. 2em;
màu. #333;
}
#Tìm kiếm {
trưng bày. khối;
lề trái. auto;
lề phải. tự động;
bề rộng. 40%;
đệm. 5px;
chiều cao. 20px;
bán kính đường viền. 5px;
outline. none;
border. 3px solid steelblue;
}
notification {
background-color. #f8d7da;
display. none;
}
notification p {
color. #721c24;
cỡ chữ. 1. 2em;
lề. 0;
căn chỉnh văn bản. trung tâm;
padding. 10px 0;
}
weather-container {
chiều rộng. 100%;
height. 260px;
background-color. #f4f9ff;
margin-top. 20px;
}
weather-icon {
chiều rộng. 100%;
height. 128px;
}
biểu tượng thời tiết img {
trưng bày. khối;
margin. 0 ô tô;
}
location-icon {
chiều rộng. 100%;
chiều cao. 40px;
đệm. 10px;
}
biểu tượng vị trí img {
trưng bày. khối;
width. 32px;
height. 32px;
margin. 10px auto;
con trỏ. con trỏ;
đệm. 5px;
border. steelblue solid 2px;
bán kính đường viền. 10px;
color. steelblue;
}
temperature-value {
chiều rộng. 100%;
height. 60px;
}
temperature-value p {
đệm. 0;
lề. 0;
color. #293251;
font-size. 4em;
căn chỉnh văn bản. trung tâm;
}
temperature-value span {
color. #293251;
font-size. 0. 5em;
}
temperature-description p {
padding. 8px;
lề. 0;
color. #293251;
căn chỉnh văn bản. trung tâm;
cỡ chữ. 1. 2em;
}
location p {
lề. 0;
đệm. 0;
color. #293251;
căn chỉnh văn bản. trung tâm;
font-size. 0. 8em;
}
div. liên quan đến {
chức vụ. tuyệt đối;
đứng đầu. 600px;
đúng. 120px;
}
Kết quả cuối cùng
The weather application should look and feel like this in the end, though you are free to tweak the logic and style of this application and make it your own
Fig. JavaScript Weather Application [End Result]_JavaScript_Projects
Hope you learned the basics of JavaScript and enjoyed going through this ‘JavaScript Projects’ article
Get a firm foundation in Java, the most commonly used programming language in software development with the Java Certification Training Course
Get Ahead of the Curve and Master JavaScript Today
Are you wondering how you can gain the skills necessary to take advantage of JavaScript’s immense popularity now that you are familiar with fundamental concepts after working on these JavaScript Projects? We have your back. We offer a comprehensive JavaScript Training Course, that will help you become work-ready upon completion.
To learn more about Javascript projects, check out our Youtube video to code these projects along with us, and understand the concepts used in this article, better. If you’re an aspiring web or/and mobile developer, this JavaScript training will broaden your skills and open up new career horizons
Do you have any questions for us? Do mention them in the comments section of this ‘JavaScript Projects’ article and we'll have our experts answer them for you
Find our Full Stack Java Developer Online Bootcamp in top cities
NameDatePlaceFull Stack Java DeveloperCohort starts on 15th Feb 2023,
Weekend batchYour CityView DetailsFull Stack Java DeveloperCohort starts on 22nd Feb 2023,
Weekend batchYour CityView DetailsFull Stack Java DeveloperCohort starts on 15th Mar 2023,
Weekend batchYour CityView DetailsAbout the Author
Taha SufiyanTaha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography
Can you code a website with JavaScript?
In short, JavaScript is a programming language that lets web developers design interactive sites . Hầu hết các hành vi động mà bạn sẽ thấy trên một trang web là nhờ JavaScript, giúp tăng cường các hành vi và kiểm soát mặc định của trình duyệt.Where can I find JavaScript source code?
View web page source code For most browsers, to view inline JavaScript in the HTML source code, do one of the following. Nhấn phím tắt Ctrl + U. Right-click an empty area on the web page and select the View page source or similar option in the pop-up menu .Làm cách nào tôi có thể tạo một trang web bằng JavaScript?
Bắt đầu bằng cách mở trình soạn thảo văn bản yêu thích của bạn và tạo một thư mục mới [bạn có thể đặt tên cho thư mục theo bất cứ thứ gì bạn thích]. In that folder, create a file named index. html . If you open the webpage in the browser, you should see just "Hello, World. " in trên màn hình.Mã nguồn trong JavaScript là gì?
Mã nguồn và mã đối tượng đôi khi được gọi là phiên bản trước và sau của chương trình máy tính được biên dịch . However, source code and object code do not apply to script [noncompiled or interpreted] program languages, like JavaScript, since there is only one form of the code.Chủ Đề
- Use another