JavaScript基本语法

最新推荐文章于 2024-05-20 15:17:08 发布

cxz_dong

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量48

点赞数

分类专栏： html 文章标签： javascript html

本文链接：https://blog.csdn.net/cxz_dong/article/details/110874539

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript

介绍

JavaScript是一门作用在浏览器端的基于对象和事件驱动的高级的脚本语言，JavaScript主要解决了前端和用户交互的问题，包括使用交互，数据交互，当前学习的目的是为了给前端页面做功能。

HTML 负责页面内容

CSS 负责页面内容的样式

JS 负责页面内容的功能

使用环境

JavaScript和python的一个很大的区别就是JavaScript需要浏览器解释执行，是一种客户端的脚本语言，通常被嵌入到HTML当中使用。

js需要浏览器解释执行,所以不需要安装和配置环境变量的步骤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        alert("Hello World")
    </script>
</body>
</html>

JS和CSS一样可以有三种方法对HTML进行修饰：

行内式

在html标签当中，通过事件属性进行触发

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div onclick="alert('hello world')">
            这是一个div
        </div>
    </body>
</html>

内嵌式

在HTML当中，使用script标签，在标签内部编写JS内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        alert("Hello World")
    </script>
</body>
</html>

script放在HTML的任何位置都可以，但是，通常一个完整的页面在顶部加载CSS,而JS通常在页面的底部进行加载也编写。

外链式

就是使用script标签的src属性指定外部的JS文件修饰HTML标签，script标签一旦有了src属性，就不可以在标签之间再次编写JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="JS/js_base.js"></script>
    <script>

    </script>
</body>
</html>

基本语法

注释

单行 //

多行 /**/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // JS的注释
        /*
        * 作者：老舍
        * 脚本功能：测试。
        * */
     
    </script>
</body>
</html>

JS的代码以分号结束，不需要和python一样严谨缩进。

输出

document.write 是将内容写在页面上，可以编写HTML格式的内容。

alert是将内容作为弹窗内容展示出来，直接。

console.log 是将内容输出到浏览器的调试面板（控制台）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        document.write("document.write: hello world");
        alert("alert: hello world");
        console.log("console.log: hello world")
    </script>
</body>
</html>

变量

JS 和 python一样，都是弱变量语言，变量即用即生成，变量的类型由值决定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var number = 1;

        var number = hello = 1;
        console.log(number);
        console.log(hello);

        var number = 1,hello = 2;
        console.log(number);
        console.log(hello);
    </script>
</body>
</html>

1、变量的内容必须是数字，字母，下划线，$

2、首字母不可以是数字

3、严格区分大小写

4、变量命名，见名知意，（大小驼峰命名规则）

5、不能使用关键字

数据类型

认识数据类型

number（数字）

boolean (布尔)

string （字符串）

object （对象）

null （null类型）

undifined （未定义）

返回数据类型

typeof() 返回值的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <script>
        // 数据类型
        console.log(1);
        console.log(1.1);
        console.log(false);
        console.log("1234");
        console.log(null);
        console.log(undefined);
        console.log("+++++++++++++++++++++++++++++++++++++++++");
        // typeof
        console.log(typeof(1));
        console.log(typeof(1.1));
        console.log(typeof(false));
        console.log(typeof("1234"));
        console.log(typeof(null));
        console.log(typeof(undefined));
    </script>
</body>
</html>

数据类型的转换

运算转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(1+1.0); // 2
        console.log(1+"a"); // 1a
        console.log(1+false); // 1
        console.log("a"+false); // afalse
    </script>
</body>
</html>

方法转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //转字符串
        // var number = 1;
        // console.log(typeof(String(number))); // string
        // console.log(typeof(number.toString())); // string
        // var boolean = false;
        // console.log(typeof(String(boolean))); // string
        // console.log(typeof(boolean.toString())); // string
        //转数字
        // var string = "123";
        // console.log(typeof(Number(string))); // number
        // console.log(typeof(parseInt(string))); // number
        // console.log(typeof(parseFloat(string))); // number
        // console.log(parseFloat(string)); // number
        //转布尔
        var string = "";
        console.log(typeof(Boolean(string))); // boolean
        console.log(Boolean(string)); // false
    </script>
</body>
</html>

运算

比较运算

