jsp基础案例1

目录

 

1_JS与html结合方式

2_JS注释 

3_JS变量

5_JS运算符_一元运算符

6_JS运算符_算数运算符

7_JS运算符_比较运算符

8_JS运算符_逻辑运算符

9_JS运算符_三元运算符

10_JS特殊语法

11_JS语法_for语句

12_JS语法_switch语句

13_JS语法_while语句

14_JS练习_99乘法表

15_JS对象_Function

16_JS对象_Array

17_JS对象_Date

18_JS对象_Math

19_JS对象_RegExp

20_JS对象_Global


1_JS与html结合方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title >Title</title>
    <!--
       内部JS
       外部JS
   -->
    <script>
        alert("Hello World");
    </script>

    <script src="js/a.js"></script>

</head>
<body>
<input type="text">

</body>
</html>

a.js文件 

alert("我是外部的js文件");


2_JS注释 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //单行注释

        /*
            多行注释1
            多行注释2
         */

    </script>
</head>
<body>

</body>
</html>

3_JS变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>

    <script >

        //定义变量
       /* var a  = 3;
        alert(a);

        a = "abc";
        alert(a);*/

       //定义number类型

        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num+"---"+typeof(num)+"<br>");
        document.write(num2+"---"+typeof(num2)+"<br>");
        document.write(num3+"---"+typeof(num3)+"<br>");

        //定义string类型

        var str = "abc";
        var str2 = 'edf';
        document.write(str+"---"+typeof(str)+"<br>");
        document.write(str2+"---"+typeof(str2)+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"---"+typeof(flag)+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"---"+typeof(obj)+"<br>");
        document.write(obj2+"---"+typeof(obj2)+"<br>");
        document.write(obj3+"---"+typeof(obj3)+"<br>");

    </script>


</head>
<body>

</body>
</html>


5_JS运算符_一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元运算符</title>
    <script>
        /*
        1. 一元运算符:只有一个运算数的运算符
					++,-- , +(正号) -(负号)
					* ++ --: 自增(自减)
						* ++(--) 在前,先自增(自减),再运算
						* ++(--) 在后,先运算,再自增(自减)

				    * +(-):正负号
				    * 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
                        * 其他类型转number:
                            * string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
                            * boolean转number:true转为1,false转为0
         */
        var num = 3;
        var a = ++ num ;

        document.write(num);// 4
        document.write(a); // 3 4
        document.write("<hr>");

        var b = +"123abc";
        document.write(typeof (b));
        document.write(b + 1);
        document.write("<hr>");

        var flag = + true;
        var f2 = + false;
        document.write(typeof (flag) + "<br>");//number
        document.write(flag + "<br>");// 1
        document.write(f2 + "<br>");// 0


    </script>
</head>
<body>

</body>
</html>


6_JS运算符_算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算数运算符</title>
    <script>
        var a = 3;
        var b = 4;

        document.write(a+b +"<br>");
        document.write(a-b +"<br>");
        document.write(a*b +"<br>");
        document.write(a/b +"<br>");
        document.write(a%b +"<br>");

    </script>
</head>
<body>

</body>
</html>


7_JS运算符_比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
    <script>
        /*
         * 比较运算符:
         *     * 比较方式
         *          1. 类型相同:直接比较
         *              * 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
         *          2. 类型不同:先进行类型转换,再比较
         *              * ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
         */


        document.write((3 > 4) +"<br>");

        document.write(("abc" < "acd") +"<br>");


        document.write(("123" == 123) +"<br>");

        document.write(("123" === 123) +"<br>");

    </script>
</head>
<body>

</body>
</html>


