JavaScript(js)

前面已经简单复习了SSM框架，现在来复习js的东西。

js是一门由浏览器执行直接嵌入到html的解释性弱类型的脚本语言。

它的作用是操作html，使前端用户和后台进行交互

由三部分组成：

语法:变量声明,数据类型,运算符,语句,函数,事件,绑定事件

BOM(浏览器对象模型)，可以通过它操作浏览器

DOM(文档对象模型)，通过它可以操作整个html页面

js和html的整合：

方式一:内嵌式

通过<script></script>实现

方式二：外联式

通过script的src属性引入即可

注意:
script放在页面的任何位置都ok,一般放在head中
script一旦使用了src属性,他的标签体失效

变量声明:
           var 变量名称 = 初始化赋值;
           注意:
               var可以省略,但是不建议
               末尾的分号也可以省略,但是不建议
       数据类型
           原始类型:(5种)
               Undefined:undefined
               Null:null
               Number:一切数字
               String:一切被引号引起来的字符串
               Boolean:true|false
               typeof:通过台typeof就可判读值属于什么类型

函数:
           方式1:
               function 函数名称(参数列表){}
           方式2:匿名函数
               函数名称 = function(参数列表){}
           返回值:
               直接写return 不需要声明类型
           注意:
               参数列表可以不写类型
       事件:
           表单提交事件:
               onsubmit
           单击事件
               onclick
           页面加载成功事件

onload

绑定事件
           方式1:绑定事件
               通过标签的事件属性 <xxx onclick="函数名()">
           方式2:派发事件
               标签.onclick = function(){}
       获取标签对象:
           document.getElementById("id值");

案例1:完善表单校验
需求分析:
   单击注册时,校验用户输入所有的信息,如果不满足条件,在相应的输入框后显示提示信息,满足则提交
技术分析:
   事件:onsubmit();
   DOM:
       获取元素对象:
           document.getElementById("id"); 获取一个元素对象
       获取value的值
           元素.value;
       设置value的值
           元素.value = "";
       获取标签体的内容:
           元素.innerHTML;
       设置标签体的值
           元素.innerHTML = "";
       正则表达式:
           1.编写正则表达式
               用户名：/^[a-z0-9_-]{3,16}$/
               电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
               校验为空: /^\s*$/
           2.校验
               var boolean = 正则表达式.test(str);

件:
   掌握:
       表单提交
       单击事件
       成功加载
       焦点事件:
           获取焦点:onfocus
           失去焦点:onblur
   了解(知道)
       鼠标事件
           onmouseover();放上去
           onmouseout();移出
           onmousedown();按下
           onmouseup();弹起
           onmousemove();移动

           ondblclick();双击事件
       键盘事件
           onkeydown();按下
           onkeyup();弹起
           onkeypress();按下并弹起
       表单事件:
           onreset();
           onchange();

DOM:文档对象模型
   html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点
   节点:
       文档节点
       元素节点
       属性节点
       文本节点
   查询:
       document.getElementById("id"); 获取一个元素对象
       document.getElementsByTagName("标签名"); 获取一种元素对象数组
       document.getElementsByClassName("class属性值"); 获取一类元素对象数组接收
       document.getElementsByName("name属性值"); 获取多个元素对象数组接收
   操作:
       操作value
           元素.value;
       操作style
           元素.style.css属性="赋值";    css属性名的"-"去掉,且"-"后面单词的首字母大写
       操作标签体
           元素.innerHTML;
           元素.innerHTML="<font></font>";

   扩展---查询其他API
       去找XML DOM
           DOcumen
               createElement(); 创建元素节点
               createAttribute(name); 创建属性节点
               createTextNode(); 创建文本节点
           Element对象:
               appendChild(); 追加

猜你喜欢