JAVA企业级开发-JavaScript(02)

一、JavaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关

JavaScript与Java不同

JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。JScript微软 w3c ECMA组织 ECMAScrip jQuery
JS是基于对象，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 JS代码有无，浏览器一般不会提示错误。
JS是弱类型，Java是强类型。

二、JavaScript和html代码的结合方式

　　1. 第一种方式使用script标签嵌入js代码

需要在html文件中嵌入JavaScript代码时，需要在html文件中使用script标签完成。

　　 2.第二种方式外部引入js文件

　　3. JS中的注释

JavaScript是一门编程语言：

任何一门语言都具备如下的特点：

1、注释

2、关键字、标识符

3、常量、变量、运算符

4、语句、判断、循环、switch

5、函数方法

6、数组

我们学习JS和Java的不同之处。

java中的注释：// 、/** */、 /* */

js中的注释有2种：

单行注释：

// 注释内容

多行注释：

/* 注释内容 */ 多行中不能嵌套多行注释，但可以嵌套单行注释

　　4.、关键字、标识符

关键字：被JS赋予了特定含义的单词或者字母的组合。

var if switch do while for continue break 等

标识符：开发者根据自己的需求定义的一个符号，这些符号可以由字母数字下划线 $ 符号，开始不能是数字。

　　5、常量

Java中的常量：

整数、小数、字符、布尔值、null、字符串。

Java中的数据类型：

整数：byte short int long

小数：float double

字符：char

布尔：boolean

字符串：String

Js中的常量：

数值：整数和小数

字符串：在js中使用单引号或者双引号引用起来的全部都是字符串

布尔：true false 在js中零，null、undefined等可以理解成false，所有非零、非null、非undefined值都可以理解成true。

null：null

undefined：undefined

JS中的数据类型：

数值型：number

字符串：string

布尔：boolean

对象类型：Object

在JS中也有二进制、八进制、十进制、十六进制。运算规则和Java一致。

6、变量

变量：表示的是一个内存空间。可以保存常量数据。

Java中如何定义一个变量：

数据类型变量名 ; 数据类型变量名 = 初始值;

JS中定义变量：

var 变量名； var 变量名 = 初始值;

JS中定义的变量空间，在没有赋值之前，这些空间中是没有数据类型的。定义的空间可以保存任何类型的数据。

1 // 1. 定义一个变量名，使用typeof检测类型
2 // 2. 给变量赋值数值型，使用typeof检测类型
3 // 3. 给变量赋值字符串型，使用typeof检测类型

　　7. 运算符：

+ - * / % ++ --

1、由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。

2、字符串和其他的数据使用+号运算，会连接成一个更长的字符串。

3、如果字符串和和非+号的进行运算，

如果字符串可以转成number数据，就会把字符串转成number数据进行运算。

如果字符串无法转成numbe 进行运算，就得到NaN结果，表示当前是一个非数字结果。

NaN ： not a number

示例：

// 猜结果

var x = 4321 / 1000 * 1000;

alert(x); // 4321

var y = "23" + 20;

alert(y); // 2320

var z = "23" - 20;

alert(z); // 3

var j = "aaa" - 20;

alert(j); // NaN

　　a.、赋值运算

= 把右侧结果赋值给左侧空间。

var x = 123；

+= -= *= /= %= 和Java运算一致

　　b. 关系（比较）运算

三、函数

　　1. 第一种

格式：

function 函数名( 参数列表 )

{

函数体;

}

函数的细节：

　　2.第二种定义函数的格式

格式：

var 函数名 = new Function( “接受数据的变量名”,”函数体的代码” );

　　3. 第三种定义函数的格式

第三种定义方式：匿名函数

格式：

function(){

函数体;

}

 1 <script type="text/javascript">
 2         var demo = function(){
 3             alert("123");
 4         }
 5         //demo();
 6         
 7         // window对象是js已经创建好的，我们可以直接使用的对象
 8         // onload是js对象的一个加载事件，这个功能：当整个页面加载完成后执行
 9         window.onload = function(){
10             // alert("咱们帅哥真多！");
11             
12             // 给用户名的input绑定单击事件
13             document.getElementById("username").onclick = function(){
14                 // 将input框中的值清空
15                 document.getElementById("username").value = "";
16             }
17         }
18     </script>
19   </head>
20   
21   <body>
22         用户名：<input type="text" id="username" value="美女姓名"/>
23   </body>

