java:javaScript(定义方式,循环语句,函数与参数,事件机制,控制台记录,event事件获取键盘ascii,confirm和prompt,事件和内置对象,获取input,点击更换背景色)

1. 定义JS的两种方式:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <!-- 定义js -->
        <!-- js的两种定义方式可以混用,加载顺序为自然顺序 -->
        <!-- 不要把两种定义方式合并起来写 -->
        <!--第一种-->
        <script type="text/javascript">
            function testButton() {
                alert("hello js!");
            }
        </script>
        <!-- 第二种 -->
        <script type="text/javascript" src="first_js.js"></script>
        <!-- 第二种 错误-->
        <!--<script type="text/javascript" src="first_js.js">
        
            function test() {
                
            }
        
        </script>-->
    </head>
    
    <body>
    
        <input type="button" value="测试js" onclick="testButton();" />
        <input type="button" value="测试js" onclick="test();" />
    
    
    </body>

</html>

 

2.if,循环语句:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            <!-- js和Java都是一种语言 -->
            <!-- Java是强类型的语言,JavaScript是弱类型的语言:所谓的强弱,就是看定义变量时存不存在多种类型 -->
            <!-- 在js中无论声明什么样的数据,都只需要一个类型 var -->
            var global = "我是全局变量";
            function test() {
                var string = "zhangsan";
                var integer = 15;
                var doubleIt = 12.11;
                <!-- 特殊定义全局变量的方式 -->
                blobal2 = "我是global2";<!-- 在函数中声明一个变量,如果不声明变量类型var,就默认是全局变量 -->
                alert(string+"-------"+integer+"------"+doubleIt+"-------"+global+"-------"+blobal2);
            }
            
            <!--  -->
            /*
                等同于===就等同于==,只是两个等号会自动把类型转换为一致(如果var string = "12",var int1 = 12,在js中使用==号就会自动把string="12"--->string=12)
            */
            function test2() {
                var int1 = "12";
                var int2 = 12;
                if(int1 == int2) {
                     alert(111);
                } else {
                    alert(222);
                }
            }
            
            /*
                运算符
            */
            function test3() {
            var int1 = 1;
            var int2 = 1;
                if(int1 == int2) {
                    alert("相同");
                } else if(int1 === int2) {
                    alert("类型相同");
                } else {
                    alert("都不相同");
                }
                
                
                var today = 1;
                switch(today) {
                case 1 : alert("今天星期一");
                break;
                case 2 : "今天星期二";
                break;
                default : "不懂了吧,这是中国农历";
                }
            }
        
            
            // 循环语句
            function test4() {
                /**for(var i = 0; i < 3; i++) {
                    alert(i);
                }*/
                
                /**var j = 0;
                while(j < 5) {
                    alert(j);
                    j++;
                }*/
                
                
                // 打印三角形
                for(var i = 0;i < 5; i++) {// 打印三角形的行数
                    for(var j = 0; j < 5-i; j++) {
                        document.write("*");// 输出页面
                    }
                    document.write("<br />");
                }
                
            }
        
       
        </script>
    </head>
    
    <body>
        <input type="button" value="测试1" ondblclick="test();" />
        <input type="button" value="测试2" ondblclick="test2();" />
        <input type="button" value="测试3" onclick="test3();" />
        <input type="button" value="测试4" onclick="test4();" />
    </body>

</html>

 

3.函数和参数:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            /* 在Java中有method(方法),但是在js中不叫方法,叫函数(function) */
            
            /*
                Java定义方法:访问修饰符,返回值类型(void) 方法名(声明类型的参数1,声明类型的参数2){
                    方法体
                }
                
                js定义函数:function 函数名(不带类型的参数1, 不带类型的参数2) {
                    函数体
                }
                
                 js就算不声明返回类型,依然可以返回(return)
                 就算不声明void,也可以不返回
                 js的形式参数一定不能有类型
            */
            
            
            
            function test1(description, hireDate) {
                alert(description+"----------"+hireDate);
                var a = "我是a";
                return a;
            }
            
            // 在哪里调用函数,参数就会从哪里被传递过来
            function test2(age, name) {
                alert(age+"---------"+name);
                var description = "我是描述";
                var hireDate = "我是日期";
                var b = test1(description, hireDate);
                alert(b);
            }
            
            // 匿名函数
            var test5 = function() {
                alert("我是匿名函数");
            }
            // 如果在匿名函数中使用一个变量去接收,这个变量包含了函数所有东西
            // 如果以一个函数的形式去接收,只会执行函数体中的内容
            function test6() {
                var test7 = test5;
                alert(test7);
            }
            
        
        </script>
    </head>
    
    <body>
        
        <input type="button" onclick="test2();" value="测试" />
        
        <input type="button" onclick="test6();" value="测试" />
    </body>

