b8: Tự học javascript căn bản bài 1

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi admin, 7/1/16.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    5,023
    Đã được thích:
    1,221
    Điểm thành tích:
    113
    Giới tính:
    Nam
    b8: Tự học javascript căn bản bài 1​
    Cần lưu ý tại bài học:
    • document.write('Nội dung cần in'); // in nội dung ra ngoài màn hình.
    • var a=prompt("Nội dung hiển thị ngoài màn hình",''); // tạo khung textbox cho người dùng nhập vào. Dữ liệu nhập vào sẽ được truyền cho biến a.
    • var b=parseInt(prompt("Nhập tuổi của bạn",'')); // nhập vào giá trị, giá trị được truyền vào biến b, biến b sẽ được hàm parseInt chuyển thành kiểu số thực int.
    • var laygiatri=confirm("Bạn chọn Ok hay Cancal"); // tạo hộp thoại OK, Cancel và trả về giá trị cho biến laygiatri.
    • alert(laygiatri); // in dữ liệu biến laygiatri ra màn hình.
    Các phép toán trong javascript
    • Các phép toán trong javascript : +, -, *, /, %
    • Các phép quan hệ so sánh: >, < , >=, <=, ==, !=
    • Các phép logic : && (and), || (or), ! (not, phủ định)
    Demo online: xem demo tại đây tự học javascript bài 1.

    Code :     Trong code đã được ghi chú khá rõ, các bạn đọc code sẽ hiểu rõ hơn.
    HTML:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bai 8: Học javascript căn bản bài 1</title>
<meta name="description" content="Bai 8: Học javascript căn bản bài 1, Học javascript căn bản bài 1, Học javascript căn bản bài 1" >

</head>

<body>

<h1 align="center">Bai 8: Học javascript căn bản bài 1</h1>


<!-- start code javascript -->

