JavaScript基础-01

139 阅读5分钟

1、引入方式

1.1、内部方式

通过script标签包裹JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨,我们一起学习JavaScript!')
  </script>
</body>
</html>

1.2、外部方式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入//

demo.js
document.write('嗨,我们一起学习JavaScript!')
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注意

如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!

2、注释

通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:

2.1、单行注释

使用 // 注释单行代码

    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨,我们一起JavaScript');

2.2、多行注释

使用 /* */ 注释多行代码

    /* 这种的是多行注释的语法 */
    /*
        更常见的多行注释是这种写法
        在些可以任意换行
        多少行都可以
      */

3、输入输出语句

3.1、 输出语句

alert 页面弹出警示框
alert('你好,js')
document.write 向页面文档输入内容
document.write('今日特价')
document.write('<h4>今日特价</h4>')
console.log在控制台输出
console.log('给咱们程序员使用的')

3.2、输入语句

prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。

  <script> 
    // 1. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>

4、变量

变量是计算机中用来存储数据的“容器”,变量不是数据本身,它们仅仅是一个用于存储数值的容器。

声明变量并赋值

声明(定义)变量有两部分构成:声明关键字、变量名(标识)

// age 即变量的名称,也叫标识符
    let age
    // 赋值,将 18 这个数据存入了 age 这个“容器”中
    age = 18
变量更新

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

// 声明一个变量age并赋初始值18
let age = 18
age = 19  // 更新变量的值为19
声明多个变量

语法:多个变量中间用逗号隔开。

// 1. 一次声明多个变量的简写方式 (了解 能认出来就可以了)
// let uname = '刘诗诗', sex = '女'
变量的命名规则

规则:

  1. 只能是字母、数字、下划线、$,且不能能数字开头
  1. 字母区分大小写,如 Age 和 age 是不同的变量
  1. JavaScript 内部已占用于单词(关键字或保留字)不允许使用
  1. 尽量保证变量具有一定的语义,见字知义

规范:

  1. 起名要有意义
  1. 遵守小驼峰命名法

5、常量

常量不允许重新赋值,声明的时候必须赋值(初始化)

// 常量: 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项:
// 1. 常量里面的值是不允许修改的
// 2. 常量必须要初始化(声明常量的时候必须要赋值)

6、数据类型

基本数据类型

number 数字型
// 1. 数字型: 用于计算的, js数字类型包含: 整数、小数
let num1 = 18.88
console.log(typeof num1)  // number   typeof 关键字检测数据类型
string 字符串型
// 字符串类型: 被引号包裹的一段文字信息   单引号 双引号  反引号
let goods = '笔记本电脑'
let address = "JavaScript"
let color = `蓝色`
console.log(typeof goods)  // string
console.log(typeof address)  // string
console.log(typeof color)  // string
注意事项:
// 变量是不能加引号的,变量加了引号就不是盒子了,是一个字符串
console.log('goods')
// 字符串嵌套的问题. 不能嵌套自己, 外单内双  或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")

模版字符串

// 1. 字符串拼接
let age = 18
console.log('xx今年' + age + '岁')

// 2. 模板字符串
console.log(`xx今年${age}岁`)

// 3. 模板字符串里面的字符串可以换行
console.log(`明月几时有
把酒问青天
不知天上宫阙
今夕是何年`)

注意:反引号中间的字符串可以换行的

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 truefalse,表示肯定的数据用 true,表示否定的数据用 false

  <script> 
    let isCool = true
    isCool = false 
    document.write(typeof isCool) // 结果为 boolean
  </script>
undefined

未定义是比较特殊的类型,只有一个值 undefined,只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。

  <script> 
    // 只声明了变量,并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
null

可以通过将变量的值设置为 null 来清空变量。

let person={  
firstname : "John",  
lastname  : "Doe",  
id        :  5566  
};
person = null

引用数据类型

object
function
array
正则(RegExp)
日期(Date)

7、运算符

7.1、算数运算符

运算符作用
+求和
-求差
*求积
/求商
%取模(取余数),开发中经常用于作为某个数字是否被整除

注意:在计算失败时,显示的结果是 NaN (not a number)

7.2、赋值运算符

对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个变量

运算符作用
+=加法赋值
-=减法赋值
*=乘法赋值
/=除法赋值
%=取余赋值

7.3、自增、自检

符号作用说明
++自增变量自身的值加1,例如: x++
--自减变量自身的值减1,例如: x--
// ++在前和++在后的区别。 如果单独使用,没有区别,如果参与了运算就有区别
// ++在前  前缀式 : 先对变量值+1, 然后拿着变量值做运算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4 

//  ++在后 后缀式 : 先拿着变量值运算,再对变量值+1 
let x = 3
let y = x++
console.log(y) // 3
console.log(x) // 4

注意:
只有变量能够使用自增和自减运算符
++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x

7.4、比较运算符

用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)

运算符作用
左边是否大于右边
<左边是否小于右边
>=左边是否大于或等于右边
<=左边是否小于或等于右边
===左右两边是否类型都相等(重点)
==左右两边是否相等
!=左右值不相等
!==左右两边是否不全等

7.5、逻辑运算符

使用场景:可以把多个布尔值放到一起运算,最终返回一个布尔值 && 逻辑与 符号两边有一个假的结果为假 || 逻辑或 符号两边有一个真的结果为真 ! 逻辑非 true变false false变true

7.6、运算符优先级

()
++ -- !
先 * / % 后 + -
> >= < <=
先 && 后 ||
=

总结

本文记录了JavaScript的基础使用。

小猫力量.png