</html>

 

4.事件机制

<!DOCTYPE>
<html>
    <head>
        <title></title>
        <meta charset=UTF-8/>
        <script type="text/javascript">
            function test(){
                alert("测试onclick");
            }
        </script>
        <script type="text/javascript">
            function test1(){
                alert("测试ondblclick---双击");
            }
        </script>
        <script type="text/javascript">
            function test2(){
                alert("测试onmousedown---按下鼠标是触发");
            }
        </script>
        <script type="text/javascript">
            function test3(){
                alert("测试onmouseup---按下鼠标松开后触发");
            }
        </script>
        <script>
            function test4(){
                alert("测试onmouseover--当鼠标移动到某对象范围上触发");
            }
        </script>
        <script type="text/javascript">
            function test5(){
                alert("测试onmousemove---当鼠标移动时候触发");
            }
        </script>
        <script type="text/javascript">
            function test6(){
                alert("测试onmouseout---当鼠标离开某范围对象是触发");
            }
        </script>
        <script type="text/javascript">
            function test7(){
                alert("测试onkeyperss--当键盘上某个键被按下并且释放是触发"(一直按下?));
            }
        </script>
        <script type="text/javascript">
            function test8(){
                alert("测试onkeydown---当键盘上某个键被按下时触发(一直按下)");
            }
        </script>
                <script type="text/javascript">
            function test9(){
                alert("测试onkeyup---当键盘上某个按键被按放开时触发此事件");
            }
        </script>
    </head>
    <body>
            <input type="button" value="测试onclick" onclick="test();"/>
            <input type="button" value="测试ondblclick" ondblclick="test1();"/>
            <input type="button" value="测试onmousedown" onmousedown="test2();"/>
            <input type="button" value="测试onmouseup" onmouseup="test3();"/>
            <input type="button" value="测试onmouseover" onmouseover="test4();"/>
            <input type="button" value="测试onmousemove" onmousemove="test5();"/>
            <input type="button" value="测试onmouseout" onmouseout="test6();"/></br>
            <input type="button" value="测试onkeypress" onkeypress="test7();"/>
            <input type="text" value="测试7" onkeypress="test7();"/></br>
            <input type="button" value="测试onkeydown" onkeydown="test8();"/>
            <input type="text" value="测试8" onkeydown="test8();"/></br>
            <input type="button" value="测试onkeyup" onkeyup="test9();"/>
            <input type="text" value="测试9" onkeyup="test9();"/></br>
            
    </body>

<ml>

 

5.字符串的简单运算:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
        
            // eval:把字符串格式的数据进行简单的运算
            // eval只有一个参数
            // eval原理:就是把数字格式的字符串转换为数字类型,然后再进行计算
            function test1() {
                var string1 = "12";
                var string2 = "13";
                var eval1 = eval(string1);
                var eval2 = eval(string2);
                alert(eval1+"-----"+eval2);
                alert(eval1+eval2);
                alert(eval(string1)+eval(string2));
            }
            
            // parse************
            // parseInt() == Integer.parseInt();
            // parseDouble() == Double.parseDouble();
            function test2() {
                var string1 = "13";
                var string2 = "14";
                alert(parseInt(string1));
            }
            
            // isNaN:判断一个非法的数字 12 / 0,返回的是true或者false
            function test3() {
                alert(12/0);
                alert(isNaN(12/0));
            }
            
            // isFinite():判断是否为一个数字,返回的是true或者false
            function test4() {
                alert(isFinite("15"));
            }
            
            // escape():进行编码
            // unescape():进行解码
            // 一般情况下,只针对于中文
            function test5() {
                // 进行编码:好处一:防止信息被泄露,好处二:防止中文乱码
                alert(escape("我是李四"));//GBK
                alert(unescape("%u6211%u662F%u674E%u56DB"));
                
            }
        
        </script>
    </head>
    
    <body>
        <input type="button" value="测试eval" onclick="test1();" />
        <input type="button" value="测试parse" onclick="test2();" />
        <input type="button" value="测试isNaN" onclick="test3();" />
        <input type="button" value="测试isFinite" onclick="test4();" />
        <input type="button" value="测试escape" onclick="test5();" />
    </body>