<script type="text/javascript">

    document.write("<p alighn='center'>Hello <b>Javascript</b></p>"); /* lệnh document.write('text'): xuất ra dạng text dạng html trên trình duyệt */
 
    document.write("<p>Đoạn văn chứa nội dung</p>");

    // Start tạo bảng trong javascript
    document.write("<table width='600' border='1' align='center' cellpadding='5'><caption>Tạo Bảng Bằng Javascript</caption>");
 
    document.write("<tr><th width='300' height='40'>Tên</th> <th>Tuổi</th>  </tr>");
 
    document.write("<tr><td align='center'>Tí</td><td align='center'>19</td></tr>");
 
    document.write("</table>");
    // Ennd tạo bảng trong javascript
 
    //START Biến trong javascript
    //có dữ liệu thì không cần khai báo trước.
    a=10;
    b=5;
    c='hello';
    //không có dữ liệu thì dùng biến var để khai báo kèm theo
    var d;
    //xuất biến ra ngoài và nối chuỗi trong javascript
    document.write("Giá trị biến a :<b>"+a+"</b>");
    //END Biến trong javascript
 
    /*START Các phép toán trong javascript : +, -, *, /, %
            Các phép quan hệ so sánh: >, < , >=, <=, ==, !=
            Các phép logic : && (and), || (or), ! (not, phủ định)
    */
    d=a+b;
    document.write("<br>"+d);
    //END Các phép toán trong javascript
 
    // START Bài tập tạo bảng bằng các phép toán
    dd=a/b;
    document.write("<table width='750' border='1' align='center' cellpadding='5'><caption>Bài tập tạo bảng bằng các phép toán</caption>");
 
    document.write("<tr><th width='150' height='40'></th> <th>+</th> <th>-</th>  <th>*</th>  <th>/</th></tr>");
 
    document.write("<tr><td align='center'>a = "+a+"</td><td align='center' rowspan='2'>"+(a+b)+"</td> <td align='center'  rowspan='2'>"+(a-b)+"</td> <td align='center'  rowspan='2'>"+(a*b)+"</td> <td align='center'  rowspan='2'>"+ dd+" </td> </tr>");
 
     document.write("<tr><td align='center'>b = "+b+"</td></tr>");
 
    document.write("</table>");
 
    // END Bài tập tạo bảng bằng các phép toán
 
    // Start Tạo hộp thoại thông báo alert, tạo hộp thoại prompt
    alert("Nội dung thông báo biến a: "+a);
    a=prompt("Nhập giá trị a mới",a); // kết quả trả về của hàm prompt là chuỗi 
    alert("Giá trị a mới vừa nhập là: "+a);
    // END Tạo hộp thoại thông báo alert, tạo hộp thoại prompt
 
    //Hàm chuyển chuỗi thành số
    tam=parseInt("12");//parseFloat(), isNaN
 
    // Satrt hộp thoại confirm
    laygiatri=confirm("Bạn chọn Ok hay Cancal");
    alert(laygiatri);
    // End hộp thoại confirm
 
    //Bài tập
    // Start tạo bảng trong javascript nhập từ hộp thoại
 
    a=prompt("Nhập tên của bạn",'');
    b=parseInt(prompt("Nhập tuổi của bạn",''));
 
    document.write("<br> <br> <table width='600' border='1' align='center' cellpadding='5'><caption>Tạo Bảng Bằng Javascript nhập từ hộp thoại</caption>");
 
    document.write("<tr><th width='300' height='40'>Tên</th> <th>Tuổi</th>  </tr>");
 
    document.write("<tr><td align='center'>"+a+"</td><td align='center'>"+b+"</td></tr>");
 
    document.write("</table>");
 
    // Ennd tạo bảng trong javascript  nhập từ hộp thoại
 
    // START Bài tập tạo bảng bằng các phép toán do người dùng nhập vào các con số
 
    a=parseInt(prompt("Nhập giá trị a",''));
    b=parseInt(prompt("Nhập giá trị b",''));
    ab=a/b;
    document.write("<br> <br> <table width='750' border='1' align='center' cellpadding='5'><caption>Bài tập tạo bảng bằng các phép toán do người dùng nhập vào các con số</caption>");
 
    document.write("<tr><th width='150' height='40'></th> <th>+</th> <th>-</th>  <th>*</th>  <th>/</th></tr>");
 
    document.write("<tr><td align='center'>a = "+a+"</td><td align='center' rowspan='2'>"+(a+b)+"</td> <td align='center'  rowspan='2'>"+(a-b)+"</td> <td align='center'  rowspan='2'>"+(a*b)+"</td> <td align='center'  rowspan='2'>"+ ab+" </td> </tr>");
 
    document.write("<tr><td align='center'>b = "+b+"</td></tr>");
 
    document.write("</table>");
 
    // END Bài tập tạo bảng bằng các phép toán do người dùng nhập vào các con số
 
</script>


<!-- End code javascript -->



</body>

</html>
     
    Cảm ơn đã xem bài:

    b8: Tự học javascript căn bản bài 1

    Chỉnh sửa cuối: 7/1/16
    admin, 7/1/16
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    5,023
    Đã được thích:
    1,221
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Một số code bài tập trong bài :

    Code 1 :

    Demo bài 1:     Xem demo bài 1 về javascript tại đây.
    HTML:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bai 8: Học javascript căn bản lệnh điều kiện bài 1</title>
<meta name="description" content="Bai 8: Học javascript căn bản lệnh điều kiện bài 1, Học javascript căn bản lệnh điều kiện bài 1" >
</head>