8_JS运算符_逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
    <script>
        /*
         * 逻辑运算符:
         *  &&: 与(短路)
         *  ||: 或 (短路)
         *  !:非
         *      * 其他类型转boolean:
         *          1. number:0或NaN为假,其他为真
         *          2. string:除了空字符串(""),其他都是true
         *          3. null&undefined:都是false
         *          4. 对象:所有对象都为true
         *
         *
         */
        var flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");

        document.write("<hr>");
        //number
        var num = 3;
        var num2 = 0;
        var num3 = NaN;
        document.write(!!num+"<br>");
        document.write(!!num2+"<br>");
        document.write(!!num3+"<br>");

        /*while(1){

        }*/

        document.write("<hr>");
        //string

        var str1 = "abc";
        var str2 = "";
        document.write(!!str1+"<br>");
        document.write(!!str2+"<br>");

        document.write("<hr>");


        // null & undefined
        var obj = null;
        var obj2;
        document.write(!!obj+"<br>");
        document.write(!!obj2+"<br>");

        document.write("<hr>");

        // null & undefined
        var date = new Date();
        document.write(!!date+"<br>");

        document.write("<hr>");



        obj = "123";
        if(obj != null && obj.length > 0){//防止空指针异常
            alert(123);
        }
        //js中可以这样定义,简化书写。
        if(obj){//防止空指针异常
            alert(111);
        }


    </script>
</head>
<body>

</body>
</html>


9_JS运算符_三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三元运算符</title>

    <script>
        var a = 3;
        var b = 4;

        var c = a > b ? 1:0;

        alert(c);


    </script>
</head>
<body>

</body>
</html>

10_JS特殊语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊语法</title>
    <script>
        //1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
        var a = 3;
        //alert(a);

        /*
            2. 变量的定义使用var关键字,也可以不使用
                * 用: 定义的变量是局部变量
                * 不用:定义的变量是全局变量(不建议)
         */

     /*   b = 4;
        alert(b);*/
        var b ;
        function fun(){
            b = 4;
        }
        fun();

        alert(b);
    </script>
</head>
<body>

</body>
</html>

11_JS语法_for语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for语句</title>
    <script>

       //1 ~ 100 求和  5050
        var sum = 0;
        for (var i = 1; i <= 100; i ++){
            sum += i;
        }
        alert(sum);

    </script>
</head>
<body>

</body>
</html>

12_JS语法_switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch语句</title>
    <script>

        var a;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;

        }


    </script>
</head>
<body>

</body>
</html>

13_JS语法_while语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while语句</title>
    <script>

       //1 ~ 100 求和  5050

        var sum = 0;
        var num = 1;

        while(num <= 100){
            sum += num;
            num ++;
        }
        alert(sum);

    </script>
</head>
<body>

</body>
</html>

