JavaScript学习第一周

学习Javascript的第一周，这也是我第一次写博客，请多关照。

 

一、使用

       学习任何一门语言，都必须要知道如何去使用。Javascript无法单独呈现它的效果，需要配合HTML来使用。

　　在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。script标签可以放在head标签和body标签之中。此外，js代码可以写在外部文件中，如果要使用外部脚本，需要给script标签添加src属性：

　　<script src="外部脚本文件名.js"></script>

 

二、输出

　　大家学编程语言是，第一个程序应该都是输出"Hello world"，于是为大家引入了输出的概念，所以让我们来输出"Hello world"吧。

　　首先我们需要了解该怎么输出，js提供了三个输出方式：

  1. console.log()这种输出方式会将数据输出到控制台，如果要观察输出结果，需要在浏览器打开开发人员工具。

  2. document.write()这种输出方式会将数据直接输出到页面上。 

  3. alert()这种输出方式会将数据以弹窗的形式显示。

 

三、变量

　　变量是一个标记。程序没有运行的时候，这个标记中可以存在一个数据,程序运行起来之后，这个标记中存储的数据可以变化。

　　变量的声明用var和let，声明格式如下：

　　　　var/let  变量名 = 变量值;

　　虽然这是最标准的代码的写法，不过在js中你还可以不写var或者let而直接声明一个变量并赋值给他，但并不推荐这种写法：

　　　　变量名 = 变量值;

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        d = 5;
        console.log(d);
    </script>
</head>
<body>
</body>
</html>

　　

 

四、数据类型

　　在提到变量时，我们在声明变量时并不像C++或Java一样指定变量的数据类型，原因在于js是一门弱类型的语言，也就是说js的变量类型由变量被赋予的值决定的。我们可以用typeof来判定条数据的数据类型：

let d = 5;
console.log(typeof d);
d = "5";
console.log(typeof d);

　　

 

 　　当然js还是有着数据类型，但相比其他语言要少得多：

　　　　number：数字类型；

　　　　string：字符串类型；

　　　　boolean：布尔类型（true，false)；

　　　　undefined:未定义类型（当变量被声明但没有被赋值）；

　　　　null：空类型；

　　　　object：对象类型；

　　　　function：函数类型；

 　　使用typeof可以判定数据类型，但是typeof会将null识别为对象类型：

        // number
        let d = 5;
        console.log(typeof d);
        // string
        let s = 'string';
        console.log(typeof s);
        // boolean
        let b = true;
        console.log(typeof b);
        // undefined
        let u;
        console.log(typeof u);
        // Object null
        let obj1 = null;
        console.log(typeof obj1);
        // Object 自定义
        let obj2 = {name:"obj",age:18};
        console.log(typeof obj2);
        // function
        function func() {};
        console.log(typeof func);

 

 

五、运算符

　　计算机编程语言的核心在于计算，说到计算必然离不开运算符。

　　运算符的种类有4种：

  1. 算术运算符：包括了基本的+，-，*，/ ；还包括了%(求余数)，++(自己加1)，--(自己减1)。 
            console.log(4 % 2);
        console.log(4 % 3);

        let a = 1;
        let b = 1;
        a++;
        b--;
        console.log(a);
        console.log(b);

  2. 赋值运算符：与数学算式不同，编程语言都是从右往左赋值，也就是说将等号右边的值赋给等号左边的变量；赋值运算符包括了普通的 = ；还包括+=(加等于)，-=(减等于)，*=(乘等于)，/=(除等于)。 
            let a=1;
        a+=1;
        console.log(a);
        a-=1;
        console.log(a);
        a*=5;
        console.log(a);
        a/=10;
        console.log(a);
  3. 比较运算符：比较运算符用于判断两个值的关系，比较运算符包括了==(值相等)，===(值与类型相等)，!=(值不相等)，<，>，<=，>=；比较运算符根据两边的值是否符合运算符所代表的关系，来返回一个布尔类型的值。 
            console.log(1=="1");
        console.log(1==="1");
        console.log(1<2);
        console.log(1<=2);
        console.log(1!=1);

  4. 逻辑运算符：逻辑运算符包括&&(且)，||(或)，!(非)；类似于口头上说的并且，或者，不是，他们往往跟随着结果为布尔值的表达式，&&在两端各有一个表达式，当两端的表达式都为真时，整个表达式才为真，否则为假；||则是两端表达式都为假，整个表达式才为假，否则为真；而!则是返回其后的表达式相反的值。 
            console.log(1 == 1 && 1 < 2);
        console.log(1 != 1 && 1 < 2);

        console.log(1 != 1 || 1 > 2);
        console.log(1 != 1 || 1 < 2);

        console.log(!(1 != 1));
        console.log(!(1 == 1));

