JAVA企业级开发-JavaScript(02)

一、JavaScript介绍

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

特点:

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

JavaScriptJava不同

  1. JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。JScript微软  w3c ECMA组织   ECMAScrip   jQuery
  2. JS是基于对象,Java是面向对象。
  3. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。  JS代码有无,浏览器一般不会提示错误。
  4. 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 当前位置上可以是字母 数字 下划线

\b 单词边界

^ 行开始

$ 行结尾

  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());

 

转载于:https://www.cnblogs.com/Kubility123/p/7719612.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值