Hướng dẫn học Javascrip cơ bản

Javascript là ngôn ngữ lập trình web tương tác với trình duyệt. javascript không ảnh hưởng đến web server cũng như không kết nối cơ sở dữ liệu. Cùng tham khảo những hướng dẫn học Javascrip cơ bản nhé

Javasript là gì?

Javascript là ngôn ngữ kịch bản cho phép ta xây dựng các đoạn chương trình dùng kiểm tra thông tin trên form, tạo hiệu ứng, tương tác với người sử dụng...
Hầu hết các trình duyệt hiện nay đều hỗ trợ Javascript do đó Javascript được các nhà thiết kế website chọn làm ngôn ngữ lập trình ở phía Client
Javascript được tích hợp sẵn trong các trình duyệt do đó ta có thể viết và chạy chương trình mà không cần biên dịch (complie)

Hướng dẫn cơ bản trong Javascript:

Đặt code Javascript trong tag script:
<script language="Javascript">
code Javascript đặt ở đây
</script>
Ví dụ: Hiển thị dòng chữ "Tự học javascript cơ bản" bằng đoạn mã Javascript ta viết như sau:
<html>
      <body>
           <script language="Javascript">
           document.write("Tự học javascript cơ bản");
           </script>
     </body>
<html>
Ẩn đoạn mã Javascript:
<script language="Javascript">

</script>
Ví dụ ta muốn ẩn đoạn code javascript 'document.write("Javascript cơ bản cho người mới học");' ta viết như sau
<html>
      <body>
            <script language="Javascript">
               
           </script>
       <body>
</html>
Tag noscript:
Thường được dùng để thông báo cho người sử dụng khi trình duyệt không hỗ trợ Javascript hoặc Javascript bị tắt (disable)
<noscript>
Hiển thị thông báo ở đây
</noscript>
Ví dụ: Hiển thị thông báo "Trình duyệt của bạn không hỗ trợ Javascript, hoặc Javascript đang bị tắt" ta viết như sau
<html>
     <body>
         <noscript>
            Trình duyệt của bạn không hỗ trợ Javascript, hoặc Javascript đang bị tắt
        </noscript>
    </body>
</html>
Chèn file Javascript từ bên ngoài:
Cách này thường được sử dụng vì nó giúp ta thu gọn code, dễ quản lý hơn.
<script language="Javascript" src="/đường dẫn file file javascript"></script>
Ví dụ: chèn file script.js trong thư muc js ta viết như sau
<script language="Javascript" src="/js/script.js"></script>
Chú thích trong Javascript:
- Chú thích trên một dòng
  // dòng chú thích ghi sau dấu này
- Chú thích trên nhiều dòng
  /*
  Chú thích nhiều dòng ghi trong đây
  */

Câu lệnh điều kiện trong Javascript:

Cú pháp: if(điều kiện) câu lệnh

Ví dụ: Hiển thị trên màn hình dòng chữ không dấu: "thiet ke web cao cap" nếu biến a = 1

<html>
     <body>
         <script language="Javascript">
             var a = 1;
             if(a = 1){
                 document.write("thiet ke web cao cap");
            }
        </script>
    </body>
</html>
Khởi tạo Variable (biến)

Cú pháp: tên biến = dữ liệu;

Ví dụ: Tạo biến a với dữ liệu là "thiết kế website du lịch", sau đó hiển thị biến a ra màn hình.

<html>
    <body>
         <script language="Javascript">
               var a = "thiết kế website du lịch";
               document.write (a);
        </script>
    </body>
</html>
Các kiểu dữ liệu trong Javascript:
- Kiểu String (Chuổi): được viết trong dấu nháy đơn hoặc nháy kép
  
  Ví dụ: document.write('Xin chào các bạn học môn javascript cơ bản') hoặc var a = "học javascript dễ hay khó?";
- Kiểu Numeric (số):
  
  Ví dụ: var a = 165
Thực hiện phép toán trong Javascript:

Ví dụ: Thực hiện phép toán 20 chia 2 trong Javascript, sau đó in ra màn hình.