</html>

 

6.控制台记录:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            // onfocus:聚焦
            // onblur:失去焦点
            // 在js调试中,首先要想到alert,然后必须会使用console.log();-->输出控制台
            function test1() {
                console.log("我是被输出了");
            }
            
            // 键盘事件
            function test2() {
                console.log("我也被触发了");
            }
        
        </script>
    </head>
    
    <body>
    
        鼠标事件:<input type="text" onblur="test1();" />
        键盘事件:<input type="text" onkeyup="test2();" />
    
    </body>

</html

 

7.event事件获取键盘ascii:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            // event对象:事件的对象,监控的是一个事件的状态
            function test1(ev){// 参数是形式参数,名字可以自己定义
                var evt = window.ev||event;// 就是为了兼容IE浏览器,IE浏览器是默认只能取出event
                var code = evt.keyCode||charCode;// 获取到了键盘上对应的ascii
                alert(code);
            }
        </script>
    </head>
    
    <body onkeypress="test1(event);">
    
    </body>

</html>

 

8.键盘记录:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            var str = "";
            function test1(ev) {
                var ascii = ev.keyCode;// charCode:默认只支持到IE8
                str = str + String.fromCharCode(ascii);
                document.getElementById("div1").innerHTML = str;
            }
        </script>
    </head>
    
    <body onkeydown="test1(event)">
        <input type="password" />
        <div id="div1"></div>
    </body>

</html>

 

9.获取目标的类型,值,事件机制等:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            // event对象:事件的对象,监控的是一个事件的状态
            function test1(ev){// 参数是形式参数,名字可以自己定义
                
                var evt = window.ev||event;// 兼容IE,获取event对象
                // 鼠标事件
                var src = evt.srcElement||evt.target;// 为了兼容IE,IE浏览器默认兼容target
                // src就代表了button的对象,也就是获取到了button的所有内容
                //var test = function(){alert(111);}
                // src是获取不到当前标签
                alert(src.type);
            }
        </script>
    </head>
    
    <body>
        <input type="button" value="测试鼠标" onclick="test1(event)" />
    </body>

</html>

 

10.confirm 和 prompt:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            function test1() {
                // alert():警告
                alert("弹窗测试");// 会非常不友好,在10年前用户体验还可以,经过发展,出现了各种插件对alert进行重写修改,样式很漂亮,但是还是很不友好,现在弹窗功能几乎废弃
                
                
                // alert(js中)<--->alter(oracle中用的)
                // 现在alter用的最多的地方就是进行调试,后来Google和firefix开始支持控制台调试,console.log();,再后来Firefox变了,不专一了,console.log()就被他废弃了
            }
            
            function test2() {
                var name = prompt("请输入您的姓名!");//弹出个输入框,让输东西
                console.log(name);
            }
            
            function test3() {
                // 最常用
                var isSuccess = confirm("此信息一旦删除就无法恢复,您确定删除吗?");// 返回一个boolean类型,也就是true/false ,弹出个确认框
                alert(isSuccess);// 返回值中点击确定返回true,点击取消返回false
                if(confirm("此信息一旦删除就无法恢复,您确定删除吗?")) {
                    alert("此消息已经删除");
                } else {
                    alert("没事别瞎点!");
                }
            }
            
        </script>
    </head>
    
    <body>
        <input type="button" value="测试alert" onclick="test1();" />
        <input type="button" value="测试prompt" onclick="test2();" />
        <input type="button" value="测试confirm" onclick="test3();" />
    </body>

