我的传智播客之javaweb_day03学习总结

最新推荐文章于 2021-02-27 08:22:37 发布

菜鸡小钟

最新推荐文章于 2021-02-27 08:22:37 发布

阅读量268

点赞数

分类专栏：关于传智播客javaweb的学习笔记

本文链接：https://blog.csdn.net/zhongfupeng/article/details/60880827

版权

关于传智播客javaweb的学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js的String对象

创建String对象

var str = "abc";

属性 length：字符串的长度
方法：

与html相关的方法（设置样式）
// bold(): 加粗
var str1 = "abc";
document.write(str1.bold());

// fontColor(): 设置字符串的颜色
var str2 = "abc";
document.write(str2.fontColor("red"));

// fontSize(): 设置字体的大小 1-7
var str3 = "abc";
document.write(str3.fontSize(7));

// link(): 将字符串显示成超链接
var str4 = "abc";
document.write(str4.link("hello.html"));

// sub()、sup()：设置上标、下标

与java相似的方法
// concat(): 连接字符串
var str1 = "abc";
var str2 = "def";
document.write(str1.concat(str2)); // abcdef

// charAt(): 返回指定位置的字符
var str3 = "abcdef";
document.write(str3.chatAt(0)); // a
document.write(str3.chatAt(20)); // 字符位置不存在,返回空字符串

// indexof(): 返回字符串的位置

// split(): 把字符串切割成数组

// replace(): 替换字符串 参数：(原始字符串,要替换成的字符串)

// substr()和substring():
var str7 = "abcdefghijk";
document.write(str7.substr(5, 5)); // fghij 从第5位开始向后截5个字符
document.write(str7.substring(3, 5)); // de 从第几位开始到第几位结束 [3, 5)

js的Array对象

创建数组(三种)

// 创建空数组
var arr = [];
var arr = new Array();

属性：length 数组的长度
方法：

// 1.concat(): 连接数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
document.write(arr1.concat(arr2)); // 1,2,3,4,5,6

// 2.join(): 根据指定的字符分割数组
var arr3 = [1,2,3];
document.write(arr3); // 1,2,3
document.write(arr3.join("-")); // 1-2-3

// 3.push(): 向数组末尾添加元素,返回数组的新的长度
var arr5 = [1,2,3];
document.write(arr3.length); // 3
document.write(arr3); // 1,2,3
document.write(arr3.push("4")); // length: 4
document.write(arr3); // 1,2,3,4

// 如果添加的是一个数组,这时候把数组当作一个整体添加进去  
var arr6 = ["aaa","bbb","ccc"];
var arr7 = ["ddd","eee"];
document.write(arr6.push(arr7)); // length: 4

// 4.pop(): 删除最后一个元素,返回被删除的那个元素
var arr8 = [1,2,3];
document.write(arr6.pop()); // 3
document.write(arr6); // 1,2

// 5.reverse(): 颠倒数组中元素的顺序

js的Date对象

在java里获取当前时间

Date date = new Date();
// 1.格式化代码
// 2.toLocaleString();

在js里获取当前时间

var date = new Date(); // Fri Apr 17 10:47:46 UTC+0800 2015
date.toLocaleString(); // 2015年4月16日....

// getFullYear(): 得到当前的年
// 不要用getYear()
date.getFullYear(); // 当前年

// getMonth(): 获取当前的月
// 返回的是0-11月,想要返回准确的值需+1
date.getMonth() + 1; // 当前月

// getDay(): 获取当前的星期
// 返回的是0-6, 0: 星期日

// getDate(): 获取当前的日

// getHours(): 获取当前的小时

// getMinutes(): 获取当前的分钟

// getSeconds(): 获取当前的秒

// getTime(): 获取毫秒数 自1970 1 1 至今的毫秒数
// 应用场景:使用毫秒数处理缓存的效果(没有缓存)
http://baidu.com?毫秒数

js的Math对象

数学的运算，里面都是静态方法Math.xxx()。

Math.ceil(): 向上取整
Math.floor(): 向下取整
Math.round(): 四舍五入
Math.random(): 返回随机数(伪随机数) 0.0-1.0
Math.pow(x,y)
Math.PI

js的全局函数

不属于任何一个对象,直接使用函数

// eval(): 执行字符串中的js代码
var str = "alert('1234')";
eval(str);

// encodeURI(), encodeURIComponent(): 对字符进行编码 
// decodeURI(), decodeURIComponent(): 对字符进行解码
var str1 = "测试aaa123";
var encode1 = encodeURI(str1); // "%E6%B5%8B%E8%AF%95aaa123"
var decode1 = decodeURI(encode1); // "测试aaa123"

// isNaN(): 判断是否是数字
// 如果是数字,返回false;不是数字,返回true    
var str = "aaa";
isNaN(str) // true

// parseInt(): 类型转换
var str = "123";
parseInt(str) + 1; //124

js的函数重载