<body>
    <h1 align="center">Bai 8: Học javascript căn bản lệnh điều kiện bài 1</h1>
    <script type="text/javascript">
        a=6;
        b=10;
        c=12;
     
        //lệnh rẽ nhánh IF
        /*    Dạng 1 : Cấu trúc
            if(dieu_kien)
            {
                thuc_hien_khi_lenh_dung;
            }
        */
        //VD Dạng 1
        if(a>b)
        {
            document.write('Hello Javascript<br><br>');
        }
        /*    Dạng 2 : Cấu trúc
            if(dieu_kien)
            {
                thuc_hien_khi_DK_dung;
            }
            else
            {
                thuc_hien_khi_DK_Sai;
            }
        */
        //VD Dạng 2
        if(a<b)
        {
            document.write("Hello abc<br><br>"); 
        }
        else
        {
            document.write("Hello xyz<br><br>");
        }
     
        //Bài tập 1 : tìm số lớn nhất trong 3 số vừa nhập
     
        /*
     
        a=parseInt(prompt("Nhập giá trị a",''));
        b=parseInt(prompt("Nhập giá trị b",''));
        c=parseInt(prompt("Nhập giá trị c",''));
        document.write("Giá trị a: "+a+"<br>Giá trị b: "+b+"<br>Giá trị c: "+c + "<br><br>")
        */
     
        //cách 1
        /*
        if(a>b && a>c)
        {
            document.write("Giá trị a ="+a+" là số lớn nhất")
        }
     
        if(b>a && b>c)
        {
            document.write("Giá trị b ="+b+" là số lớn nhất")
        }
        if(c>a && c>b)
        {
            document.write("Giá trị c ="+c+" là số lớn nhất")
        }
        */
        //cách 2
        /*
        if(a>b)
        {
            if(a>c)
            {
                alert("Số lớn nhất " + a)
            }
            else
            {
                alert("Số lớn nhất "+ c);
            }
        }
        else
        {
            if(b>c)
            {
                alert("Số lớn nhất " + b)
            }
            else
            {
                alert("Số lớn nhất "+ c);
            }
        }
        */
        //Cách 3
        /*
        Max=a;
        if(Max<b)
        {
            Max=b;
        }
        if(Max<c)
        {
            Max=c
        }
        alert("Số lớn nhất "+ Max);
        */
     
        /*Bài tập 2 :
         Nhập vào 2 số nguyên bất kỳ.
         Nhập vào 1 phép toán(+, -, *, /)
         In ra trang web kết quả của 2 số với phép toán vừa nhập
        */
     
        a=parseInt(prompt("Nhập số thứ 1",''));
        b=parseInt(prompt("Nhập số thứ 2",''));
        pheptoan=prompt("Nhập phép toán +, - , * , /",'');
        var ketqua;
     
        //cách 1
     
        if(pheptoan=="+")
        {
            ketqua=a+b;
            document.write("Kết quả của "+a+"+"+b+"="+ketqua);
        }
        else if(pheptoan=="-")
        {
            ketqua=a-b;
            document.write("Kết quả của "+a+"-"+b+"="+ketqua);
        }
     
        else if(pheptoan=="*")
        {
            ketqua=a*b;
            document.write("Kết quả của "+a+"*"+b+"="+ketqua);
        }
     
        else if(pheptoan=="/")
        {
            if(b!=0)
            {
                ketqua=a/b;
                document.write("Kết quả của "+a+"/"+b+"="+ketqua);
            }
            else
            {
                document.write("Phép toán / giá trị số thứ 1 không được bằng 0");
            }
         
        }
        else
        {
            document.write("Bạn đã nhập sai phép toán, vui lòng nhập lại")
        }
     
     
        //cách 2
     
        if(c=="+")
        {
            ketqua=a+b;
        }
        else if(c=="-")
        {
            ketqua=a-b;
        }
        else if(c=="*")
        {
            ketqua=a*b;
        }
        else if(c=="/")
        {
            if(b!=0)
            {
                ketqua=a/b;
            }
            else
            {
                document.write("Phép toán / giá trị số thứ 1 không được bằng 0");
            }
        }
     
        document.write("Kết quả của "+a+"+pheptoan+"+b+"="+ketqua);
     
    </script>
</body>

</html>
     
    admin, 7/1/16
    #2


Chủ để tương tự : Tự học
Diễn đàn Tiêu đề Date
Lập trình Javascript, js Tự học JavaScript căn bản cho website, khái niệm về javaScript cần biết 19/5/14
Lập trình Javascript, js Second Counter JavaScript, tạo biên điếm tự động tăng trong JavaScript 8/10/22
Lập trình Javascript, js In để kiểm tra toàn bộ các phần tử mảng array trong javascript js như thế nào? 10/9/22
Lập trình Javascript, js Tạo Animation Count số điếm tăng từ A đến B trong javascript như thế nào? 8/5/22
Lập trình Javascript, js Enter Textbox tự động Focus Click Button trong Javascript như thế nào? 18/4/20