【JavaWeb系列】01_初识JS

温欣2030

已于 2022-07-05 10:17:19 修改

阅读量263

点赞数

分类专栏：【Javaweb】文章标签： javascript 前端开发语言

于 2022-06-30 21:38:23 首次发布

本文链接：https://blog.csdn.net/wxfighting/article/details/125461285

版权

【Javaweb】专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

2、行内式的JS

可以将单行或者少量的JS代码写在HTML标签的属性中（以on开头的属性），如：onclick
注意单双引号的使用：在HTML中推荐使用双引号，JS当中推荐使用单引号
可读性差，在HTML当中编写大量代码，不方便阅读
引号易错
特殊情况之下使用

<body>
    <!-- 1.行内式的JS 直接写到元素的内部 -->
    <!-- 此时在浏览器当中点击唐伯虎，会弹出秋香姐的警示框 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

3、外部文件的JS

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

    <script src="my.js"></script>

在这里插入图片描述

三、JS的注释

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

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

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

在这里插入图片描述

四、JS的输入输出语句

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

1、prompt 输入框

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

效果：

在这里插入图片描述

2、alert 警示框

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

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

在这里插入图片描述

3、console 输出控制台

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

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

在这里插入图片描述

五、变量

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

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

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

在这里插入图片描述

1、变量的使用

如何使用变量：

1、声明变量
2、赋值

    //声明变量
    var age;//声明一个名称为age的变量

var是一个JS关键字，用来声明变量（Variable）。使用该关键字声明变量之后，计算机会自动为变量分配内存空间。
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。

    <script>
    //1、声明变量
    var age;//声明一个名称为age的变量名
    //2、赋值
    age=21;
    //3、输出结果
    console.log(age);
    </script>

在这里插入图片描述

变量的初始化：

    var myname="wenxin";

案例：变量的使用

    <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>

在这里插入图片描述

2、弹出用户名

要求：

弹出一个输入框，提示用户输入姓名
弹出一个对话框，输出用户输入的姓名

    <script>
    //1、用户输入姓名
    var myname=prompt('请输入您的姓名');
    //2、输出这个用户名
    alert(myname);
    </script>

在这里插入图片描述

3、变量的语法扩展

1、更新变量

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

2、同时声明多个变量

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

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

4、声明变量的特殊情况

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

5、变量的命名规范

1、由字母，数字，下划线，美元符号组成
2、严格区分大小写
3、不能以数字开头
4、不能是关键字，保留字。例如：var for while
5、变量名必须有意义
6、遵循驼峰命名法

温欣2030

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaWeb系列】01_初识JS

VSCODE当中创建HTML文件的方法浏览器分为两部分：渲染引擎和JS引擎浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS语言会逐行解释执行2、行内式的JS可以将单行或者少量的JS代码写在HTML标签的属性中（以on开头的属性），如：onclick注意单双引号的使用：在HTML中推荐使用双引号，JS当中推荐使用单引号可读性差，在HTML当中编写大量代码，不方便阅读引号易错特殊情
复制链接

扫一扫