</html

 

11.时间和内置对象:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
        
            // 时间
            function test1() {
                var date = new Date();// 当前服务器(自己电脑)的时间
                // date.getYear()距1900年到至今的年数
                // date.getMonth()获取到当前的月份(从0月开始)
                // date.getDay()获取到星期几从0开始(0代表星期天)
                // 不只是有get函数,还有set函数,和Java一样
                date.setYear(1999);
                alert(date.getYear()+"-----"+date.getMonth()+"----------"+date.getDay());
                alert(date.toLocaleString());// 获取到本地时间(年月日 时分秒),以字符串的形式输出,和Java中的toString()方法一样
            
            }
                // 内置对象:拿来直接使用,不需要new的对象,就称之为内置对象 System,Math,String...
            // String对象
            function test2() {
                var str = "hello js";// 定义一个字符串
                // charAt:获取指定下标的字符
                //alert(str.charAt(1));
                // substring:截取字符串
                //alert(str.substring(1, 3));// 如果传入的数字为负数,会全部截取;如果有两个参数,第二个参数为负数,会倒着截取;如果第一个参数为负数,默认从字符串的起始位置开始截取;如果两个参数都为负数,就不会截取
                // substr:截取字符串
                //alert(str.substr(1,3));
                // substr和substring的区别:substr为闭区间,但是substring为半开区间
                
                // indexOf:获取指定字符的下标
                //alert(str.indexOf("e"));
                // length:获取字符串的长度
                alert(str.length);
                // toLowerCase:转换为小写
                // toUppercase:转换为大写
            }
        
        </script>
    </head>
    
    <body>
        <input type="button" value="测试date" onclick="test1();" />
        <input type="button" value="测试String" onclick="test2();" />
    </body>

</html>
<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            // Math
            // random:随机数
            function test1() {
                alert(Math.random());
            }
            
            // round:四舍五入
            function test2() {
                alert(Math.round(Math.random()*100));
            }
            
            // ceil:向上取整
            function test3() {
                alert(Math.ceil(29.01));
            }
            
            // floor:向下取整
            function test4() {
                alert(Math.floor(29.99));
            }
            
        
        </script>
    </head>
    
    <body>
        <input type="button" value="测试random" onclick="test1();" />
        <input type="button" value="测试round" onclick="test2();" />
        <input type="button" value="测试ceil" onclick="test3();" />
        <input type="button" value="测试floor" onclick="test4();" />
    </body>

</html>

 

12.从input框中获取输入的值:(同理还可以获取其他标签的value)

 e<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
        
            // 如何从input框中获取输入的值
            // 第一种:通过form获取
            function test1() {
                var ins = document.forms[0].username.value;// 这里value就是输入input框的值,0代表第一个form的下标
                alert(ins);
            }
            
            // 第二种:通过DOM对象获取
            function test2() {
                var ins2 = document.getElementById("pwd1").value;// 以后这一种是总是被用到
                alert(ins2);
            }
            
        </script>
    </head>
    
    <body>
        <form action="">
            用户名:<input type="text" name="username" />
            <input type="submit" value="提交" />
            <input type="button" value="测试点击" onclick="test1();" />
        </form>
        
        <form action="">
            需要打印的行数:<input type="text" name="pwd" id="pwd1" />
            <input type="submit" value="提交" />
            <input type="button" value="测试点击" onclick="test2();" />
        </form>
    </body>

</html>

 

13.更换一定范围背景颜色:

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title></title>
        <script type="text/javascript">
            function chageBackgroundColor() {
                var div = document.getElementById("div1");// 获取到的是一个object对象
                div.style.backgroundColor = "blue";
            }
        </script>
    </head>
    
    <body>
        <div id="div1" style="background:red; width:200px;height:200px;" onclick="chageBackgroundColor();"></div>
    </body>

</html>

 

posted @ 2017-07-10 21:25  咫尺天涯是路人丶  阅读(368)  评论(0编辑  收藏  举报