JAVA_Web_js学习

一、js的声明和引入script src=“”;script type

  • 注意:js是一门单独的语言,可以声明在HTML文档中的任意位置,但是一般情况下我们声明在head标签中。


二、js的变量学习:var、number string boolean object

  • 尽可能的给变量赋初始值,另外千万不要赋值错了,是var而不是我们java中学习的每个类型都有其对应的写法。
  • 另外一个就是,我们可以使用typeof关键字来判断该数据的类型。
数据类型判断关键字:typeof
                    数据类型:
                        number:数字类型
                            var b=456;
                            var b1=1.23;
                            alert(typeof b1);
                        string:字符串类型
                            var b="今天天气真好,适合学习";
                            var b1='l';
                            alert(typeof b1);
                        boolean:
                            var b=true;
                            var b1=false;
                            alert(typeof b1);
                        object
                            var b=new Date();
                            alert(typeof b);
                        null:
                            空对象赋值,主要是和undefined进行区分。
                        Undefined:undefined
                            var c;
                            alert(typeof c);
                            变量声明不赋值的情况下,默认值是undefined。

三、js变量的强转

  • 注意只能转换为boolean类型或者是number类型
使用Number(其他类型的数据);
                        string 类型的数字字符: 对应的number数字
                        string 非数字字符:       NaN(number类型)
                        boolean true:       1
                        boolean false:      0
                        object 有具体的值:       数字
                        object null:        0   
                    其他类型转换为boolean 类型
                        使用Boolean(其他类型的数据);
                        number 正数或者负数:      true
                        number 0        :       false
                        string  非空字符串 :     true
                        string  空字符串 "":        false
                        object  具体的对象  :    true
                        object  null    :       false
                        声明不赋值的变量        :       false

四、js的运算符


  • 运算符要注意的是:
    • 普通运算(除了加法)会先转换为number类型然后再进行运算。
    • 加法:如果有一个是字符串类型,那么将会进行字符串的拼接,而不是上面的先转number在加
    • 剩下的就是和我们java中写的是一样的。对于强转number'类型,可以参考上小节。

五、js的逻辑结构== === & | !

  • 注意:千万不要使用java中的equals来判断相等!!!
  • 逻辑结构都有:if、for、 while、do while switch

六、js数组的学习,创建方式,和常用方法

  • 创建数组的三种方式:
  1. var arr=new Array();只是声明了一个数组
  2. var arr=new Array(length);这个只是指明数组的长度,
  3. var arr=[1,2,3,4];这个是最常用的;
  • 下面是数组的遍历!!注意:很像foreach循环的那个,遍历的只是数组的下标,而不是数组的元素!!
