JS基础语法

    
/** JavaScript
  * 1.0
  * 对象
  */
function Test(){
    var book = { // 创建对象. 
        name: "中华上下五千年" , // 属性name的值为"中华上下五千年".
        price: "99.00" , 
        flag: true // flag的值为true. 
    }; // 花括号标记了对象的结束. 
    /* 对象的两种取值方式: 通过"."或者"[]"来访问对象属性 
     * : book.name
     * : book["name"]
     */
    book.healthy = "Y"; // 通过赋值创建一个新的属性.
    console.log(book.name); 
    console.log(book["name"]); // 此种方式必须加引号还说明这是对象的属性名,否则取不到. 
    console.log(book); 
}

    
/** JavaScript
  * 1.1
  * 数组
  */
function Test(){
    var arr = [2,3,4,5]; // 具有四个值的数组,由"["和]"划定边界.
    /* arr[0] 获取数组中第一个元素的值. 
     * arr.length 获取数组的长度. 
     * arr[arr.length-1] 获取数组中最后一个元素. 
     */  
    console.log(arr[0]); // 数组中第一个元素的索引为0 
    console.log(arr.length);  
    console.log(arr[arr.length-1]);  
    console.log(arr[4]="9"); // 通过赋值来添加新元素. 
    console.log(arr[4]="6"); // 通过赋值来改变现有元素的值. 
    var arrs = []; // arrs是一个空数组,此时它具有0个元素. 
    console.log(arrs.length); 
}

/** JavaScript
  * 1.2
  * 数组和对象中都可以包含另一个数组或对象. 
  */
function Test(){
    /** 具有两个元素的数组
     * 其中每个元素都是一个对象
     */ 
    var arr = [
        {name:"张国荣",identity:"歌手"}, 
        {name:"黑虎",identity:"锦衣卫"}
    ]; 
    
    /** 这是一个包含两个属性的对象
     * 其中每个属性都是一个数组. 
     * 数组的元素也是数组. 
     */
    var book = {
        adult:[1,1,2],
        juveniles:[1,1,1]
    }; 
}

/** JavaScript
      * 1.3
      * 基础运算. 
      */
    function Test(){
        console.log("2"+"3"); // 字符串连接.  
        console.log(6+1); // 基础运算. 
        var count = 0; // 定义一个变量. 
        console.log(count++); // 自增1.  
        console.log(count--); // 自减1.  
        console.log(count += 2); // 自增2: 和"count = count + 2;"写法一样. 
        console.log(count *= 2); // 自乘2: 和"count = count * 2;"写法一样. 
        count; // 变量本身也是一个表达式. 
        /**相等关系运算符来判断两个值是否相等. 
          *不等于,大于,小于运算符的运算结果是true或false.
          */ 
        var x=2; y=3; 
        console.log(x==y); // false.
        console.log(x!=y); // true.
        console.log(x<y); // true. 
        console.log(x<=y); // true. 
        console.log(x>y); // false.
        console.log("two"=="three"); // false.
        console.log("two">"three"); // false.
        console.log(false == (x>y)); // true.
        /**粗略的讲短语是表达式的话,那整个句子就可以认为是语句. 
          *表达式仅仅计算出一个值,但并不做任何操作,他并不会改变程序的运行状态. 
          *而语句并不包含一个值(或者它所包含的值我们不怎么关心),但它们改变程序的运行状态. 
          */
    }

/** JavaScript
      * 1.4
      * 函数(函数是带有名称和参数的代码段,可以一次定义多次调用).
      */
    function add(x,y){ // 定义一个名为add的函数,带有参数x,y
        return x+y; // 计算函数的值,返回两个参数之和. 
    } // 函数代码块是由花括号包裹起来的部分. 
    
    add(1,1); // 调用函数add(),传入参数1和1,最终返回2. 
    
    var arr = function(x,y){ // 函数是一种值,可以赋值给变量. 
        return x*y; // 计算函数的值. 
    }; // 注意: 分号标示了赋值语句的结束.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <p><button onclick="see();" >按钮</button></p>
</body>
<script type="text/javascript">
    /* JavaScript
　　　* 1.5 
　　  *下段代码展示了如何在javaScript中定义一个类来表示2D平面几何中的点. 
     * 这个类实例化的对象拥有一个名为r()的方法,用来计算该点到原点的距离. 
     * prototye属性: 向对象添加属性和方法。
     */ 
    // 定义一个构造函数以初始化一个新的Point对象
    function Point(x,y){ // 按照惯例,构造函数均以大写字母开始 
        this.x = x ; // 关键字this指代初始化的实例 
        this.y = y ; // 将函数参数存储为对象的属性 
    } // 不需要return 
    
    // 通过给构造函数的prototye对象赋值,来给Point对象定义方法. 
    Point.prototype.r = function(){
        return Math.sqrt(
            this.x * this.x + // this指代调用这个方法的对象 
            this.y * this.y // 返回x² + y² 的平方根 
        ); 
    }; 
    
    // 使用new关键字和构造函数来创建一个实例 
    var p = new Point(1,1); // 平面几何中的点(1,1) 
    
    // Point的实例对象p(以及所有的Point实例对象)继承了方法r() 
    p.r(); // 1.414
    
    // 调用实现 
    function see(){
        //alert(p.r()); 
        console.log(Point.prototype);
    }
</script>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    Hello 
    <button onclick="hide(this,true); debug('hide button 1'); ">Hide1</button>
    <button onclick="hide(this); debug('hide button 2'); ">Hide2</button>
    World 
</body>
<script type="text/javascript">
    /*在document中的一个指定区域输出调试信息 
     *如果document中不存在这样的一个区域则创建一个. 
     */ 
    function debug(msg){
        // 通过查看HTML元素id属性来查找文档的调试部分. 
        var log = document.getElementById("debuglog"); 
        
        // 如果这个元素不存在,则创建一个. 
        if(!log){
            log = document.createElement("div"); // 创建一个新的<div>元素. 
            log.id = "debuglog"; // 给这个元素的HTML元素id 赋值. 
            log.innerHTML = "<h1>Debug Log</h1>"; // 定义初始内容. 
            document.body.appendChild(log); // 将其添加到文档的末尾.
        }
        // 将消息包装在<pre>中,并添加至log中. 
        var pre = document.createElement("pre"); // 创建<pre>标签. 
        var text = document.createTextNode(msg); // 将msg添加在一个文本节点中. 
        pre.appendChild(text); // 将文本添加至<pre>. 
        log.appendChild(pre); // 将<pre>添加至log. 
    }
    
    function hide(e, reflow){ // 通过javaScript操纵样式来隐藏元素e. 
        if(reflow){ // 如果第二个元素是true. 
            e.style.display = "none"; // 隐藏这个元素,其所占的空间也随之消失. 
        }else{ // 否则
            e.style.visibility = "hidden"; // 将e隐藏,但是保留其所占用的空间. 
        }
        /* visibilty属性规定元素是否可见 
         * 即使不可见的元素也会占据页面上的空间,一般会使用display属性. 
         */ 
    }
    
    function highlight(e){ // 通过设置CSS类来高亮显示e. 
        /* 简单的定义或追加HTML类属性
         * 这里假设CSS样式表中已经有"hilite"类的定义. 
         */ 
        if(!e.className) e.className = "hilite"; 
        else e.className += "hilite"; 
    }
</script>
</html>

posted @ 2019-04-15 00:44 我需要一杯水阅读(477) 评论(0) 收藏举报

刷新页面返回顶部