zoukankan      html  css  js  c++  java
  • 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 当前位置上可以是字母 数字 下划线

     单词边界

    ^ 行开始

    $ 行结尾

      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());
  • 相关阅读:
    函数模板和类模板
    Dojo常用函数
    ☆☆☆Dojo中define和declare的结合使用
    Dojo的declare接口
    Dojo的define接口
    Dojo的on函数(以前的dojo.connect)
    Dojo中的选择器
    Dojo的ready函数:dojo.ready(以前的dojo.addOnLoad)
    Dojo的dojoConfig函数
    Dojo操作dom元素的样式
  • 原文地址:https://www.cnblogs.com/Kubility123/p/7719612.html
Copyright © 2011-2022 走看看