JavaScript组成与变量的基本使用

记忆深处的声音
331 阅读6分钟

JavaScript介绍

JavaScript历史：

借鉴了C语言的基本语法

借鉴了Java 语言的数据类型和内存管理

借鉴了 Scheme 语言,将函数提升到 第一等公民的地位

借鉴了 Self 语言,使用基于原型的继承机制

JavaScript:是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

​ 作用（做什么？）

​ 网页特效 (监听用户的一些行为让网页作出对应的反馈)

​ 表单验证 (针对表单数据的合法性进行判断)

​ 数据交互 (获取后台的数据, 渲染到前端)

​ 服务端编程 (node.js)

JavaScript组成

ECMAScript : 规定了js基础语法核心知识。

Web APIs :

BOM : 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

DOM : 操作文档，比如对页面元素进行移动、大小、添加删除等操

​ 注意 DOM属于BOM

JavaScript 书写位置

内联（行内式） JavaScript

代码写在标签内部 不推荐使用

1648024758529.png

分为 a标签 和 非 a标签 两种书写方式

a标签 - 书写在 href 属性上

​ a href="javascript: js代码;">点击 a

​ alert('点啥呢 什么都没有'); 这句js代码 代表在浏览器弹出一个提示框

<a href="javascript: alert('点啥呢 什么都没有');">点击</a>

非a标签 - 书写在行为属性上

​ onclick :点击行为属性

<div onclick=" alert('啥都没有')">进或</div>

内部 JavaScript —— 把代码书写在一个 script 标签内

直接写在html文件里，用script标签包住 规范：script标签写在<--body-->上面

不需要依赖任何行为 打开页面就会执行

<body>
    <!--在body底部书写script标签  直接书写需要执行的js代码就ok了 -->
    <script>
        alert('hello world')
    </script>
</body>

外部 JavaScript —— 工作常用

代码写在以.js结尾的文件里 语法：通过script标签内的src，引入到html页面中。

<body>
    <!-- 通过src 引入外部js文件 -->
    <script src="./外链式js.js"></script>
</body>

外部文件js

alert('hello wrold')
// 直接在js文件里书写需要的代码

JavaScript 结束符 ：英文分号 ;

换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行

因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符

但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求）

JavaScript 输入输出语法

输出与输入

        // 向body内输出内容
        // 如果输出内容写的是标签 也会被解析成网页元素
        // document.write('要输出的内容')
        // 控制台输出语法 程序员调式使用
          console.log('控制台打印')
        // 浏览器打开 直接弹窗
        	alert('hello world')
        // 输入
        // prompt('请输入你的银行账号密码')
        // 让写在输入的内容通过输出代码显示在页面上
        usermame = prompt('请输入你的银行账号密码')
        // usermame 就是一个盒子 里面装着用户输入的姓名
        // 三个都是可以让输入的内容显示  给prompt 定义一个变量名 让输出的代码 关联变量名完成效果
        document.write(usermame)
        alert(usermame)
        .console.log(username);
    </script>

输入语法组合

    <script>
        // 1 你叫什么名字
        username = prompt('你叫什么名字');
        //2 你家住哪里
        address = prompt('你家住哪里');
        //3 你喜欢吃什么
        foods = prompt('你喜欢吃什么');
        // 4 你喜欢自己一个听音乐吗
        music = prompt('你喜欢自己一个听音乐吗');
        //5 你喜欢运动
        sports = prompt('你喜欢运动');
        //输入一下 到网页中 console.log();
        输入一下 到网页中 
        // console.log(username);
        // console.log(address);
        // console.log(foods);
        // console.log(music);
        // console.log(sports);
        // 能不能在一行上直接输出 不要换行 ?
        //使用 一个+ 表示连接
        console.log(username + address + foods + music + sports);
    </script>

JavaScript —— 定义变量

变量是什么？

白话：变量就是一个装东西的盒子。 通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

1648172024320.png

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量的基本使用

1、掌握变量的声明方式

声明变量： 要想使用变量，首先需要创建变量（专业说法： 声明变量）

语法：let 变量名