数组的遍历
                    普通for循环:
                        for(var i=0;i
  • 数组的常用操作-------这部分并不需要记住,用到的时候直接百度或者来看自己的博客就可以!!!
数组的操作学习:
                1、数组的合并:arr.concat(b,c);//数组的合并
                2、数组指定间隔符转换字符串:var b=arr.join("-");
                3、数组移除最后一个元素并返回:var ele=arr.pop();
                4、数组的追加,返回新的长度:var ln=arr.push("lol");//追加的元素可以是一个数组,但是为作为一个角标值存在
                5、数组的移除第一个元素:var ele=arr.shift();
                6、数组的在开始位置插入指定元素:var a=arr.unshift("又是周五了");
                7、数组删除指定位置元素:var arr2=arr.splice(1,3,"a");

七、js函数的学习(函数更像是一个类,或者说一个对象!!!)

  • 个人理解:js中的函数和对象创建都是function 而且函数可以直接作为对象进行传递,感觉以一个类来命名更加合适!!
  • 函数的声明:三种方式
  • 函数的声明中形参不需要传递var 类型,因为HTML中都只有var类型,和java不一样!!!!
js的函数学习一:
                作用:功能代码块的封装。减少代码的冗余。
                1、函数的声明:
                    方式一:function 函数名(形参名1,形参名2……){执行体}
                    方式二:var 函数名=new Function("形参1","形参2"……,"函数执行体");
                        注意:此声明表明在js中函数是作为对象存在的。
                    方式三:var 变量名=function(形参名1,形参名2……){函数执行体}    
                2、函数的参数
                    js中的函数在调用时,形参可以不赋值,不会报错
                    js中的函数在调用时,形参赋值可以不全部赋值,不会报错,但是实参会依次进行赋值。
                3、函数的返回值
                    在js中如果函数有返回值则直接返回,没有返回值默认返回undefined
            注意:
                js的代码声明区域和执行区域是一起的,都是在js代码的代码域中。

  • 函数的调用 常用调用方式
  • 开发中经常用的传递方式 有点类似于java中的接口类直接调用,比如多线程那里的 new Thread(()->{"这个是Runnable接口的对象"}).start()
                function testObj2(fn){//testObj2函数在被调用的时候,实参必须是一个函数对象。
                    fn();
                    
                }
                testObj2(function(){
                    alert("开发");
                    return 1;
                })


八、js的类和对象,function、object自定义

  • 在上面的函数中已经说过了,这个类和对象和还能输很相似,只不过是中间的函数体是:this.age=;this.name=;
  • prototype的使用
      可以直接在function内部写:Person.prototype=new User(); 然后在外面可以直接使用Person.(user内部的变量和方法。)

  • 自定义对象

  • 自定义对象就是 var 对象名=new object();
  • 然后直接 对象名。 变量名;一直添加就可以了。

九、js常用对象和方法

  • 常用:string、date、Math、Global 及其常用方法
  • 常用方法如下:
//1、String对象学习
                var str=new String("abcdefg");//声明String对象存储字符串
                var  str2="MNP";//简写形式
                //alert(str);
                //字符串大小写的转换
                    //alert(str.toUpperCase());//将字符串转换为大写
                    //alert(str2.toLowerCase());//将字符串转换为小写
                //字符串的切割
//                  var s="哈哈,嘿嘿,呵呵";
//                  var s1=s.split(",");//按照指定的字符切割字符串,返回数组。
//                  alert(s1.length);
                //字符串的截取
//                  var s="abcdef";
//                  alert(s.substr(1,3));//从指定的开始位置截取指定长度的子字符串
//                  alert(s.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串,含头不含尾。
                //查找子字符串第一次出现的角标
//                  var s="abcdefg";
//                  alert(s.indexOf("dd"));//返回指定子字符串第一次出现的角标,没有则返回-1;
            //2、Date对象
                //1、创建Date对象
                    var d=new Date();
                    //alert(d);
                //获取当前年份
//                  alert(d.getYear());//返回的是1900年开始距今的年分数
//                  alert(d.getFullYear());//返回的是当前的年份
//                  alert(d.getMonth()+1);//返回的当前月份的角标值,需要+1
//                  alert(d.getDate());//返回的是当前的日期数
//                  alert(d.getDay());//返回的是当前的星期数,但是周天会返回值为0;
//                  alert(d.getHours());//返回当前时间的小时数
//                  alert(d.getMinutes());//返回当前时间的分钟数
//                  alert(d.getSeconds());//返回当前时间的秒数
                    
                    //alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
            //3、Math对象学习
                //1、Math在使用的时候不能new,使用Math.方法名调用即可。
                    //创建随机数字
//                      alert("Math.random():"+Math.random());//返回0-1之间的随机数字,含0不含1。
//                      alert(1000+Math.random()*9000);
                    //向下取整
//                      alert(Math.floor(1000+Math.random()*9000));
                    //向上取整
//                      alert(Math.ceil("12.34"));
                    //四舍五入
//                      alert(Math.round(12.12));
//                      alert(Math.round(12.65));
                    //数值比较:求取最小值,求取最大值
//                      alert(Math.min(12,13,5,78));//获取最小值
//                      alert(Math.max(12,3,4,56));//获取最大值
            //4、Global对象学习
                    //1、改对象从不直接使用并且不能new,也是就直接写方法名调用即可。
                        //使用eval将字符串转换为可执行的js代码
                            var str="var a=123";
                            eval(str);
                            alert(a);
                        //使用isNaN判断是否值NaN
                            alert(isNaN("123"));
                        //获取字符中的浮点数
                            alert(parseFloat("12.34a34a"));
        

十、js事件机制

  • 常用的: 单双击、鼠标悬停、键盘、焦点(说的是input框)、页面加载
js的事件机制:
                解释:当我们的行为动作满足了一定的条件后,会触发某类事务的执行。
                作用:主要是结合js的函数来使用。
                内容:
                    1、单双击事件
                        单击:onclick          当鼠标单击的时候会触发
                        双击:ondblclick       当鼠标双击的时候会被触发
                    2、鼠标事件
                        onmouseover         当鼠标悬停在某个HTML元素上的时候触发
                        onmousemove         当鼠标在某个HTML元素上移动的时候触发
                        onmouseout          当鼠标在某个HTML元素上移出的时候触发
                    3、键盘事件
                        onkeyup             当键盘在某个HTML元素上弹起的时候触发
                        onkeydown           当键盘在某个HTML元素上下压的时候触发
                    4、焦点事件
                        onfocus             当某个HTML元素获取焦点的时候触发
                        onblur              当某个HTML元素失去焦点的时候触发
                    5、页面加载事件            
                        onload              当页面加载成功后触发。
                注意:
                    js中添加事件的第一种方式:
                        在HTML上直接使用事件属性进行添加,属性值为所监听执行的函数。
                    js中的事件只有在当前HTML元素上有效。
                    一个HTML元素可以添加多个不同的事件。
                    一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔

  • 事件机制使用的场景
js的事件机制学习2:
                1、给合适的HTML标签添加合适的事件
                    onchange----select下拉框
                    onload------body标签
                    单双击-------用户会进行点击动作的HTML元素
                    鼠标事件------用户会进行鼠标移动操作的。
                    键盘事件------用户会进行键盘操作的HTML元素。
                2、给HTML元素添加多个事件时,注意事件之间的冲突
                    举个栗子:单击和双击
                    当事件的触发条件包含相同部分的时候,会产生事件之间的冲突。
                3、事件的阻断
                    当事件所监听的函数的将返回值返回给事件时:
                        false:则会阻断当前事件所在的HTML标签的功能
                        true:则继续执行当前事件所在的HTML标签的功能
                4、超链接调用js函数
                    调用js函数           

十一、windows对象的学习

  • ** windows对象使用不需要new,可以直接调用,有点类似java中的静态方法。**
  • 主要包括:框体方法、定时和事件间隔执行方法
  • 对于它的函数如果不记得的花可以查看对应的js手册


        
        

十二、windows对象学习二(open position history)

  • 两种刷新当前页面的方式:history.go(0)、location.relod
  • 在js的open

        
        

十四、js对获取元素对象的(内容)操作


操作元素内容学习:
                获取元素对象
                    获取
                        元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签
                        元素对象名.innerHTML//返回当前元素对象的文本内容,不包括HTML标签
                    修改
                        元素对象名.innerHTML="新的值"//会将原有内容覆盖,并HTML标签会被解析
                            元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
                        元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。 

十五、js的操作元素样式

  • 元素样式 也就是style 的样式,1、可以直接 style.调用;另外可以.classname=“新的类样式”

        
        

十六、js操作文档结构。innerHTML 、creatElenment、appendChild

  • 本质就是innerHtml一直追加;或者删除 innerHTML=“”;
  • 另外一个就是删除
  • 小技巧:在相对两个按钮,或者两个HTML元素操作的时候可以使用一个大的div 包起来,直接操作这个大的div即可!!!

        
        

  • 另外一种添加删除的操作,可以更方便


        
        

十七、js操作form表单即form表单的校验

  • form表单的简单用法 获取,修改题交方式和地址

        
                    
                    

你可能感兴趣的:(JAVA_Web_js学习)