js学习笔记

framset只用来做页面的展示

发生数据提交用action

没发生数据提交用跳转或者重定向

创建表格table>tr*4>td*2快速设置表格

要引入JSTL标签库：

<%@taglibprefix="c"    uri="http://java.sun.com/jsp/jstl/core"%>

<Context path="/ab"  docBase="D:\workspace3066\java310\WebRoot" reloadable="true" />  此种方法不如要在myecpliopse下面配置冷部署

• 在server.xml中元素<Connector>中增加属性：useBodyEncodingForURI=“true”，则 上面对get方式提交的数据也有效。

html   

锚点学习 <a href="#first"></a>  <a name="first">

跳转网页：  framset  中的fram

<frame name="test" />

<a href="xxx" target="test"></a>

border-collapse:collapse;去除表格双划线

placeholder 失去焦点时消失

onchange一般用在select中。里面的value值直接可以通过id.value访问

disabled=diabled。将按钮置灰使其不能进行访问

getElementsById()

javascript直译型语言 动态  程序在内存中运行运行完就释放内存   弱类型  基于原型 为html增加动态功能  基于对象编程

没有多态和继承 自上而下走的

java编译型  半动态 （因为垃圾回收机制并不是一开始就释放内存） 编译成。class文件

两种都要进行编译

==比较双方类型一致 ，则直接比较内容 相同就是true  不同就是false

比较双方类型不一致 向number靠拢  再比较内容相同就是true 不同就是false

===

先比较类型，类型不一致直接false 类型一致在比较内容 相同true 不同就false

三目运算法

//万事万物皆对象

创建函数等于创建对象

函数也可以当参数传递

函数的三种声明方式

函数的使用

            1、函数的声明：

                    funtion 函数名(参数名,参数名....){

                        执行体

                    }

                    var 函数名=new Function("参数名"，"参数"..."执行体");

                    var 函数名=function (参数名,参数名){

                        执行体;

                    }   

1。全局变量和局部变量的区别

全局变量就是在js中直接声明的变量

局部变量就是在函数中声明的变量

他们之间不会有韩饶也不会被覆盖

2。函数的形参

在js中声明不赋值 默认undified 并不会报错

在js中的函数声明中的参数个数，在传参的时候可以不一致。会按照形参的次序来以此赋值33

3。函数的返回值

如果有返回值则返回相应的值如果没有则所有函数都有一个默认的返回值undified

4。函数的执行符

它的执行符就是小括号

如果不加括号则会打印函数内容他就相当于一个变量，加了会执行。

5。函数的高级写法

作为变量传递

数组的学习

var arr=new Array();

var arr1=new Array(10);

var arr2=new Array([1,2.5,1,8]);

var arr3=['a',5,'s7',2];

数组是对象类型

1。js中的数组可以存储任何类型的数据

2。js中数组可以通过length动态的更改长度

  特点;如果长度减小自动从后面删除元素，如果长度增加则自动从后面增加元素

3。数组的遍历

  for循环 增强for循环for-in

4。数组的操作

    protetype属性原声空间

   concat（）；连接

    join（）；列入a,join("-");字符之间用-隔开

    push（）;从后增加一个元素 返回值是元素的长度

    pop( )；从后删除一个元素 并返回这个元素

    shift();从前删除一个元素 并返回删除的元素值

    unshift();从前增加一个元素 并返回元素的长度

   splice：从指定的位置删除元素，后面的元素自动前移

计算器

使用evale方法将字符转换为可执行的js代码

js的高级应用

对象

    <!--

            1、js创建自定义的类

                function 类名(形参名，形参名){

                    this.参数=形参；

                    this.参数=形参；

                    this.参数=值;

                    this.参数=function(){

                        执行体;

                    }

                }   

            2、js的类的变相继承

                使用prototype生态链

                TestB.prototype=new TestA();

                相当于类B继承了类A

            3、js的自定义对象

                var obj=new Object();

                    obj.参数=值;

                    obj.参数=值

                    obj.fn名=function(){

                        执行体

                    }

                var obj={};

            