运算符	描述
>
<
>=
<=
!=
==
===
!==
in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log(2 > 1);
        console.log(2 < 1);
        console.log(2 >= 1);
        console.log(2 <= 1);
        console.log(1.0 == 1);
        console.log(1.0 != 1);
        console.log(1.0 === 1);
        console.log(1.0 !== 1);
        console.log(true == 1);
        console.log(true === 1);
    </script>
</body>
</html>

逻辑运算

或（or）||

且 (and) &&

非 (not) !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //and &&
        // console.log(true && true);
        // console.log(true && false);
        // console.log(false && true);
        // console.log(false && false);
        //or ||
        // console.log(true || true);
        // console.log(true || false);
        // console.log(false || true);
        // console.log(false || false);
        // not ！
        console.log(!true);
        console.log(!false);
    </script>
</body>
</html>

js逻辑运算的优先级和python:

not > and > or

算术运算

运算符	描述
+	加
-	减
*	乘
/	除
++	自增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 数学运算
        console.log(1+2);
        console.log(4-2);
        console.log(3*2);
        console.log(4/2);

        console.log(3/2);
        console.log(parseInt(3/2));


        //自增
        var a = 1;
        a += 1;
        a++;
        ++a;
        console.log(a)
    </script>
</body>
</html>

三目运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 三目运算
        var number = 5>6?3:2;
        // number是一个变量
        // 等于号后面是一个条件
        // 问号后面的是结果，结果以冒号分隔，
        // 如果前面的条件成立，结果为冒号前面的值
        // 如果前面的条件不成立，结果为冒号后面的值
        console.log(number)
    </script>
</body>
</html>

流程控制

在js当中，流程控制在形式上和python有区别

流程控制语句

判断

if判断

js当中if判断的关键词有：

else if

else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //if 判断
        var number = 3.141592653;
        if(number > 2){
            console.log("这个数比2大！")
        }else if(number > 3){
            console.log("这个数比3大！")
        }else {
            console.log("holle world")
        }
    </script>
</body>
</html>

if判断需要有以下注意点：

1、if判断分为两种，第一种是一个判断，多个分支，另外一种是多个判断，每个判断单个分支。

第一种一个判断，多个分支，每次只会一个分支，当前面分支执行成功，后面分支不在执行。

第二种多个分支，另外一种是多个判断，每个判断单个分支，每个判断都会被执行。

2、判断必须把范围小的条件优先编写判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    
        //if判断分为两种，第一种是一个判断，多个分支，另外一种是多个判断，每个判断单个分支。
        var number = 3.141592653;
        if(number > 2){
            console.log("这个数比2大！")
        }
        if(number > 3){
            console.log("这个数比3大！")
        }else {
            console.log("Holle ")
        }
        //判断必须把范围小的条件优先编写判断
        var number = 3.141592653;
        if(number > 3){
            console.log("这个数比3大！")
        }else if(number > 2){
            console.log("这个数比2大！")
        }else {
            console.log("world！")
        }
    </script>
</body>
</html>

js还有一种特殊的判断语句，switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var a = 3; // 声明变量值为3
        switch (a){ // 声明判断的条件是 a
            case 1: // 如果a = 1执行
                console.log("1");
                break;
            case 2: // 如果 a = 2执行
                console.log("2");
                break;
            case 3:// 如果 a = 3执行
                console.log("3");
                break;
            case 4:// 如果 a = 4执行
                console.log("4");
                break;
            case 5:// 如果 a = 5执行
                console.log("5");
                break;
            case 6:// 如果 a = 6执行
                console.log("6");
                break;
        }
    </script>
</body>
</html>

switch必须结合break进行使用，如果没有break，成立之后的所有条件都会执行。

并且循环条件必须以小括号包围，循环体必须以大括号包围。

cxz_dong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基本语法

JavaScript介绍JavaScript是一门作用在浏览器端的基于对象和事件驱动的高级的脚本语言，JavaScript主要解决了前端和用户交互的问题，包括使用交互，数据交互，当前学习的目的是为了给前端页面做功能。HTML 负责页面内容CSS 负责页面内容的样式JS 负责页面内容的功能使用环境JavaScript和python的一个很大的区别就是JavaScript需要浏览器解释执行，是一种客户端的脚本语言，通常被嵌入到HTML当中使用。js需要浏览器解释执行,所以不需要安装和配置环境变量
复制链接

扫一扫