JavaWeb_03_JavaScript学习小结1

1.javascript的简介

是基于对象和事件驱动的语言，应用于客户端。

基于对象：
- 提供好了很多对象，可以直接拿过来使用
事件驱动：
- html做网站静态效果,javascript动态效果
客户端：
- 专门指浏览器

特点

交互性：信息的动态交互
安全性：js不能访问本地磁盘文件
跨平台性：能够支持js的浏览器都可以运行

与java的区别

不同的开发公司
js基于对象，Java面向对象
js是弱类型的语言 var m = "10";
js通过浏览器解释就能执行

js的组成

ECMAscript:ECMA（欧洲计算机协会），由这个组织制定js的语法，语句……
BOM:(Browser Object Model)浏览器对象模型，对浏览器相关的对象进行操作。
DOM:(Document Object Model)文档对象模型，对网页里的内容进行操作。

2.js和html的结合方式

使用<script>标签

<script type="text/javascript">
	……
</script>

使用<script>标签引入一个外部的js文件

<script type="text/javascript" src="xxx.js" >

// 使用这种方式，在<script>标签里写的js代码，浏览器不会再执行。

3.js的原始类型和声明变量

定义变量：使用关键字var

js的原始类型

string:字符串 var str = "abc";
number:数字类型 var m = 123;
boolean(true和false):var flag = true;
null:获取对象的引用，null表示引用对象为空，所有对象的引用也是object,null也是一个object。

typeof():查看当前变量的数据类型

4.js的语句

if判断语句
switch语句：js都支持所有数据类型
循环语句：for(var xx= ; 😉 / while /do-while

5.js的运算符

js不区分整数和小数

//java
123/1000*1000 结果是 0
//js
123/1000*1000 结果是 123

字符串的相加和相减的操作

相加：字符串连接
相减：减运算

var str="460";

alert(str+1);
alert(str-1);

var str="abc";
alert(str-1);

boolean的操作

var flag = true;  
alert(flag + 1);

== 和 === 的区别

比较的只是值，=比较的是值和类型。

var a = "5";

if (a == 5) {
	alert(a);
}

另外

直接向页面输出的语句，可以向页面输出变量，固定值和htmldiamo代码：

document.write(" this is the text ...");
document.write("<hr />");  //输出html代码

6.js的数组

定义数组

//1.直接指定元素
var arr1 = [1, 2, "4", true];

//2.使用内置对象Array
var arr2 = new Array(5);
arr2[0] = "1";

//3.使用内置对象Array
var arr3 = new Array(3, 4, 5);

数组有一个length属性：获取数组的长度

var arr = new Array(5);
alert("length" + arr.length);

7.js的函数

定义函数：参数列表里直接写参数名称

//1.使用关键字function
function 方法名(参数列表) {
	方法体;
	返回值（根据实际需要）;
}

eg: 
function test() {
	alert("show test!!!");
}

//2.匿名函数
var xxx = function(参数列表) {
	方法体和返回值;
}

eg:
var add = function(m, n) {
	alert(m+n);
}

//3.使用js的内置对象function（了解），称为动态函数
var xxx = new Function("参数列表", "方法体和返回值");

eg:
var add = function add(a, b) {
	var sum = a + b;
	alert(sum);
}

8.js的全局变量和局部变量

全局变量：在<script>标签里定义一个变量，这个变量在页面的所有js中都可以使用。在方法外部使用，在方法内部使用，在另外一个<script>标签使用。

局部变量：在方法内部定义一个变量，只能在方法内部使用。如果在方法外部调用这个变量，提示出错。

9.script放的位置

建议把<script>标签放在</body>后面，因为html是从上到下解析的。

10.js的string对象

创建string对象var str = "abc"
属性length：字符串的长度
方法：

与html相关的方法（设置样式）

// bold(): 加粗
var str = "abc";
document.write(str.bold());

// fontColor(): 设置字符串的颜色
document.write(str.fontColor("red"));

// fontSize(): 设置字体的大小 1-7
document.write(str.fontSize(7));

// link(): 将字符串显示成超链接
document.write(str.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)

11.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(arr5.length); //3
document.write(arr5); // 1, 2, 3
document.write(arr5.push("4")); // length:4
documnet.write(arr5); //1, 2, 3, 4

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

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

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

12.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?毫秒数

13.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

14.js的函数重载

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

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

15.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);

16.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

17.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");
// ... 与上面一样

18.案例 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>

注：此案例在谷歌浏览器下不能实现，因为谷歌浏览器的安全性设置较高，严格遵循不能访问本地文件的规则。故可以用其他浏览器，或搭建Web环境即可。

posted @ 2017-07-25 18:39 flatcc 阅读(194) 评论(0) 收藏举报

刷新页面返回顶部

FLATCC

Feel the chaim of ancient classic !
学习传统文化，专注网络和信息安全

JavaWeb_03_JavaScript学习小结1

1.javascript的简介

2.js和html的结合方式

3.js的原始类型和声明变量

4.js的语句

5.js的运算符

6.js的数组

7.js的函数

8.js的全局变量和局部变量

9.script放的位置

10.js的string对象

11.js的Array对象

12.js的Date对象

13.js的全局函数

14.js的函数重载

15.js的BOM对象

16.js的DOM对象

17.document对象

18.案例 Window弹窗

公告

FLATCC

Feel the chaim of ancient classic ! 学习传统文化，专注网络和信息安全

JavaWeb_03_JavaScript学习小结1

1.javascript的简介

2.js和html的结合方式

3.js的原始类型和声明变量

4.js的语句

5.js的运算符

6.js的数组

7.js的函数

8.js的全局变量和局部变量

9.script放的位置

10.js的string对象

11.js的Array对象

12.js的Date对象

13.js的全局函数

14.js的函数重载

15.js的BOM对象

16.js的DOM对象

17.document对象

18.案例 Window弹窗

公告

Feel the chaim of ancient classic !
学习传统文化，专注网络和信息安全