第二节 javascript

1、简单示例
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            document.write("<h1>利用js的方式动态写入内容</h1>")
        </script>

    </head>

    <body>

    </body>

</html>
2、基本数据类型
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            document.writeln("<h1>利用js的方式动态写入内容</h1>")
            var a
            document.writeln(typeof a)
            var a=0
            document.writeln(typeof(a))
            var a="abc"
            document.writeln(typeof a)
            var a='a'
            document.writeln(typeof a)
            var a=1.12
            document.writeln(typeof a)
            var a=true
            document.writeln(typeof a)
            var a=null
            document.writeln(typeof a)
        </script>

    </head>

    <body>

    </body>

</html>

网页显示:


image.png

一般在调试打印日志的时候用的更多的是

console.log()

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            var a
            console.log(typeof a)
            var a=0
            console.log(typeof a)
            var a="abc"
            console.log(typeof a)
        </script>

    </head>

    <body>

    </body>

</html>

然后在浏览器的开发者选项中,console选项卡中


image.png
3、一点注意事项

NaN:not a number如果两个数据类型都是NaN,这两个数据类型也不相等

4、等性运算符

==、!=、===、!==
官方手册:http://www.w3school.com.cn/js/pro_js_operators_equality.asp
在 ECMAScript 中,等号由双等号(==)表示,当且仅当两个运算数相等时,它返回 true。非等号由感叹号加等号(!=)表示,当且仅当两个运算数不相等时,它返回 true。为确定两个运算数是否相等,这两个运算符都会进行类型转换。

执行类型转换的规则如下:

  • 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。

  • 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。

  • 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。

  • 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
    在比较时,该运算符还遵守下列规则:

  • 值 null 和 undefined 相等。

  • 在检查相等性时,不能把 null 和 undefined 转换成其他值。

  • 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。

  • 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
    重要提示:即使两个数都是 NaN,等号仍然返回 false,因为根据规则,NaN 不等于 NaN。


    image.png

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回 true。

例如:

var sNum = "66";
var iNum = 66;
alert(sNum == iNum);    //输出 true
alert(sNum === iNum);   //输出 false

在这段代码中,第一个 alert 使用等号来比较字符串 "66" 和数字 66,输出 "true"。如前所述,这是因为字符串 "66" 将被转换成数字 66,,然后才与另一个数字 66 进行比较。第二个 alert 使用全等号在没有类型转换的情况下比较字符串和数字,当然,字符串不等于数字,所以输出 "false"。

非全等号由感叹号加两个等号(!==)表示,只有在无需类型转换运算数不相等的情况下,才返回 true。

例如:

var sNum = "66";
var iNum = 66;
alert(sNum != iNum);    //输出 false
alert(sNum !== iNum);   //输出 true

这里,第一个 alert 使用非等号,把字符串 "66" 转换成数字 66,使得它与第二个运算数 66 相等。因此,计算结果为 "false",因为两个运算数是相等的。第二个 alert 使用的非全等号。该运算是在问:"sNum" 与 "iNum" 不同吗?这个问题的答案是:是的(true),因为 sNum 是字符串,而 iNum 是数字,它们当然不同。

5、switch语句

在 ECMAScript 中,switch 语句可以用于字符串,而且能用不是常量的值说明情况:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            var BLUE = "blue",
                RED = "red",
                GREEN = "green";
                
                var sColor="red"

            switch(sColor) {
                case BLUE:
                    alert("Blue");
                    break;
                case RED:
                    alert("Red");
                    break;
                case GREEN:
                    alert("Green");
                    break;
                default:
                    alert("Other");
            }
        </script>

    </head>

    <body>

    </body>

</html>

网页显示:


image.png
6、函数

函数定义关键字function,在函数定义中,不管函数有没有返回值,都不用写返回值类型

7、给按钮绷定函数
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            function showText() {
                document.write("HelloWorld")
            }
        </script>

    </head>

    <body>

        <input type="button" value="点击" onclick="showText()" />
    </body>

</html>

8、数组
javascript中数组的长度是可变的

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            new Array();
            new Array(3);
            var arr=new Array("a", 20, true);
            document.write(arr[2])
        </script>
    </head>

    <body>

    </body>

</html>

9、正则表达式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            //检验手机号合法性:要求必须是11位,第一位必须是1,第二位不能是0、1、2剩余位数随意
            var reg=new RegExp("^1[^012]\\d{9}$");
            var mobile="13260289173"
            alert(reg.test(mobile))
            
        </script>
    </head>

    <body>

    </body>

</html>

10、日期

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        <!--script标签的位置随意 -->
        <script type="text/javascript">
            var date=new Date();
            alert(date.getFullYear())
            
        </script>
    </head>

    <body>

    </body>

</html>

显示结果:


image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 一、ECMAScript 一元运算符 一元运算符只有一个参数,即要操作的对象或值。它们是 ECMAScript 中...
    耦耦阅读 523评论 0 0
  • 表达式 概念: 将同类型的数据(如常量、变量、函数等),用运算符号按一定的规则连接起来的、有意义的式子称为表达式。...
    简约酒馆阅读 665评论 0 0
  • 表达式 表达式是由数字、运算符、数字分组符号(如括号)、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合...
    劼哥stone阅读 557评论 0 4
  • 标签: 我的笔记 ---学习资料:http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 792评论 0 1
  • Comment your JavaScript Code JavaScript中的注释方式有以下两种: 使用 //...
    归云丶阅读 1,093评论 0 0