前端笔记(9)

代码:
1.js基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本语法</title>
    <script type="text/javascript">
        /*
        JS注释
        多行注释
            注释中的内容不会被执行,但是可以在源代码中查看
            要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试
        */
        //单行注释
        // alert("hello");
        // document.write("hello");
        console.log("hello");//该语句用来在控制台输出一个日志
        /*
        1.JS中严格区分大小写
        2.JS中每一条语句以分号(;)结尾
            - 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,
            - 而且有些时候,浏览器会加错分号,所以在开发中分号必须写
        3.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
        */
        alert("hello");
    </script>
</head>
<body>

</body>
</html>

2.Js编写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js编写位置</title>
    <!-- 
    可以将js代码编写到外部js文件中,然后通过script标签引入
    写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
    这是推荐使用的方式
    script标签一旦用于引入外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略
    如果需要则可以再创建一个新的script标签用于编写内部代码
     -->
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">
        alert("我是内部的JS代码");
    </script>

    <!-- 
    可以将js代码编写到script标签中
    <script type="text/javascript">
        alert("我是script标签中的代码!!");
    </script>
     -->
</head>
<body>
    <!-- 
    可以将js代码编写到标签的onclick属性中
    当我们点击按钮时,js代码才会执行
    虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
     -->
    <button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>

    <!-- 
    可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
     -->
    <a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
    <a href="javascript:;">你也点我一下</a>
</body>
</html>

3.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
    <script type="text/javascript">
        /*
        数据类型指的就是字面量的类型
            在JS中一共有六种数据类型
                String 字符串
                Number 数值
                Boolean 布尔值
                Null 空值
                Undefined 未定义
                Object 对象
            
            其中String Number Boolean Null Undefined属于基本数据类型
            而Object属于引用数据类型
        */
        /*
        String字符串
            - 在JS中字符串需要使用引号引起来
            - 使用双引号或单引号都可以,但是不要混着用
            - 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
        */
        var str = 'hello';
        /*
        在字符串中我们可以使用\作为转义字符,当表示一些特殊符号时可以使用\进行转义
            \" 表示 "
            \' 表示 '
            \n 表示换行
            \t 制表符
            \\ 表示\
        */
        str = "我说:\"今天\t天气真不错!\"";
        str = "\\\\\\";
        // console.log(str);
        //输出字面量 字符串str
        // alert("str");
        //输出变量str
        // alert(str);-
        var str2 = "hello";
            
        str2 = "你好";
        
        str2 = 3;
    </script>
</head>
<body>

</body>
</html>

4.标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标识符</title>
    <script type="text/javascript">
        /*
        标识符
            - 在JS中所有的可以由我们自主命名的都可以称为是标识符
            - 例如:变量名、函数名、属性名都属于标识符
            - 命名一个标识符时需要遵守如下的规则:
                1.标识符中可以含有字母、数字、_、$
                2.标识符不能以数字开头
                3.标识符不能是ES中的关键字或保留字
                4.标识符一般都采用驼峰命名法
                    - 首字母小写,每个单词的开头字母大写,其余字母小写
                    helloWorld xxxYyyZzz
            - JS底层保存标识符时实际上是采用的Unicode编码,所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
        */
        // var if = 123;
        // console.log(if);
        //千万不要这么用
        var 锄禾日当午 = 789;
        console.log(锄禾日当午);
    </script>
</head>
<body>

</body>
</html>

5.字面量和常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字面量和变量</title>
    <script type="text/javascript">
        /*
        字面量,都是一些不可改变的值
            比如 :1 2 3 4 5 "hello"
            字面量都是可以直接使用,但是我们一般都不会直接使用字面量
        变量    变量可以用来保存字面量,而且变量的值是可以任意改变的
            变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量
            可以通过变量对字面量进行描述
        x = 123456789123456789
        */
        //声明变量
        //在js中使用var关键字来声明一个变量
        var a;
        //为变量赋值
        a = 123;
        a = 456;
        a = 123456789123456789;
        //声明和赋值同时进行
        var b = 789;
        var c = 0;
        var age = 80;
        console.log(age);
    </script>
</head>
<body>

</body>
</html>

