zoukankan      html  css  js  c++  java
  • JavaScript学习笔记(一)

    一、JavaScript的简介

    【1】是基于对象和驱动的的语言,应用于客户端。

            1.基于对象:提供了好对象,可以直接拿来使用。

            2.事件驱动:html做网站静态效果,javascript做动态效果。

            3.客户端:专门指的是浏览器。

    【2】js的特点

            1.交互性:信息的动态交互。

            2.安全性:js不能访问本地磁盘的文件。

            3.跨平台性:只要是支持js的浏览器都可以运行js脚本。

    【3】js和java的区别

            1.javascript是基于对象的,而java是面向对象的。

            2.java是强类型语言,javascript示弱类型语言。

    【4】js的组成部分

            1.ECMAScript:

                    ECMA:欧洲计算机协会,由他们定义了js的标准语法等。

            2.BOM:浏览器对象模型(Broswer Object Model)

            3.DOM:文档对象模型(Doucument Object Model)

    二、js和html的结合方式

    【第一种】使用标签<script type="text/javascript"></script>

    <html>
        <head>
            <title>javascript实例一</title>
        </head>
        <body>
            <script type="text/javascript">
                alert("js和html结合方式一");
            </script>
        </body>
    </html>

    【第二种】使用<script>标签,引入外部的js文件

    三、js的原始类型和声明变量

    js中声明变量使用的关键字是:var

    【1】原始类型

            1.string:字符串

            2.number:数字类型

            3.boolean:true和false

            4.null:表示对象的引用为空,所有对象的引用都是object

            5.undifined:定义了一个变量,但是没有赋值,例如:var  b;

    【2】typeof(),可以查看当前变量的数据类型。

    <html>
        <head>
            <title>javascript实例二</title>
        </head>
        <body>
            <script type="text/javascript">
                //声明字符串
                var str = "123";
                
                //声明数字类型
                var num = 123;
                var type = typeof(num);
                alert(type);//结果:number
                
                //声明布尔类型
                var b = true;
            </script>
        </body>
    </html>

    四、js中的控制语句

    【1】if判断语句

           在Javascript中,不为空的字符串,不为0的数字,不为null的对象,不为undefined的对象属性,布尔型true,当它们单独作为判断式中的一个表达式时,js认定它们为true,反之为false。       

    【2】switch语句

    【3】循环语句 for 、while、do-while

    <html>
        <head>
            <title>javascript实例三</title>
        </head>
        <body>
            <script type="text/javascript">
                //if判断语句
                var b = 6;
                if(b == 6) {
                    alert("变量b的值是:" + b);
                } else {
                    alert("other");
                }
                
                //switch语句
                var a = 3;
                switch(a) {
                    case 3:
                        alert(3);
                        break;
                    case 4:
                        alert(4);
                        break;
                    default:
                        alert("other");
                }
                
                //for循环变量
                for(var i=0;i<3;i++) {
                    alert(i);
                }
            </script>
        </body>
    </html>

    五、js中的运算符

    【1】js中的运算符和java中的运算符基本上相同。

    【2】注意几个细节

            1.js中不区分整数和小数

            2.字符串的相加和相减操作,如果做相加操作,做的是字符串的连接操作;如果做的是相减操作,做的是减法运算。

            3.NaN表示不是一个数字。

            4.boolean类型也可以进行相加、相减操作。如果设置成true,相当于值为1;如果设置成false,相当于值为0。        

    【3】引入知识:document.write(),是直接想页面输出语句,可以想页面输出变量、固定值和html代码。

    <html>
        <head>
            <title>javascript实例四</title>
        </head>
        <body>
            <script type="text/javascript">
                var j = 123;
                /**
                 * j/1000*1000在java中的结果是0。但在js中是不同的,
                 * 在js中不区分整数和小数
                 */
                alert(j/1000*1000); //结果123
                
                var flag = true;
                alert(flag + 1); //结果2
                alert(flag - 1); //结果0
                
                //字符串的相加、相减操作
                var b = "123";
                alert(b + 1); //结果1231
                alert(b - 1); //结果121
            </script>
        </body>
    </html>

    六、JavaScript在页面打印乘法表

    <html>
        <head>
            <title>javascript实例四</title>
        </head>
        <body>
            <script type="text/javascript">
                for(var i = 1; i < 10 ; i++) {
                    for(var j = 1; j <= i ; j++) {
                        document.write(j + "x" + i + "=" + j * i);
                        document.write("&nbsp;");
                    }
                    document.write("</br>");
                }
            </script>
        </body>
    </html>

    七、js中的数组

    【1】定义方式(三种)

           1.第一种: var arr = [1,2,3]    var arr2 = [1,"ab",4]

           2.第二种:使用js内置对象Array

            var arr = new Array(2);表示定义了一个数组,该数组的长度为2

            arr[0] = 1;arr[2] = 2;

         3.第三种:使用js内置对象Array

          var arr = new Array(1,2,3);表示定义了一个数组,数组里面的元素为1、2、3

    【2】注意几点:(1) 数组具有length属性,可以查看数组的长度  (2)数组的长度是可以改变的   (3)数组中可以存放不同类的元素

      八、js中函数的定义

    这里只介绍两种常用的方式:

    【1】使用关键字 function

    <html>
        <head>
            <title>javascript实例五</title>
        </head>
        <body>
            <script type="text/javascript">
                //调用函数
                test(4,3);
                //定义函数
                function test(a,b) {
                    alert(a+b);
                }
            </script>
        </body>
    </html>

    【2】匿名函数

    <html>
        <head>
            <title>javascript实例六</title>
        </head>
        <body>
            <script type="text/javascript">
                //定义函数
                var sub = function(a,b) {
                    alert(a - b);
                }
                
                //调用函数
                sub(5,1);
            </script>
        </body>
    </html>

    九、js中的全局变量和局部变量

    【1】全局变量:在script标签里定义一个变量,这个变量在页面中js部分都可以使用。(在方法外部使用,在方法内部使用,在另外一个

                         script标签中使用)

    【2】局部变量:在方法内部定义一个变量,只能在方法内部使用。

    【3】补充一点:

           建议把<script>标签放到<body>后面,为什么建议这样呢?假如现在有这样一个需求:在js里面获取input中的值,如果把script放到

    head里面是会出问题的,html的解析是从上到下解析的,script标签放到head里面,直接利用js取input里面的值是取不到的,因为页面还没解析到input这一行。

    <html>
        <head>
            <title>javascript实例七</title>
            <script type="text/javascript">
                var v = document.getElementById("name");
                alert(v.value);
            </script>
        </head>
        <body>        
            <input type="text" name="name" id="name" value="aaa"/>
        </body>
    </html>

           此时并不能获取input的值。

  • 相关阅读:
    137. 只出现一次的数字 II
    JS_利用Canvas进行图片旋转
    JS_图片压缩并预览
    计蒜客——等和的分隔子集
    中缀表达式转后缀并计算(只考虑个位整数,不考虑除0等情况)
    求最小数 * 区间和最大值
    967 质量检测
    PAT-1102(Invert a Binary Tree)
    PAT-1100(Mars Numbers)
    PAT-1099(Build A Binary Search Tree)
  • 原文地址:https://www.cnblogs.com/shi-blog/p/4783915.html
Copyright © 2011-2022 走看看