JS学习笔记Day-1：变量

leiteorz
56 阅读4分钟

1. JavaScript介绍

冲冲冲，一天不学习浑身难受

1.1 JavaScript是什么

  • JavaScript：是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
  • 作用：
    • 网页特效
    • 表单验证
    • 数据交互
    • 服务端编程（node.js）
  • JavaScript的组成
    • ECMAScript（JavaScript语言基础）
    • Web APIs：Dom、Bom

1.2 JavaScript书写位置

  • 目标：知道如何向页面添加JavaScript
  1. 内部Js

通常js代码放在最底部

<body>
  <button>按钮1</button>
  <!-- 内部js -->
  <script>
    alert('你好, js')
  </script>
</body>
  1. 外部Js

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

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

image.png

  1. 内联Js

代码写在标签内部

<body>
  <button onclick="alert('内联js')">按钮1</button>
</body>

1.3 输入和输出语法

  • 输出语法
  1. 语法1： document.write('要输出的内容')

作用：向body内输出内容

注意：如果输出的内容是标签，也会被解析成网页元素

<body>
  <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题1</h1>')
  </script>
</body>
  1. 语法2： alert('要输出的内容')

作用：页面弹出警告对话框

  1. 语法3： console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

  • 输入语法

语法： prompt('请输入:')

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

image.png

  • JavaScript代码执行顺序

按HTML文档流顺序执行JavaScript代码

alert()和prompt()它们会跳过页面渲染先被执行

1.4 字面量

在计算机科学中，字面量（literal）是在计算机中描述 事/物

比如：

我们工资是：1000 此时1000就是数字字面量

'你好' 字符串字面量

还有[]数组字面量 {}对象字面量 等等

2. 变量

2.1 变量是什么

  • 变量是计算机中用来存储数据的”容器“，它可以让计算机变得有记忆

2.2 变量基本使用

  • 声明变量

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法： let 变量名

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

let即关键字，所谓关键字是系统提供的专门用来声明变量的词语

  • 变量赋值
<body>
  <script>
    let age = 18
    console.log(age)
  </script>
</body>
  • 更新变量

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

<body>
    <script>
        let age = 18
        age = 19
        console.log(age)
    </script>
</body>
  • 声明多个变量
<body>
    <script>
        let age = 18, uname = 'leiteorz'
    </script>
</body>

2.3 变量的本质

内存：计算机中存储数据的地方，相当于一个空间

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

2.4 变量命名规则和规范

  • 规则
  1. 不能用关键字
  2. 只能用下划线、字母、数字、$组成，且数字不能开头
  3. 字母严格区分大小写，如Age和age是不同的变量
  • 规范
  1. 起名要有意义
  2. 遵守小驼峰命名法，如：userName

2.5 扩展：let和var的区别

在旧的JavaScript中，使用关键字var来声明变量，而不是let

var现在开发中一般不再使用它，只是我们可能在老版程序中看到它

let为了解决var的一些问题

var声明：

  • 可以先使用再声明（不合理）
  • var声明过的变量可以重复声明（不合理）
  • 比如变量提升、全局变量、没有块级作用域等等

2.6 扩展：数组

  • 一种将 一组数据存储在单个变量名下 的优雅方式
  1. 声明语法：let 数组名 = [数据1, 数据2, ... , 数据n]
  2. 使用：数组名[下标]
  3. 长度：数组名.length

3. 常量

  • 概念：使用const声明的变量称为“常量”
  • 使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
  • 命名规范：和变量一致
  • 常量使用： const G = 9.8
  • 注意：常量不允许重新赋值，声明的时候必须赋值

4. 数据类型

  • 基本数据类型
  1. number 数字型
  2. string 字符串型
  3. boolean 布尔型
  4. undefined 未定义型
  5. null 空类型
  • 引用数据类型

object 对象

注意事项：

JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，才能确认

Java是强数据类型，例如 int a = 3 必须是整数

  • 检测数据类型

typeof 变量名 或者 typeof(变量名)

5.类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能简单的进行加法运算

5.1 隐式转换

某些运算符在被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

规则：

  • +号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的运算法 比如- * /等都会把数据转换成数字类型

缺点：

  • 转换类型不明确，靠经验才能总结

小技巧：

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串

5.2 显示转换

概念：自己写代码告诉系统应该转换成什么类型

  • 转换为数字型
let str = '123'
console.log(Number(str)) // 123
console.log(parseInt('12px')) // 12
console.log(parseFloat('abc12.94px')) // 12.94
avatar
文章
阅读
粉丝