1。js创建自定义的类

2。js的类的变相继承

  利用 prototype生态链

   指向对象 查找  并不是真的继承

TestB.prototype=new TestA();

3。js的自定义对象

vartestObj=newObject();

 testObj.name="张三";

 testObj.method=function(){

 alert("nihao");

 }

 //js中的对象简单的不需要图纸直接做

在js中存在预编译 先编译一遍就是在正式执行代码之前先统一对所有的变量声明 ，也就是开辟内存空间

  再进行复制 （编译的时候不赋值）

事件机制

当我们的行为和动作符合了某一个要求就会出发某中事件

点击事件

onclick 单击

ondblclick双击

鼠标事件

          onmousmove

          onmousout

键盘事件

onkeyup 键盘弹起

onkeydown 键盘下压

焦点事件

onfocus 获取焦点 

onblur    失去焦点

给合适的标签使用合适的事件

onchange 值改变的时候发生

对input text 而言是失去焦点之后发生的事件

对select单选框而言是直接就发生事件      

页面加载事件

     onload页面加载时触发

浏览器差异 event对象

     分火狐将event作为实参传进来和ie不能通过event传递参数只能通过window

以下为综合写法 先后顺序为火狐和ie

vareve=event||window.event;

varx=eve.pageX||eve.x;

vary=eve.pageY||eve.y;

获取键盘值火狐与ie的两种写法

vareve=event||window.event;

varkey1=eve.keyCode;

document.getElementById("d2").innerHTML=key1;

a标签    

超链接标签可以执行js函数

<a href="javascript:test();">百度一下</a>

 事件的阻断

    html的标签都有固定的固定功能比如啊标签可以跳到到指定的组员    

   但是当这些标签的返回值是false标签的作用就会失效

js的内置对象

1。Math使用的时候不用new

  random（）--返回0-1之间的随机数 包含0不包含1

  round（num)--返回参数中最小的数字

  min(num) ---返回参数中的最小数字

  max（num）--返回参数中最大的数字

  2。Global对象：

    使用的时候直接使用其方法，不需要new也不需要写对象名

    parseInt(num)---返回数字的整数部分

    eval(字符串类型的js代码)--返回执行的js代码

  3.String：

        substr(str,length);---从指定位置开始截取指定长度得到字符串

        substring(star,end)---从指定开始位置和结束位置，截取字符串，但是含头不含尾

        indexof("字符") ----返回指定字符在字符串出现的角标

        replace(reg,字符串)---根据正则表达式，将指定的字符串替换

        match(reg)---根据指定的正则表达式，查找字符串然后返回指定的字符

  4。Date对象

        getYear()

        getFullYear()

        getMnth()

        getDay()

window  

     bom浏览器对象模型：其实是一种规范

     如果各个浏览器厂商都遵循这个规范那么对于我们脚本语言的开发就不在有浏览器的差异

     具体实现：

     window的属性