<html>
      <body>
            <script language="Javascript">
                var math = 20 / 2;
                document.write (math);
           </script>
     </body>
</html>

=> Kết quả hiển thị trên màn hình: 10
Ghép chuỗi trong Javascript:

Ví dụ: Ghép hai chuỗi "dịch vụ" và "seo từ khóa" trong Javascript, sau đó in ra màn hình

<html>
      <body>
            <script language="Javascript">
                var chuoi1 = "dịch vụ";
                var chuoi2 ="seo từ khóa";
                var congchuoi = chuoi1 + " " + chuoi2;
                document.write (congchuoi);
           </script>
     </body>
</html>

=> Kết quả hiển thị trên màn hình: dịch vụ seo từ khóa
Tìm kiếm chuỗi trong Javascript: Kết quả sẽ trả về vị trí cuả chuỗi cần tìm

Ví dụ: Tìm vị trí từ "seo" trong chuổi :"dịch vụ seo website chuyên nghiệp"

<html>
      <body>
            <script language="Javascript">
               var chuoi = "dịch vụ seo website chuyên nghiệp";
               var tim = chuoi.search("seo");
              document.write(tim);
           </script>
     </body>
</html>

=> Kết quả sẽ hiển thị: 8
Thay thế chữ trong một chuỗi bằng Javascript:

Ví dụ: Thay thế chữ "chi phí thấp" bằng chữ "giá rẻ" trong chuỗi: "dịch vụ seo chi phí thấp"

<html>
      <body>
            <script language="Javascript">
               var chuoiold = "dịch vụ seo chi phí thấp";
               var chuoinew = chuoiold.replace("chi phí thấp","giá rẻ");
               document.write(chuoinew);
           </script>
     </body>
</html>

=> Kết quả sẽ hiển thị: dịch vụ seo giá rẻ

Hướng dẫn dùng một số Javascript

Khái niệm: Javascript là ngôn ngữ lập trình web tương tác với trình duyệt. javascript không ảnh hưởng đến web server cũng như không kết nối cơ sở dữ liệu.

Để học và lập trình ra một script ngon lành thì mất khá nhiều thời gian và hiển nhiên là khi bạn sử dụng thì mọi người đều có thể lấy nó và sử dụng vì nó là ngôn ngữ trình duyệt. Nên khuyên là học cách sử dụng và download về xài vì tất cả đều public trên mạng.

Sau đây tôi muốn chia sẽ với các bạn cách sử dụng một số javascript thông dụng:

Script đồng hồ( IE FF nghĩa là sử dụng được IE&FF).
Bước 1: Chép đoạn code dưới đây vào nơi mà bạn muốn hiện đồng hồ.

<!--

<script>

var dayarray=new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");

var montharray=new Array("Tháng giêng","Tháng hai","Tháng ba","Tháng tư","Tháng năm","Tháng sáu","Tháng bảy","Tháng tám","Tháng chín","Tháng mười","Tháng mười một","Tháng mười hai");

function getthedate(){

var mydate=new Date(); var year=mydate.getYear();

if (year < 1000) year+=1900

var day=mydate.getDay(); var month=mydate.getMonth(); var daym=mydate.getDate();

if (daym<10) daym="0"+daym; var hours=mydate.getHours(); var minutes=mydate.getMinutes() var seconds=mydate.getSeconds(); var dn="Sáng" if (hours>=12) dn="Chiều"; if (hours>12){ hours=hours-12 }

if (hours==0) hours=12; if (minutes<=9) minutes="0"+minutes;

if (seconds<=9) seconds="0"+seconds;

var cdate=dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn

if (document.all) document.all.clock.innerHTML=cdate

else if (document.getElementById) document.getElementById("clock").innerHTML=cdate

else document.write(cdate)}

if (!document.all&&!document.getElementById) getthedate()

function goforit(){if (document.all||document.getElementById) setInterval("getthedate()",1000)}

</script>

<span id="clock"></span>

-->

Bước 2: Vào tag, gõ thêm để được hư sau.

Hiện ngày hôm nay:
Paste đoạn code sau vào nơi bạn muốn hiện trong trang html:

<!--

<script>

var mydate=new Date(); var year=mydate.getYear();

if (year < 1000) year+=1900;

var day=mydate.getDay(); var month=mydate.getMonth(); var daym=mydate.getDate();

if (daym<10) daym="0"+daym;

var dayarray=new Array("Chủ nhật","Thứ Hai","Thứ Ba","Thứ Tư","Thứ Năm","Thứ Sáu","Thứ Bảy");

var montharray=new Array("-1","-2","-3","-4","-5","-6","-7","-8","-9","-10","-11","-12");

document.write(""+dayarray[day]+", Ngày "+daym+" "+montharray[month]+"-"+year+"");

</script>

-->

SD Menu FF1+ IE5+ Opr7:
Đây là javascript tạo dùng để tạo menu cho site của bạn. Đây là menu đứng, 2 cấp. Nhắp vào 1 menu cấp1 sẽ xổ ra các menu con (cấp 2). Menu này có khả năng nhớ trình trạng đóng mở của các mục mà user đã dùng trong lần vào site trước (ghi cookie).

Bước 1: Download các file cần thiết (mình để link down ở cuối bài).
Bước 2: Mở trang html bạn định đưa menu vào rồi vào tag head, attach file css sdmenu.css
Bước 3: Tiếp tục nhắp trong tag head, chèn file javascript sdmenu.js
Bước 4: Nhắp dưới tag script mới xuất hiện, và Paste đoạn code sau vào:

<!--

<script type="text/javascript">// <![CDATA[ var myMenu;window.onload = function() {myMenu = new SDMenu("my_menu");myMenu.init();}; // ]]></script>

-->

Bước 5: Chép đoạn code sau và Paste vào nơi bạn muốn hiện menu:

<!--

<div style="float: left" id="my_menu" class="sdmenu">

<div>

<span>Online Tools</span>

<a href="#">Image Optimizer</a>

<a href="#">FavIcon Generator</a>

<a href="#">Email Riddler</a>

<a href="#">Button Maker</a></div>

<div>

<span>Support Us</span>

<a href="#">Recommend Us</a>

<a href="#">Link to Us</a>

<a href="#">Web Resources</a></div>

<div class="collapsed">

<span>Partners</span>

<a href="#">JavaScript Kit</a>

<a href="#">CodingForums</a>

<a href="#">CSS Examples</a></div>

</div>

-->

Featured Content Slider v2.4: FF1+ IE5+ Opr7
Đây là javascript tạo hiệu ứng SlideSlow (trình diễn) tự động các thông tin trong trang web của bạn (ảnh, tin tức, sản phẩm). User có thể chọn thành phần muốn xem hoặc script sẽ chuyển tự động. Có hiệu ứng chuyển giữa các thành phần.

Bước 1: Download file ở cuối bài.
Bước 2: Chép đoạn code sau vào tag head trong file html của bạn

<!--

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

</script>

-->

Bước 3: Chép đoạn code sau vào trong tag body, nơi bạn muốn hiệu ứng xuất hiện

<!--

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">

Content 1 Here.

<a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></div>

<div class="contentdiv">

Content 2 Here.</div>

<div class="contentdiv">

Content 3 Here.</div>

</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">

featuredcontentslider.init({

id: "slider1", //id of main slider DIV

contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]

nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"

enablefade: [true, 0.2], //[true/false, fadedegree]

autorotate: [true, 3000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

}

})

</script>

-->

Ghi chú:

Các div chứa nội dung bạn muốn cuộn có class là contentdiv. Nội dung cuộn là các chữ màu xanh Bạn có thể thay đổi nội dung tùy ý.
Có thể thêm div contendiv mới.
Có thể sửa Previous, Next thành tiếng việt.

Kết luận: Sau đây là file liên quan đến bài viết và một số file javascipt thông dụng khác. Goodluck.

Kinh nghiệm học thiết kế web

Hướng dẫn học thiết kế web bằng HTML

Cách thiết kế giao diện website bằng photoshop

Cách thiết kế layout web đẹp mắt

Cách thiết kế email html đơn giản nhất

(St)