JavaScript基础语法(VS Code)

sleep22

已于 2022-04-02 10:26:37 修改

阅读量1.5k

点赞数 2

分类专栏：前端学习笔记文章标签： javascript vscode visual studio code

于 2022-03-31 21:05:12 首次发布

本文链接：https://blog.csdn.net/weixin_60096751/article/details/123881354

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js语言归为脚本语言，会逐行解释执行。

浏览器执行JS：

渲染引擎：用来解析HTML与CSS,俗称内核

JS引擎：JS解释器，用来读取网页中的JavaScript代码，对其处理后运行

JavaScript组成

JavaScript 由ECMAScript（JavaScript语法）、DOM（页面文档对象模型）和BOM（浏览器对象模型）三部分组成。

VS Code下载

VS Code下载地址：Download Visual Studio Code - Mac, Linux, Windows

新建文件夹，新建.html.文件 ！+tab键 自动补全html目录

JS的三种书写位置：行内、内嵌和外部。

行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <!--1.行内式的js 直接写到元素内部-->
    <input type="button" value="aabb" onclick="alert('amm')">

</body>
</html>

内嵌式（学习时常用的方式；可将多行JS代码写到script标签中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--2.内嵌式的js-->
    <script>
      //  alert('bmm');
    </script>
</head>
<body>
   
</body>
</html>

外部新建一个.js文件，在文件中写入（引用外部JS文件的script标签中间不可以写代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--3.外部js script双标签-->
<script src="my.js"></script>
</head>
<body>

</body>
</html>

手动修改快捷键：单击左下角设置找到键盘快捷方式打开

常用的输入输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
       //输入框
       prompt('请输入:');
       //alert弹出警示框 输出的结果
       alert('结果为：');
       //控制台输出，程序员测试用
       console.log('后台显示');
   </script>

</head>
<body>

    
</body>
</html>

查看console内容 F12键入

找到console

变量

本质：变量是程序在内存中申请的一块用来存放数据的空间

    <script>
        //1.声明一个age 的变量
        var age;
        //2.赋值
        age = 10;
        //3.输出结果
        console .log(age);
        //4.变量的初始化
        var myname ='student';
        console .log(myname);
    </script>   
</head>

数据类型

变量的数据类型是由JS引擎根据赋值后变量值的数据类型来判断的

JS是动态语言，变量的数据类型是可以变化的

数字型Number范围最大和最小值

alert(Number.MAX_VALUE);

alert(Number.MIN_VALUE);

isNaN() 方法用来判断非数字，是数字就返回false

String 字符串型推荐使用 ' ' 单引号

 <script>
     var name = prompt('请输入用户名');
     var str = '您的昵称为'+name+'.';
     alert(str);  

    </script>
</head>

undefined 与数字相加最后结果为 NaN

null 与数字相加最后结果为该数字

typeof 获取变量数据类型

sleep22

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础语法(VS Code)

JavaScript基础语法入门，含测试源码
复制链接

扫一扫

专栏目录