window的方法

     警告框：alert（）；

     确认框：confirm（）；有boolern返回值类型

     输入框：prompt（）；返回值为内容不写为null

            window对象的属性：

                1、screen:

                    获取当前客户端的屏幕信息

                    window.screen.width+"*"+window.screen.height----返回当前屏幕的分辨率

                2、location

                    window.location

                    href-----可以获取和修改当前地址栏信息

                    reload()---重新加载页面

                3、history

                    back()---相当于回退按钮

                    forward()---相当于前进按钮

                    go(index)----相当于跳转

    BOM浏览对象模型：

                所谓BOM浏览器对象模型，其实就是对各大浏览器厂商在研发浏览器时候所做的一种规范

                如果各个浏览器厂商都遵循这个规范，那么对于我们的脚本语言开发就不再有浏览器差异的问题。

                但是此规范还在努力实施的阶段，尚无正式标准。

            具体的实现：

                window对象。

            学习window对象的内容:

                1、window对象的方法

                    框体方法：

                        alert("内容")-----警告框

                        confirm("内容")---确认框，点击确定返回true,点击取消返回false

                        pormpt("提示语","默认值")---提示框，输入内容点击确认返回输入的内容，点击取消返回null

                    定时执行：

                        setTimeout(code,num)---指定时间后执行执行的函数,返回当前线程的id

                        clearTimeout(num id)---------清除指定的setTimeout开启的线程

                        setInterval(code,num)--每隔指定的时间执行一次指定的函数，返回当前线程的id

                        clearinterval(num id)--------清除指定的setInterval开启的线程

                    打开子页面：

                        open(url,name,param);

                        param:height=600, width=800, top=200,left=200, toolbar=yes, 

                              menubar=yes, scrollbars=no, resizable=no,location=no, status=no

                    使用operner属性调用父页面的函数

                2、window对象的属性：

document

此对象是window对象下一个专门用来操作HTML树的对象

    1获取元素

        直接方式： getElementBy 

        通过id

         name

         标签名 

          间接方式：

         父子 先获取父级标签，然后通过childNodes获取子标签元素

         子父 先获取子元素，然后通过parentNode获取父元素

         兄弟 先获取中间元素然后通过previouseibling获取兄元素

                                               通过nextSibling获取第元素

     2操作属性

         固有属性：

            对象名.属性名---获取属性值

           属性名.属性名=属性名----修改属性名

          

         自定义属性：

          getAttribute获得自定义属性值

          setAttrbute修改自定义的属性值

         注意：使用getat只能获得默认值 不要随意修改name和id的值

     3操作内容

          innerHTML：

               获取：

                    会将元素里面的所有HTML获取到，包括HTML标签

               修改：

                    HTML标签会被解析，而且会将原有内容覆盖

              innerText：

                    获取：

                         只获取普通文本不会获取HTML标签

                    修改：

                         HTML标签不会被解析，会当成普通文本输出，也会覆盖原有内容、

     4操作样式

               通过style

               元素.syle.样式=属性值

    5操作文档结构

          createElement（）；

          appendChildren（）；

          removeChildren（）；  

     表单操作

    1获取form元素对象：

    直接$

     或者document.name

     2获取和操作form属性

     action

     method

          注意通过这种方式我们可以根据数据的安全性的不同动态的修改数据的提交方式

     3elemnts属性

          获取表单域对象集合，域得到的对象集合是用户能写的

     4form的方法

     submit方式有缺点

     submit（）；---数据提交使普通的按钮可以有数据提交的功能有点可以做数据校验

     reset();---表单重置

     form表单域操作

     1先获取表单对象，再通过表单获取表单中的id获得标签对象

     通用方法和属性：

                              disabled：数据关闭，不能写也不会提交

                              readonly：只读状态，不能写到时会提交

      ·                        focus（）；获取焦点

                               blur：失去焦点

   2 js操作select下拉框：

                1、    直接获取select对象，然后通过此对象的value直接获取选中的数据

                2、    先获取select对象，然后通过.options获取options对象集合

                       然后遍历，判断selected是否被选中。

                    os[i].value+":"+os[i].text

                   var music=document.getElementsByName("music");

         i<music.length

         music[i].checked=true;

                   music[i].checked=!music[i].checked;

innerHTML会被覆盖 且会被解析

                                                               mvc与三层结构开发

一.mvc就是servelt+jsp+javabean的开发模式

     M。model，javabean实现，封装业务数据

     V。 view，jsp实现。显示数据

     C。Controller，servelt实现，接收参数，调用业务逻辑，跳转视图

二三层模型

dao层：数据访问对象，实现对数据的操作相关方法

service：业务逻辑对象。实现对项目的业务逻辑处理相关的方法

web层：表现层。处理和用户直接相关的接收参数。处理参数，跳转视图