javascriptWebStageDay04

注意:function定义的函数名 不要使用关键字!

技术:
1. 控制元素的
value属性
obj.value=”赋值”
src属性
obj.src=”赋值”
样式属性
obj.style.css属性=”css的属性值”
标签体内容
obj.innerHTML=”XXXXX”

1. 了解 正则表达式(查询API或百度)
   落实js语言
   var reg=/^[a-z0-9_-]{3,16}$/

   提供方法 test()
       reg.test("你自己的字符串")  返回boolean值
   

2. 事件:
   必须掌握:
   onclick:单击事件
   onsubmit:表单提交事件
   onload:页面加载成功事件
   onfocus:焦点获取
   onblur:丢失焦点

   需要了解:
   跟鼠标相关的
   onclick:单击
   ondblclick:双击
   onmouseover:鼠标进入 悬停事件
   onmouseout:鼠标离开
   onmousemove:鼠标移动
   onmousedown:鼠标按下
   onmouseup:鼠标弹起

   跟键盘相关的
       onkeyup:按键弹起
       onkeydown:按键按下
       onkeypress:按键按下并弹起
   
       onkeydown--->onkeypress-->onkeyup
   跟表单相关:
       onsubmit:表单提交
       onreset:重置事件
       onchange:改变事件
   

3. DOM 文档对象模型
   节点:
   document节点
   标签节点
   属性节点
   文本节点
   获取节点:
   document.getElementById(“x”);//获取元素的id属性为x标签元素 一个元素
   document.getElementsByTagName(“y”);//获取元素的名字为y 元素数组 多个元素
   document.getElementsByClassName(“z”);//获取元素的class属性为 z的元素 多个元素
   document.getElementsByName(“w”);//获取元素的name属性为w的元素 多个元素
   操作属性:
   value:控制值
   src:控制路径
   checked属性:选中状态的
   样式的:
   style.css样式名
   innerHTML:操作标签体内容

   直接获取  如果赋值 就是修改
   

   也提供了创建元素api 了解

   想要添加新元素
   obj.innerHTML=”添加的元素”

案例一: 表单升级
需求:
当你点击注册按钮,开始对于用户名和密码格式验证
验证失败 在输入框后面给出提示信息 不要立即返回 一次性走完验证
更为复杂的格式验证
学习:
控制标签体内容
了解 正则表达式
步骤分析:
1.创建表单页面(id必须设置,方便查询;非text类型要设置value,方便操作)

2.事件:
表单提交事件
onsubmit: 必须有boolean返回值

3.编写函数 checkForm
    定义标识符
        var flag=true;

    获取用户密码输入框值
    判断采用正则表达式
    判断没有通过:
        flag=false;//出问题
        在输入框后方span元素中改变标签体内容
    判断通过了
        继续走

    return flag;

案例二: 隔行换色
需求:
在页面加载成功 将表单一行行的背景颜色做出斑马线 奇数行一个颜色 偶数行一个颜色
学习:
obj.style.背景颜色属性

    获取多个元素
        var 对象数组=document.getElementsByTagName("标签名"); 获取所有的标签名为参数的对象 
        for(var i=0;i<对象数组.length;i++){
            var 对象=数组对象[i];
        }

    步骤分析:
1.事件:
    onload 页面加载成功事件
    改变背景颜色

2.编写改变颜色的函数
    获取tr的数组 document.getElementsByTagName("标签名")
    遍历数组 一个个改变背景颜色
    for(var i=0;.......){
        //判断i的值
        //对i进行取模运算
        //根据奇偶性 对应改变背景颜色
    }

注意:
    css中语法格式:
        <style type="text/css">
            span{
                color: red; //文字颜色
                background-color: antiquewhite; //背景颜色
                background-image: xx;   //背景图片
            }
        </style>

    js中语法格式:
        xx.bgColor="#0f0";//元素属性,设置背景颜色
        xx.style.backgroundColor="cornflowerblue";//元素css样式,设置背景颜色
        xx.style.backgroundImage="xxx";//元素css样式,设置背景颜色

案例三: 全选全不选
需求:
点击表头复选框 将下方的复选框的状态跟表头复选框状态保持一致

学习:
    checked:
        true标识选中  false 标识 不选中
    document.getElementsByClassName("y")// 获取所有标签 只要有y的class属性

    this关键字
    代表是当前对象

    步骤分析:
1.为表头复选框绑定点击事件
2.函数中:
    获取自己状态
    获取下方所有的复选框 
    遍历数组
    挨个将他们状态修改为表头复选框状态

案例四: 省市联动
需求:
当我去改变省份的选择项,要求后面城市的下拉选择框中 可选城市对应的省份下的城市
学习:
js中的数组
onchange
改变元素标签体内容
步骤分析:
1.为省份下拉选择框 绑定 onchange改变事件
2.获取当前选中的省份的值
值可以当做索引 去二维数组中 获取对应的城市列表的数组
遍历城市列表放入到城市下拉选择框
将名字和option标签合起来—-拼接字符串 ““+”郑州市”+””

数组:
java:
String[] ss=new String[]{“1”,”123”};
ss.length

js:
    1.
        var arr1=new Array()//创建空数组
    2.
        var arr2=new Array(n)//创建长度为n的数组
    3.
        var arr2=new Array(ele1,ele2,ele3...)//创建直接初始化好元素的数组

    长度:---------------------------------->重点
        数组.length;
        获取元素
        数组对象[索引]
    注意:--------------------------------->重点
        js数组长度是可变的
        元素的类型没有限制 


数组的方法:
    头部:
        添加元素
            unshift("元素")
        和移除元素
            shift();
    尾部:
        添加元素
            push() 压入
        和移除元素
            pop() 弹出


    reverse() 反转
    sort();

引用类型:

array  数组

    在js中  原始类型的 string number  boolean 对应的包装类型
    原始类型 string number  boolean 也可以直接调用  包装类型的方法
String:
    var s="asdasd";
    var s1=new String("asdasd");

    java的方法基本一致



Number:
    var n=1.0;
    var n1=new Number(1.0)
Boolean:
    var b=true;
    var n1=new Boolean(true)

Date:
    跟java使用方式 基本一致

RegExp:正则 了解
    直接量写法
    var reg=/表达式/

    var reg=new RegExp(表达式)

    test()方法 验证 你的字符串格式是否符合

Math:数学
    跟java一模一样

全局函数: 内置函数  不属于任何一个对象 就是内置

    window对象的方法:(可省略window)

    尝试转换类:(重点)
        parseInt()//尝试将字符串转换成 整数
        parseFloat()//尝试将字符串转换成浮点数 小数

    强制转换
        Number(); 强制转换成数值

    进行编码
        encodeURI()//将中文转化为特殊编码
        decodeURI()//将encodeURI编码后的解码回中文

    eval()//(了解)
        就是解析你的js代码字符串 执行
        转换json格式

小例子
java
string s1=”字符串”;
String s2=new String(“字符串”)

    s1.split()
    s2.split()