14_JS练习_99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>

    <script>
        document.write("<table  align='center'>");
        //1.完成基本的for循环嵌套,展示乘法表
        for (var i = 1; i <= 9 ; i++) {
            document.write("<tr>");
            for (var j = 1; j <=i ; j++) {
                document.write("<td>");

                //输出  1 * 1 = 1
                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/

            document.write("</tr>");
        }
        //2.完成表格嵌套
        document.write("</table>");

    </script>
</head>
<body>

</body>
</html>


15_JS对象_Function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script >

        /*
            Function:函数(方法)对象
                1. 创建:
                    1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                    2. function 方法名称(形式参数列表){
                            方法体
                        }

                    3. var 方法名 = function(形式参数列表){
                            方法体
                       }
                2. 方法:

                3. 属性:
                    length:代表形参的个数
                4. 特点:
                    1. 方法定义是,形参的类型不用写,返回值类型也不写。
                    2. 方法是一个对象,如果定义名称相同的方法,会覆盖
                    3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
                    4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
                5. 调用:
                    方法名称(实际参数列表);

         *
         */


        //1.创建方式1
        var fun1 = new Function("a","b","c","alert(a);");
        //调用方法
       // fun1(3,4);
       // alert(fun1.length);
       //2. 创建方式2
        function fun2(a , b){
            alert(a + b);
        }

        //fun2(3,4);

        //alert(fun2.length);
        var fun3 = function(a,b){
            alert(a+b);

        }
        //alert(fun3.length);
       // fun3(3,4);


        /*fun2 = function(a , b){
            alert(a - b);
        }*/
        function fun2(a , b){
            //alert(a - b);
            alert(a);
            alert(b);
        }

        //fun2(3,4);

        //方法调用
        //fun2(1,2);
        //fun2(1);
        //fun2();
        //fun2(1,2,3);

        /*
         * 求两个数的和
         */
        /*function  add(a , b){
            return a + b;
        }*/
        /**
         * 求任意个数的和
         */
        function add (){
           var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        var sum = add(1,2,3,4);
        alert(sum);
        //add(1,3);

    </script>
</head>
<body>

</body>
</html>


16_JS对象_Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script >
        /*
            Array:数组对象
                1. 创建:
                    1. var arr = new Array(元素列表);
                    2. var arr = new Array(默认长度);
                    3. var arr = [元素列表];
                2. 方法
                    join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                    push()	向数组的末尾添加一个或更多元素,并返回新的长度。
                3. 属性
                    length:数组的长度
                4. 特点:
                    1. JS中,数组元素的类型可变的。
                    2. JS中,数组长度可变的。
         *
         */
        //1.创建方式1
       /* var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4];

        var arr4 = new Array();

        document.write(arr1 +"<br>");
        document.write(arr2 +"<br>");
        document.write(arr3 +"<br>");
        document.write(arr4 +"<br>");*/


       var arr = [1,"abc",true];
        document.write(arr +"<br>");

        document.write(arr[0] +"<br>");
        document.write(arr[1] +"<br>");
        document.write(arr[2] +"<br>");

        //document.write(arr[10] +"<br>");
        arr[10] = "hehe";
        document.write(arr[10] +"<br>");
        document.write(arr[9] +"<br>");

        //alert(arr.length);//11
        document.write(arr.join("--")+"<br>");
        arr.push(11);
        document.write(arr.join("--")+"<br>");
    </script>
</head>
<body>

</body>
</html>

1,abc,true
1
abc
true
hehe
undefined
1--abc--true----------------hehe
1--abc--true----------------hehe--11


17_JS对象_Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
    <script >
        /*
           Date:日期对象
                1. 创建:
                    var date = new Date();

                2. 方法:
                    toLocaleString():返回当前date对象对应的时间本地字符串格式
                    getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
         *
         */

        var date = new Date();

        document.write(date + "<br>");

        document.write(date.toLocaleString() + "<br>");

        document.write(date.getTime() + "<br>");
    </script>
</head>
<body>

</body>
</html>

Wed Mar 31 2021 16:42:38 GMT+0800 (中国标准时间)
2021/3/31 下午4:42:38
1617180158882


 

18_JS对象_Math

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
    <script >
        /*
           Math:数学对象
                1. 创建:
                    * 特点:Math对象不用创建,直接使用。  Math.方法名();

                2. 方法:
                    random():返回 0 ~ 1 之间的随机数。 含0不含1
                    ceil(x):对数进行上舍入。
                    floor(x):对数进行下舍入。
                    round(x):把数四舍五入为最接近的整数。
                3. 属性:
                    PI

         *
         */

        document.write(Math.PI +"<br>");
        document.write(Math.random() +"<br>");
        document.write(Math.round(3.14) +"<br>");
        document.write(Math.ceil(3.14) +"<br>");
        document.write(Math.floor(3.14) +"<br>");

        /**
         * 取 1~100之间的随机整数
         *      1. Math.random()产生随机数:范围 [0,1)小数
         *      2. 乘以 100 --> [0,99.9999] 小数
         *      3. 舍弃小数部分 :floor --> [0,99] 整数
         *      4. +1 -->[0,99] 整数 [1,100]
         *
         *
         */

       var number =  Math.floor((Math.random() * 100)) + 1;
       document.write(number);
    </script>
</head>
<body>

</body>
</html>

19_JS对象_RegExp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp对象</title>
    <script >

        /*

           2. 正则对象:
                1. 创建
                    1. var reg = new RegExp("正则表达式");
                    2. var reg = /正则表达式/;
                2. 方法
                    1. test(参数):验证指定的字符串是否符合正则定义的规范

         *
         */

        //1.
        var reg = new RegExp("^\\w{6,12}$");
        //2.
        var reg2= /^\w{6,12}$/;

        /*alert(reg);
        alert(reg2);*/

        var username = "zhangsan";

        //验证
        var flag = reg.test(username);
        alert(flag);


    </script>
</head>
<body>

</body>
</html>

20_JS对象_Global

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script >

        /*

           Global
				1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();
				2. 方法:
				    encodeURI():url编码
				    decodeURI():url解码

				    encodeURIComponent():url编码,编码的字符更多
				    decodeURIComponent():url解码

				    parseInt():将字符串转为数字
				        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
				    isNaN():判断一个值是否是NaN
				        * NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

				    eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
                3. URL编码
                   传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2



         *
         */
        var str = "http://www.baidu.com?wd=传智播客";
        var encode = encodeURI(str);
        document.write(encode +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        var s = decodeURI(encode);
        document.write(s +"<br>");//传智播客


        var str1 = "http://www.baidu.com?wd=传智播客";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1 +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        var s1 = decodeURIComponent(encode);
        document.write(s1 +"<br>");//传智播客


        var str = "a234abc";
        var number = parseInt(str);
        //alert(number + 1);

        var a = NaN;

        document.write(a == NaN);
        document.write(isNaN(a));

        var jscode = "alert(123)";
        eval(jscode);

    </script>
</head>
<body>

</body>
</html>

http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
http://www.baidu.com?wd=传智播客
http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
http://www.baidu.com?wd=传智播客
falsetrue

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
顺序如下: 1、多种字体大小显示 2、c:out标记输出 3、获取当前时间 4、include包含语句 5、建立错误处理页面的范例程序 6、jsp:forward 7、简单计数器 8、设置页面属性 9、使用GB2312编码 10、使用Big5编码 11、c:catch的用法 12、 begin、end和step的用法 13 、 循环 14、 varStatus 的四种属性 15、 的用法 16、从客户端传送数据至服务端 17、使用Unicode转义字符 18、使用朝鲜语字符集 19、JSP中最简单的国际化程序 20、错误检测 21、抛出异常 22、 的用法 23、和 的用法 24、 的用法 25、jsp-include的用法 26、汉字处理 27、网页重定向 28、自动更新网页 29、存取session 30、 的用法 31、单选型列表框 32、jsp文件中定义类 33、取得 JSP Container 版本 34、javax.servlet.jsp.JspWriter - out 对象 35、page 隐含对象 36、application 对象 37、PageContext 对象 38、Page范围 - pageContext 39、测试要显示的中文 40、IF控制符的操作 41、HttpServletRequest 接口所提供的方法 42、 网上测验 43、HttpSession - session 对象 44、 多选型列表框 45、解决浏览器 cache 的问题 46、使用 EL、JSTL 处理表单数据 47、 EL隐含对象 param、paramValues 48、EL隐含对象 pageContext 49、EL算术运算符 50、EL关系运算符 51、EL的运算符 52、选择钮的使用 53、检查框的使用 54、群组检查框的使用 55、数字、货币、百分数格式化 56、日期格式化 57、JSTL设置语言地区 58、Cookie数据的存取 59、session有效时间的设置与取得 60、session时间与ID 61、Cookie有效时间的设置 62、利用隐藏字段传送数据 63、JSP 使用 JavaBean 的方法 64、JSP 使用 JavaBean 65、范围为 Page 的 JavaBean范例程序 66、范围为 Request的 JavaBean 67、范围为 Session 的 JavaBean 68、范围为 Application 的 JavaBean 69、删除 JavaBean 70、url重组 71、Switch语句 72、环境变量 73、forward重定向 74、文件的建立与删除 75、取得文件属性 76、取得目录中的文件 77、目录的建立与删除 78、自Cookie存取日期/时间数据 79、管理Session变量 80、数据库中的记录数与记录指针位置 81、利用absolute方法设置记录位置 82、使用jsp指令生成Word文档 83、JSP网页模板 84、判断是否空白文件 85、cookie 用户登录次数 86、获取用户的真实IP地址 87、获取用户的浏览器信息 88、在客户端进行数据检查 89、在JSP中获取当前绝对路径 90、读取表单中所有参数 91、分行写入数据 92、显示请求URL 93、判断session是否过期 94、参数式查询数据库 95、取得数据库中各栏名称 96、使用JavaBean、设置和获取Bean的属性 97、设置Bean的一个属性与输入参数关联 98、实现基于数据库的站内搜索 99、DOM读取XML文档 100、SAX读取XML文档

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值