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

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,738
    Đã được thích:
    711
    Đ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
    Đang tải...
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,738
    Đã được thích:
    711
    Đ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>
    
     


Like và Share ủng hộ ITSEOVN