Miễn 100% phí hồ sơ du học Nhật + Tặng 5~9 triệu/bạn

Wednesday, December 27, 2017

Nhập môn làm web: HTML và JAVASCRIPT

Đại nghĩa của hôm nay là gì?
今日の大義はなんでしょう。

Đó là nghiên cứu về HTML và Javascript. Đây là nền tảng của việc làm web. Có lẽ bạn cần sách hoặc trang web hướng dẫn chi tiết, nên cách tốt nhất là khảo sát. Tôi sẽ không nói về mặt kỹ thuật mà chỉ nói về mặt lý tưởng. HTML là nền tảng của trang web, tên chính thức của nó là Hyper Text Markup Language ngôn ngữ đánh dấu siêu văn bản.

Sở dĩ gọi là "siêu" có lẽ vì nó có liên kết và có thể thể hiện hình ảnh, thậm chí ngày nay là âm thanh, video vv. Nó khác với sách giấy ở chỗ, bạn nhấp con trỏ vào liên kết là nhảy ngay được sang trang khác nhỉ?

Thế nào cũng được. Làm thế nào tạo file html?

Ví dụ bạn tạo một file text nội dung sau (dùng Notepad vv):
<html>
<head>
    <title>Yurica Dictionary</title>
</head>
    <body>
        Cứ đi sẽ đến. Cứ tìm sẽ thấy. Cứ gõ cửa sẽ mở. Cứ mơ mộng sẽ thành hiện thực.<br>
        行けば着く。探せば見つかる。ドアを叩けば開く。夢見れば叶う。
    </body>
</html>

Sau đấy lưu thành file notfound.html chẳng hạn, quan trọng là đuôi phải là ".html". Sau đó, bạn mở bằng trình duyệt Chrome hay Firefox hay Safari vv.

Tóm lại thì file html sẽ mở bằng trình duyệt. Trong file trên thì chúng ta dùng tag <title> tạo tiêu đề (trên thanh tiêu đề của trình duyệt), <body> là thân trang, còn <br> là xuống dòng. Bạn không thể gõ xuống dòng bằng cách Enter được.

Để học html thì đây là cách mà tôi nghĩ là tốt nhất: https://www.w3schools.com/
Hồi học tiếng Nhật ở bển tôi vô đây suốt để chơi là chính, học là phụ.

Nếu bạn muốn tạo một liên kết thì ví dụ:
<a href="http://sea.saromalang.com">Trang web Sea</a>
Nếu bạn muốn biểu diễn một hình ảnh:
<img src="http://sea.saromalang.com/logo/logo.png">
chẳng hạn.

Javascript để làm gì?

Đây là công cụ để "thao tác" ngay trên trang web. HTML về cơ bản chỉ là một trang web "tĩnh", các chữ sẽ cố định như khi bạn viết ra. Javascript là một thao tác nào đó, ví dụ cho một ô để nhập giá trị, bấm nút thì sẽ tính toán chẳng hạn. Nói thế thì lại đâm lằng nhằng khó hiểu, giờ tôi cũng rối cả rồi.

Đây là ví dụ cụ thể này:
>>Công cụ tính điểm JLPT

Nhân tiện, nếu bạn muốn mở trang web trong một tab mới thay vì mở trong tab bạn đang coi thì dùng:
<a href="http://www.saromalang.com" target="_blank">Trang web tiếng Nhật</a>

Ví dụ dùng Javascript để chạy âm thanh khi click vào:
>>Bảng chữ cái hiragana

Đây là ví dụ dùng Javascript để tạo ô tìm kiếm mở ra trong trang mới mà tôi dùng tại trang web Saromalang:
<html>
<script>
function myFunction_towa() {
    var x = document.getElementsByName("mylook")[0].value;
    var url = "https://www.google.com/#q=" + x + "とは";
    window.open(url,'_blank');
}
</script>
    <body>
        <input type="text" name="mylook" size="60" value="">&nbsp;&nbsp;<button onclick="myFunction_towa()">Google↗</button>
    </body>
</html>

Bước đầu tiên: Tự làm trang blog của bản thân

Nếu các bạn muốn làm trang giống như trang này thì xem hướng dẫn tại đây:
>>Hướng dẫn làm web miễn phí với Blogger

Nói chung là tự thực hành ngay từ đầu thì có tương lai hơn. Bạn có thể dùng Javascript tại Blogger. Hãy tự làm các công cụ như công cụ tính giá trị bất động sản tại trang web này chẳng hạn.

Hoặc bạn cũng có thể làm trang web bằng Wordpress tuy nhiên nếu bạn làm loại Wordpress tự host thì bạn phải có hosting (= không gian trên web) đã. Chuyện đấy tính sau, cũng chưa cần thiết.

Nếu bạn dùng Blogger thành thạo là bạn đã có một blog nhìn khá chuyên nghiệp rồi. Nếu muốn hoành tráng hơn mới dùng Wordpress, nhưng đấy là khi bạn có tay nghề lập trình kha khá rồi đã.

Các bạn muốn phát huy khả năng ngôn ngữ tiếng Nhật để trở thành kỹ sư cầu nối xuất sắc thì hãy bắt đầu học IT ngay từ giờ nhé.
Mark

Tham khảo: Công cụ soạn thảo HTML đơn giản
Notepad++: https://notepad-plus-plus.org/
Hoặc: https://portableapps.com/apps/development/notepadpp_portable
ez-HTML (Japanese): http://www.w-frontier.com/

Bonus: Làm sao DEBUG (sửa lỗi) Javascript?

Hãy dùng hàm Alert (hiện cửa sổ thông báo). Ví dụ bạn có thể xem tại trang học Kanji phần dành cho smartphone.

Tóm lại là khi  bạn viết hàm số xong rồi, bấm nút và ... không thấy gì cả. Không biết hàm số có chạy không, chạy tới đâu. Hoặc biến số giá trị bị sai (gõ nhầm nên giá trị là NUL) vv. Bạn dùng hàm Alert ví dụ như sau:
<script>
function Test() {
      alert("Hello! Function works";
      var x = document.getElementById("demo").value;
      alert(x);
}
</script>

Ví dụ ngay tại trang này:
Javascript:
<script>
function myFunction() {
      var x = document.getElementById("myValue").value;
      alert(x);
}
</script>

Html:
Your string: <input id="myValue" type="text"> <button onclick="myFunction()">Click me</button>

Your string:

No comments:

Post a Comment