js不存在重载，只调用最后一个方法。
传递的参数保存到arguments里。
但是可以通过arguments数组实现模拟重载。

function add1() {
    if (arguments.length == 2) {
        return ...
    } else if (arguments.length == 3) {
        return ...
    } else {
        return ...
    }
}

js的bom对象

bom：browser object model 浏览器对象模型。

对象：

// nevigator: 获取客户机(浏览器)的信息
navigator.appName;

// screen: 获取屏幕的信息
screen.height;

// location: 请求url地址
// -href
    //获取URL地址
    location.href; 
    //设置url地址
    location.href = "xxx.html";

// history: 请求的url的历史记录
    // 到访问的上一个页面
    history.back();
    history.go(-1);
    // 到访问的下一个页面
    history.forward();
    history.go(1);  
// window: 
    // 1.窗口对象
    // 2.js的顶层对象(所有的bom对象都是在window里面操作)
    // 方法
        // window.alert(): 警告框
            // 简写：alert();
        // confirm(): 确认框
        var flag = confirm("显示的内容"); // 返回true 或 false
        // prompt(): 输入对话框
        prompt(text, defaultText);
        // open(): 打开一个新的窗口
        open("hello.thml", "", "width=200,height=100");

        // close(): 关闭窗口

        // 定时器
        // setInterval("js代码",毫秒数)：
        // 表示每三秒执行一次alert()
        var id1 = setInterval("alert('123')", 3000); // 返回id
        // setTimeout("js代码",毫秒数)：
        // 表示在毫秒数之后执行,但只执行一次
        var id2 = setTimeout("alert('123')", 3000); // 返回id
        // clearInterval(): 清除setInterval设置的定时器,传入id
        clearInterval(id1);
        // clearTimeout(): 清除setTimeout设置的定时器,传入id
        clearTimeout(id2);

js的dom对象

dom：document object model 文档对象模型

文档：超文本标记文档 html、xml
对象：提供属性和方法
模型：使用属性和方法操作超文本标记型文档
使用js的dom所提供对象，使用这些对象的属性和方法对标记型文档内容进行操作。
想要对标记型文档进行操作，首先将文档的所有内容（html里的标签,属性,文本内容）封装成对象。
解析过程：根据html层级结构在内存中分配一个树形结构,需要把html中的每部分封装成对象。
- document对象：整个html文档
- element对象：元素(标签)对象
- 属性对象、文本对象：依附在element对象上
- Node对象：上述所有对象的父对象
DOM模型（3种）
DHTML：很多技术的简称 html、css、dom、js

document对象

表示整个文档
常用方法

// write(): 向页面输出变量(值)、html代码

// getElementById(): 通过id得到元素(标签)
<input type="text" id="nameid" value="aaa"/>
// 得到input标签
var input1 = document.getElmentById("nameid");
// 得到input里面的value值
input1.value;
// 向input里面设置value值
input1.value = "bbb";

// getElementsByName(): 通过标签的name属性值返回一个集合
<input type="text" name="name1" value="aaa"/>
<input type="text" name="name1" value="bbb"/>
// 得到input标签
var inputs = document.getElmentsByName("name1");
inputs.length;
// 遍历数组
for (var i=0;i<inputs.length;i++){
    var input1 = inputs[i];
    intpu1.value;
}

// getElementsByTagName(): 通过标签名称返回一个集合
var inputs = document.getElmentsByTagName("input");
// ... 与上面一样

案例 window弹窗

实现过程
- 创建主页面
  - 有两个输入项和一个按钮
  - 按钮上有一个事件: 弹出一个新窗口 open
- 创建弹出页面
  - 表格每一行都有一个按钮、编号和姓名
  - 按钮上有一个事件: 把当前的编号和姓名赋值到主页面的输入项位置

// window.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

    姓名：<input type="text" id="name">
    <br/>
    编号：<input type="text" id="no">
    <br/>
    <input type="button" value="选择" onclick="open1()">
</body>
<script type="text/javascript">
    function open1() {
        window.open("user.html", "", "width=250,height=150");
    }
</script>
</html>


// user.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <table>
        <tr>
            <td>操作</td>
            <td>姓名</td>
            <td>编号</td>
        </tr>
        <tr>
            <td>
                <input type="button" value="选择" onclick="s1('小明','01')">
            </td>
            <td>小明</td>
            <td>01</td>
        </tr>
        <tr>
            <td>
                <input type="button" value="选择" onclick="s1('小黑','02')">
            </td>
            <td>小黑</td>
            <td>02</td>
        </tr>
        <tr>
            <td>
                <input type="button" value="选择" onclick="s1('小白','03')">
            </td>
            <td>小白</td>
            <td>03</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    function s1(name, no) {
        var pwin = window.opner;
        pwin.document.getElementById("name").value = name;
        pwin.document.getElementById("no").value = no;
        close();
    }
</script>
</html>