window.onload = function(){

　alert("咱们帅哥真多！"

);

其实就是当页面加载完成后执行就是说页面全部加载完毕最后才执行，那上面用户名美女姓名当你页面加载完毕后会在text文本标签中显示美女姓名，所以在绑定单击事件后清空

四、JS中的对象

　　1、Date对象

 1 <script type="text/javascript">
 2         
 3         // 定义日期
 4         var d = new Date();
 5         document.write(d.toLocaleString() + "<br/>");
 6         document.write(d.toLocaleTimeString() + "<br/>");
 7         document.write(d.toLocaleDateString() + "<br/>");
 8         
 9         // 页面加载完成后执行
10         window.onload = function(){
11             window.setInterval("setTime()",1000);
12         }
13         
14         function setTime() {
15             // 创建日期对象
16             var d = new Date();
17             // 获取div标签对象，向里面放值
18             document.getElementById("setTime").innerHTML = d.toLocaleTimeString();
19         }
20     </script>
21   </head>
22   
23   <body>
24       <div id="setTime"></div>
25   </body>

String对象

Math对象和Java中的基本一致

RegExp对象，正则对象，正则表达式的书写规则和Java也一致：

. 当前可以是任意字符

? 表示零次或一次

* 表示零次或多次

+ 表示一次或多次

() 对某个存在的正则进行分组组的使用组号 $组号

{} 当前的规则可以出现的次数

{m} 正好 m次 {m,} 最少m次 {m,n} 最少m次最多n

[] 当前位置上可以是中括号中某个字符

[abc] [^abc]

\d 当前位置上可以数字

\w 当前位置上可以是字母数字下划线

单词边界

^ 行开始

$ 行结尾

1 需求： 2 1、需要打印当前当前的时间；yyyy-MM-dd hh:mm:ss 3 2、给定字符串，判断是否符合4~12位的字母数字下划线的的组合。

一定要写行开始和行结束

　　2. JS中的全局函数

在JS中有上述的函数，可以直接在js代码中使用，不需要通过任何对象来调用。

需求：

1、对含有中文参数的URL进行编码和解码

2、使用eval将字符串转成js代码执行（重要,JASON都会用到）

 1 <script type="text/javascript">
 2         //1、 对含有中文参数的URL进行编码和解码
 3         var url = "http://www.baidu.com?username=高圆圆&age=23&sex=女"; 
 4         // 编码
 5         var encUrl = encodeURI(url);
 6         //alert(encUrl);
 7         // 解码
 8         var decUrl = decodeURI(encUrl);
 9         //alert(decUrl);
10         
11         //2、 使用eval将字符串转成js代码执行
12         eval("alert('abc')");
13     </script>

1、js和Java的不同之处。

2、函数的定义和使用第一种和第三种

3、了解 js中的数组操作

五、JS中的自定义对象：

1、js中的函数就是对象，对象就是函数。

2、动态的给对象添加属性和方法。

3、给对象定义默认的构造方法。

 1 /*
 2             1、js中的函数就是对象，对象就是函数。
 3     
 4             2、动态的给对象添加属性和方法。
 5             
 6             3、给对象定义默认的构造方法。
 7         */
 8         function Person() {} // 理解为定义一个类
 9         
10         var person = new Person(); // 实例化一个Person
11         
12         // 2、动态的给对象添加属性和方法。
13         person.name = "高圆圆";
14         person.age = "23";
15         
16         person.setName = function(name){
17             this.name = name;
18         }
19         
20         person.getName = function() {
21             return this.name;
22         }
23         
24         alert(person.name + "    " + person.age);
25         
26         person.setName("杨幂");
27         alert(person.getName());
28         
29         var person2 = new Person();
30         // person2.setName("baby");
31         
32         // 3、给对象定义默认的构造方法。
33         function Dog(name, color) {
34             this.name = name;
35             this.color = color;
36             
37             this.setName = function(name) {
38                 this.name = name;
39             }
40             
41             this.getName = function(){
42                 return this.name;
43             }
44         }
45         
46         var d = new Dog("旺财","黑色");
47         alert(d.getName());

JAVA企业级开发-JavaScript(02)

一、JavaScript介绍

二、JavaScript和html代码的结合方式

1. 第一种方式 使用script标签嵌入js代码

2.第二种方式 外部引入js文件

3. JS中的注释

4.、关键字、标识符

5、常量

6、变量

7. 运算符：

a.、赋值运算

b. 关系（比较）运算

三、函数

1. 第一种

2.第二种定义函数的格式

3. 第三种定义函数的格式

四、JS中的对象

1、Date对象

2. JS中的全局函数

五、JS中的自定义对象：

　　1. 第一种方式使用script标签嵌入js代码

　　 2.第二种方式外部引入js文件

　　3. JS中的注释

　　4.、关键字、标识符

　　5、常量

　　7. 运算符：

　　a.、赋值运算

　　b. 关系（比较）运算

　　1. 第一种

　　2.第二种定义函数的格式

　　3. 第三种定义函数的格式

　　1、Date对象

　　2. JS中的全局函数