• 【JavaScript系列】01_初识JS

    VSCODE当中创建HTML文件的方法

    文章目录

    一、初始JavaScript

    • JavaScript是一种运行在客户端的脚本语言（Script是脚本的意思）
    • 脚本语言：不需要编译，运行过程由js解释权（js引擎）逐行来进行解释并执行
    • 现在也可以基于Node.js技术进行服务器编程

    1、JS的作用

    • 表单动态校验（密码强度检测）（也是JS最初产生的目的）
    • 网页特效
    • 服务端开发（Node.js）
    • 桌面程序
    • App
    • 控制硬件——物联网
    • 游戏开发

    2、HTML/CSS/JS的关系

    • HTML决定网页结构和内容，相当于人的身体
    • CSS决定网页呈现给用户的模样（化妆，穿衣服）
    • JS脚本语言——编程类语言，实现业务逻辑和页面控制，相当于人的各种动作

    3、浏览器执行JS简介

    浏览器分为两部分：渲染引擎和JS引擎

    • 渲染引擎：用来解析HTML和CSS，俗称内核，比如Chrome的blink
    • JS引擎：也称JS解释器。用来读取网页当中的JS代码，对其处理后运行

    浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS语言会逐行解释执行

    4、JS的组成

    • 1、JS的语法：ECMAScript
    • 2、DOM：页面文档对象模型
    • 3、BOM：浏览器对象模型

    二、JS初体验

    1、内嵌式的JS

    • 可以将多行JS代码写到
        <script type="text/javascript">
        alert('沙漠骆驼')
    </script>

    • 1
    • 2
    • 3

    2、行内式的JS

    • 可以将单行或者少量的JS代码写在HTML标签的属性中（以on开头的属性），如：onclick
    • 注意单双引号的使用：在HTML中推荐使用 双引号，JS当中推荐使用 单引号
    • 可读性差，在HTML当中编写大量代码，不方便阅读
    • 引号易错
    • 特殊情况之下使用
    <body>
    <!-- 1.行内式的JS 直接写到元素的内部 -->
    <!-- 此时在浏览器当中点击唐伯虎，会弹出秋香姐的警示框 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

    • 1
    • 2
    • 3
    • 4
    • 5

    3、外部文件的JS

    • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件使用
    • 引用外部JS文件的script标签中间不可以写代码！
    • 适合JS代码量较大的情况
        <script src="my.js"></script>

    • 1

    在这里插入图片描述
    在这里插入图片描述

    三、JS的注释

       //1、单行注释：Ctrl+/

   /*
   2、多行注释：shift+out+A
   */

    • 1
    • 2
    • 3
    • 4
    • 5

    也可以在VSCODE当中的键盘快捷方式重新设置快捷键

    在这里插入图片描述

    四、JS的输入输出语句

    方法说明归属
    alert(msg)浏览器弹出警示框浏览器
    console.log(msg)浏览器控制台打印输出信息浏览器
    prompt(info)浏览器弹出输入框，用户可以输入浏览器

    1、prompt 输入框

        <script type="text/javascript">
    // 这是一个输入框
        prompt('请输入您的年龄');
    </script>

    • 1
    • 2
    • 3
    • 4

    效果：

    在这里插入图片描述

    2、alert 警示框

        <script type="text/javascript">
    // 这是一个输入框
        prompt('请输入您的年龄');

    //弹出警示框
        alert('计算结果是');
    
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    3、console 输出控制台

        <script type="text/javascript">
    // 这是一个输入框
        prompt('请输入您的年龄');

    //弹出警示框
        alert('计算结果是');
    
    // console 控制台输出 给程序员测试用的
    console.log('我是程序员能看到的');
    
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    五、变量

    变量：就是装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

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

    类似我们酒店的房间，一个房间就可以看成一个变量。

    在这里插入图片描述

    1、变量的使用

    如何使用变量：

    • 1、声明变量
    • 2、赋值
        //声明变量
    var age;//声明一个名称为age的变量

    • 1
    • 2
    • var是一个JS关键字，用来声明变量（Variable）。使用该关键字声明变量之后，计算机会自动为变量分配内存空间。
    • age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。
        <script>
    //1、声明变量
    var age;//声明一个名称为age的变量名
    //2、赋值
    age=21;
    //3、输出结果
    console.log(age);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    • 变量的初始化：
        var myname="wenxin";

    • 1
    • 案例：变量的使用
        <script>
        var myname="温欣";
        var address='影村';
        var age=30;
        var wage=1200;
        var email='1289@qq.com';
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(wage);
        console.log(email);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    2、弹出用户名

    要求：

    • 弹出一个输入框，提示用户输入姓名
    • 弹出一个对话框，输出用户输入的姓名
        <script>
    //1、用户输入姓名
    var myname=prompt('请输入您的姓名');
    //2、输出这个用户名
    alert(myname);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述
    在这里插入图片描述

    3、变量的语法扩展

    1、更新变量

    一个变量被重新赋值之后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

    2、同时声明多个变量

    同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

    var age=12, name='11', sex=0;

    • 1

    4、声明变量的特殊情况

    情况说明结果
    var age;只声明不赋值undefined
    console.log(age);不声明 不赋值 直接使用报错
    age=10;console.log(age);不声明 只赋值10

    5、变量的命名规范

    • 1、由字母，数字，下划线，美元符号组成
    • 2、严格区分大小写
    • 3、不能以数字开头
    • 4、不能是关键字，保留字。例如：var for while
    • 5、变量名必须有意义
    • 6、遵循驼峰命名法
  • 相关阅读:
    JS——实现数组去重的方法
    今年 A-Level 大考压分？成绩不理想怎么办？
    java: 错误: 不支持发行版本 5 java: 错误: 不支持发行版本8 java: 错误: 不支持发行版本17
    不用入耳就有好音质，南卡OE Pro 0压开放式耳机
    Linux驱动开发7---设备驱动模型的三大组件
    leetcode692：前K个高频单词
    MySql — 查询语句（DQL）简单查询操作
    迈向数字化发展新阶段，某商业银行数据存储创新方案及实践经验
    idea快捷键
    AcWing 275. 传纸条
  • 原文地址：https://blog.csdn.net/wxfighting/article/details/125461285