j2ee学习笔记 javascript 学习

JavaScript 组成：

ECMAScript + BOM + DOM

Window对象是JS中的顶层对象

ECMAScript: 规定了一些语法，变量，for循环等等结构

BOM: Browser object Model 浏览器对象模型

DOM：Document object Model 文档对象模型

案例：

<script type="text/javascript">

<!--

　　　　alert("abc");

//--> 如果浏览器不认识他，就忽略掉

</script>

数据类型

表单提交数据

<html>

<head>
<title>表单标签</title>
作用：搜集数据<br><br>
</head>
<body>
</body>
<form action=""  method="get">
<!--action指要提交的页面       method默认采用的是get方式,post方式较为安全--
get方式将参数附加到网址后面，get方式的数据大小有限制 < 1k


-->
<!--value 表示要输入的内容 ， value就是要提交到服务器的内容。
    size表示字符的个数
    readonly 只读
-->
    姓名：  <input type="text" value="请输入内容" size=50 readonly> <br><br>
    密码：  <input type="password" value="请输入密码" ><br><br>
    隐藏框：<input type="hidden" value="hiddent"><br><br>
    性别：  <input type="radio" name="gender" value="male" >男<input type="radio" name="gender" value="female" checked>女<br><br>
        <!--需要设定name 才能认为是一组，菜单实现单选-->
        <!--checked的值也是checked,可以省略，readonly的值也是readonly，可以省略-->
    爱好：    <input type="checkbox" name="love" value="打游戏">打游戏 
            <input type="checkbox" name="love" value="编程">编程
            <input type="checkbox" name="love" value="打篮球">打篮球
            <input type="checkbox" name="love" value="游泳">游泳
            <input type="checkbox" name="love" value="追剧">追剧<br><br>
            
    学历：<select name="xueli">
                <option value="高中">高中</option>
                <option value="本科">本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
                <option value="博士后">博士后</option>
          </select><br><br>
    备注：<textarea rows="5" clos="5"></textarea><br><br>
    <!--占据5行,5列,中间不要留空-->
    按钮：<br> <input type="button" value="普通按钮"onclick="alert(this.value)"><br>
            <input type="submit" value="提交按钮" onclick="alert(this.value)"><br>
            <input type="reset" value="重置按钮"><br><br>
            <input type="image" src="9.jpg"><br><br>
            <input type="image" value="普通按钮"><br><br>
            
            <button>123</button>
            
    </form>


</html>

javascript的类型转换

1.把字符串转换为number类型
a.parseInt,parseFloat 不推荐，较复杂。
b.n * 1;
2.把字符串转换成boolean类型
非零为真，零为假。
NaN : not a number

var a ="123";
    a = a * 1;
    alert(typeof(a));
    
    function fun(){
        //拿到文本框对象
        var txt = document.getElementById("age");
        //判断内容
        if(tex == 100){
            alert("年龄大于0");
        }else{
            alert("");
        }
    }

函数的定义方式：
1.采用关键字function:
2.采用匿名函数的方式(采用function作为名字)--了解即可

函数的调用：
调用函数的时候是采用函数名来寻找的，不能有重名的函数。

function fun(){
    alert("function");
}
//写函数名调用
fun();

var a = function(){
    alert("我是匿名函数");
}
a();

函数劫持：改变javascript的函数预定义好的功能

window.alert = function(x){
    document.write(x);
}

全局函数
1.isNaN : 是不是一个数字,返回TRUE不是数字; NaN:not a number
2.parseInt,parseFloat
3.eval:
a.主要执行字符串，将结果转换为数字
b.将json格式的字符串转换为json
{"a":"中国","b":"美国","c":"日本"}
4.escape() 编码
5.encodeURI(): 对网址(URL)进行编码
6.decodeURI(): 对网址爱（URL）进行编码

var a = "100";

if(isNaN(a)){
    alert("不是数字");
}else{
    alert("是数字");
}
<!--结果是数字，因为javascript只判断内容，不判断类型-->

alert("3" + "2");  <!--32-->

alert(eval("3") + eval("2")); <!--5-->

var b = "中国";

var c = escape(b);
alert(c);
alert(unescape(c));


var e = "http://www.sohu.com?a=中国&b=美国";
var f = encodeURI(e);
alert(f);
alert(decodeURI(f));

javascript中数组的类型

数组对象的定义方式
1.采用new Array() 的方式
2.采用[] 来定义(推荐使用)

javascript中数组与java中数组的差别
a.java中数组是有类型的，数组只能放一中数据类型,
javascript中的数组没有类型，但是不推荐放多种类型的数据。
b.java中数组的长度一旦确定就不能再改变了。
javascript中的数组长度是可以变化的。
c.java中的数组的数据引用必须用下标引用，
javascript中的数组的数据引用可以用任意对象。

var arr = new Array(); //定义数组arr,初始长度为0
var arr1 = new Array(4); //定义一个数组arr1,初始长度为4
arr1[0] = 1;
arr1[1] = 3;

alert(arr1[0]);
alert(arr1[2]);<!--没有定义，则是undefined类型-->

var arr2 = new Array(1,2,3,4,5,6,7,8);

var arr3 = [2,4,5,8,0,3]; //定义了一个数组，同时初始化数据

数组对象的方法array
1.join(); 默认情况下用逗号隔开;
2.将元素添加到数组的末尾;
3.reverse() 翻转顺序
4.shift() 删除并返回第一个元素。
5.sort() 排序
默认情况下先将能转换为number类型的字符串和number类型的放一起比较(转换为String类型进行比较)
转换不成的作为一组进行比较
按照自己的规则进行比较：需要传递一个function类型的参数制定比较规则。

var arr1=["中国","美国","日本"];
alert(arr1.join()); <!--默认情况下用逗号隔开;-->
alert(arr1.join("")); //用空字符串连接
arr1.push("东京");
alert(arr1.join());
alert(arr1.reverse());//翻转顺序
alert(arr1.shift());
-------------------------------------------------------
var arr1 = [3,6,"34","45",333];
alert(arr1.sort()); // 按字符串排序，3 < 333 < 34 < 4

//指定自己的规则
alert(arr1.sort(function(a,b){
    if(a * 1 > b * 1){
        return 1;
    }else{
        return -1;
    }
}));