六、流程控制

　　1、选择结构

　　　　JS的程序是按照代码从上到下顺序执行的，当我们希望一些代码在特定情况下才执行，就到了选择结构的出场时刻了。选择结构的代码总的来说分两种：

　　　　(1) if结构

　　　　　　基本的if结构语法如下：

if (条件表达式) {
    语句;
}

　　　　　　当条件表达式的结构为真，就执行代码，否则不执行。

　　　　　　这是最基本if结构，在此基础上，我们还可以添加else来让表达式为假时，执行另外一些代码，语法如下：

        if (条件表达式) {
            语句1;
        }
        else{
            语句2;
        }

　　　　　　当然我们希望程序做出的选择不只是一两个所以我们又有了else-if结构，语法如下：

        if (条件表达式1) {
            语句1;
        }
        else if (条件表达式2) {
            语句2;
        }
        else{
            语句3;
        }

　　　　(2)switch结构

　　　　　　switch是另外一种选择结构语法，其语法如下：

        switch (表达式) {
            case 常量1:
                语句1;
                break;
            case 常量2:
                语句2;
                break;
            ...
            default:
                语句n;
                break;
        }

　　　　　　当表达式的值全等于某个case的常量时，则执行这个case的语句，当所有case的常量都不等于这个表达式的值时，则执行default的语句。

　　　　　　要注意的是每一个case的最后都要加上break，如果没有break，那么程序将会执行下一个case的语句，直到遇见break或者switch结构的结束。

　　2、循环结构

　　　　在编写程序时，我们经常希望一些代码能够反复地去执行，但是同样的代码写的太多次，对后期维护不友好，程序所占的存储空间也大，所以我们需要利用循环结构来反复调用一些代码，来减少重复代 码。

　　　　(1)for循环结构

　　　　　　for循环常常用于次数确定的循环，他的语法如下：

for (语句1; 语句2; 语句3) {
    循环体;
}

　　　　　　语句1在循环开始前执行，并且只执行一次；语句2是对是否循环进行判断，当语句2的值为真则执行循环体；语句3在每次循环结束后执行。

　　　　　　通常我们会用语句1来定义一个变量，然后让语句3来使这个变量的值发生改变，当这个值超出某个范围，就使语句2的值变为假，从而结束循环，举例如下：

        for (let i = 0; i<5; i++) {
            console.log(i);
        }

　　　　　　可以看到我们定义了一个变量i，并给他赋值为0，当i的值小于5的时候就执行console.log(i)，然后让i加上1，i从0开始加1一直加到5需要循环5次，所以console.log(i)会被调用5次，直到当i的值等于　　　　　　　　　　　　　　　　 5，使i<5的结果为假，console.log(i)不再执行，循环结束。

 

 

 

 

 

 　　　　(2)while循环结构

　　　　　　while循环比for循环结构更简单，语法如下：

        while(条件表达式){
            循环体;
        }

　　　　　　当条件表达式为真就进行循环操作。while循环往往用于不确定需要循环多少次的代码上，当满足条件后使条件表达式为假，或者利用break语句来跳出循环。

　　　　(3)do-while循环结构

　　　　　　do-while循环是while循环的一个变种，语法如下：

        do{
            循环体;
        }while(条件表达式);

　　　　　　do-while循环于while循环的区别在于，while循环先对循环条件进行判定，再决定是否循环；而do-while循环则是先执行一次循环体，然后再对循环条件进行判定，也就是说do-while循环结构必定执行一次循环体。区别示例：

        while (1 != 1) {
            console.log("while");
        }

        do {
            console.log("do-while");
        } while (1 != 1);

　　　　　　

 

 　　　　　　通过这段代码，我们看到一个while循环，它的循环内容是在控制台输出”while“；一个do-while循环，它的循环内容是在控制台输出”do-while“，它们的条件是一样的，都是1!=1，这是一个结果为假的条件，while识别到这个条件为假，就不执行循环体，do-while它执行了一次循环体，在控制台输出了”do-while“，然后他啊识别了1!=1这个条件为假，没有再继续执行循环体，do-while循环结构不管条件的真假都执行了一次循环体，这就是它与while循环的区别。

posted @ 2021-11-21 21:26  还是减肥吧  阅读(30)  评论(0)    收藏  举报