声明变量有两部分构成：声明关键字、变量名（标识）

let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

举例：

let age;

age 即变量的名称，也叫标识符

2. 变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值

1648172240105.png

    <script>
        变量  我的姓名 创建变量
        let username; 
        变量赋值
        username = '聆听';
        变量的使用
        console.log(username);
        let hright;
        hright = '175';
        console.log(hright);
        let weight;
        weight = '133';
        console.log(weight);  
    </script>

注意：是通过变量名来获得变量里面的数据

3. 更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它

    <script>
        let color = 'aqua'; //声明变量的时候也进行赋值
            color = 'black'; //更新变量
        console.log(color);    
    </script>

注意： let 不允许多次声明一个变量。

4、可以同时声明多个变量

    <script>
        let userName = '雨曦', 
            height = 172,  
            weight = 100;
        console.log(userName, height, weight);
    </script>

2.变量案例- 交换变量的值

1.核心思路：使用一个 临时变量 用来做中间存储

步骤：

  1. 声明一个临时变量 temp
  2. 把num1的值赋值给 temp
  3. 把num2的值赋值给num1

1648216233174.png

    <script>
        // 1、让num1 和 num2交换数值 需要设置三个变量
        let num1=10,num2=20,temp;
        // 2、设置一个 空变量 存放num1de值
        temp=num1;
        // 3、设置num1=num2
        num1=num2;
        // 4、设置num2等于之前num1的值（temp）
        num2=temp;
        console.log(num1);
        console.log(num2);
        // 5、小结
        // 思路在于 要多创建一个变量 来存放临时的数据即可
    </script>

变量输出

let ：表示内存中准备一个容器 给容器取个名字 取什么都行 再写一个准备存在这个容器的数据 比如100

变量书写 —— let num = 100

​ 书写一个等号 表示把存储的内容放进容器中

​ 这里面的 = 号 是赋值的意思 指的是把一个数据给到一个变量里面保存

一个变量只能保存一个值

<body>
    <script>
        // 定义一个变量  num，赋值为100
        let num = 100
        // 在浏览器弹窗显示 num 变量的值
        alert(num)
        // 当书写第二个值的时候 会把第一个赋值丢掉 保留第二个值
        num = 200
        alert(num)
    </script>
</body>

变量命名规则与规范

能写出符合规范的变量名

名字可以随便取 但起名要有意义

第一 变量可以由数字 字母 下划线 美元符组成 并且不能以数字开头 其他内容不行

第二 变量严格区分大小写

第三 不能是关键字 也就是 JS 里面有特殊意义的单词

第四 最好使用一些有意义的单词 能直观明确的看到这个变量保存的是什么内容

以下图片是正确变量组成 和 六个不一样的变量名  跟一些关键字和一些容易分辨的名字

1648029105468.png

遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。

例：userName

    <script>
        // 如果变量单词多 用大小写区分
        let userName = '姓名'; //推荐的
        let userHeight = '100'; //推荐的
        let shoppingSuperrmarketShop = '999'; //小驼峰  首字母小写
        let ShoppingSuperrmarketShop = '888'; //大驼峰  首字母大写
    </script>

命名的规范示例：

1648216588315.png

在控制台打印 num 的值

console.log(num) ：是会把内容输出在浏览器的控制台上

直接在页面输出 num 的值

document.write(num) ： 会把内容直接输出在页面上

结合上面的一些语法做个输入输出的小案例

// 需求：让用户输入自己的名字、年龄、性别，再输出到网页
// 分析：
// ①：弹出 输入 框（prompt）： 请输入您的姓名：用变量保存起来。
// ②：弹出输入框（prompt） ： 请输入您的年龄：    用变量保存起来。
// ③：弹出输入框（prompt） ： 请输入您的性别：    用变量保存起来。
// ④：页面分别 输出 (document.write) 刚才的 3 个变量。

        let nome = prompt('请输入您的姓名');
            age = prompt('请输入您的年龄');
            gender = prompt('请输入您的性别');
            document.write(nome,age,gender);
    </script>
avatar
文章
阅读
粉丝