6.强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换</title>
    <script type="text/javascript">
        /*
        强制类型转换
            - 指将一个数据类型强制转换为其他的数据类型
            - 类型转换主要指,将其他的数据类型,转换为
                String Number Boolean
        */
        /*
        将其他的数据类型转换为String
        方式一:
            - 调用被转换数据类型的toString()方法
            - 该方法不会影响到原变量,它会将转换的结果返回
            - 但是注意:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错
        方式二:
            - 调用String()函数,并将被转换的数据作为参数传递给函数
            - 使用String()函数做强制类型转换时,
                对于Number和Boolean实际上就是调用的toString()方法
                但是对于null和undefined,就不会调用toString()方法
                它会将 null 直接转换为 "null"
                将 undefined 直接转换为 "undefined"
        */
        var a = 123;
        //调用a的toString()方法
        //调用xxx的yyy()方法,就是xxx.yyy()
        a = a.toString();
        a = true;
        a = a.toString();
        a = null;
        //a = a.toString(); //报错
        a = undefined;
        //a = a.toString(); //报错
        a = 123;
            
        //调用String()函数,来将a转换为字符串
        a = String(a);
        a = null;
        a = String(a);
        
        a = undefined;
        a = String(a);
        console.log(typeof a);
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

7.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
        /*
        运算符也叫操作符
            通过运算符可以对一个或多个值进行运算,并获取运算结果
            比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回
                "number" "string" "boolean" "undefined" "object"
        算数运算符
            当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算
            任何值和NaN做运算都得NaN
            +
                +可以对两个值进行加法运算,并将结果返回
                如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回
                任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
            -
                - 可以对两个值进行减法运算,并将结果返回
            *
                * 可以对两个值进行乘法运算
            /
                / 可以对两个值进行除法运算
            %
                % 取模运算(取余数)
        */      
        var a = 123;
        var result = typeof a;
        // console.log(result);
        // console.log(typeof a);
        result = a + 1;
        result = 456 + 789;
        result = true + 1;
        result = true + false;
        result = 2 + null;
        result = 2 + NaN;
        result = "123" + "456";
        result = "你好" + "小帅哥";
        // console.log(result);
        var str = "锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦";
        // console.log(str);
        result = 123 + "1";
        result = true + "hello";
        // console.log(result);
        //任何值和字符串相加都会转换为字符串,并做拼串操作
        /*
        我们可以利用这一特点,来将一个任意的数据类型转换为String
            我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
            这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
        */
        var c = 123;
        c = String(c);
        c = null;
        c = c + "";
        // console.log(typeof c);
        // console.log(c);
        c = 123;
        // console.log("c = " + c);
        result = 1 + 2 + "3";//33
        result = "1" + 2 + 3; //123
        result = 100 - 5;//95
        result = 100 - true;//99
        result = 100 - "1";//99
        result = 2 * 2;//4
        result = 2 * "8";
        result = 2 * undefined;//NaN
        result = 2 * null;//0
        result = 4 / 2;//2
        result = 3 / 2;//1.5
        // console.log("result = "+result);
        /*
        任何值做- * /运算时都会自动转换为Number
        我们可以利用这一特点做隐式的类型转换
            可以通过为一个值 -0 *1 /1来将其转换为Number
            原理和Number()函数一样,使用起来更加简单
        */
        var d = "123";
        d = d - 0;
        // console.log(typeof d);
        // console.log(d);
        result = 9 % 3;//0
        result = 9 % 4;//1
        result = 9 % 5;//4
        
        console.log("result = "+result);
    </script>
</head>
<body>

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,145评论 0 13
  • 一、Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计...
    子非鱼_t_阅读 4,179评论 1 44
  • 看完了纪录片《美国的缔造者》,简直就是大片的水准,看着很过瘾。 不得不佩服美国这些伟大的企业家,他们推动了美国...
    风起云勇阅读 1,690评论 0 1
  • 从今天开始每天强迫输出1000字。 今天看了一天的《天龙八部》,但是壹并没有看完。想想元旦三天半的雄心壮志似乎...
    简单生活M阅读 249评论 0 0
  • 今天,我要做一件非常艰巨的事,那就学自行车。 妈妈给我买了辆新自行车。我开始学着骑了,我握着...
    张九紫阅读 210评论 0 0