零基础学JavaScript第一天

一木知夏
157 阅读5分钟

1.js的引入方式

JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。简单来说就是教网页做事.和css一样js也有三种相同的引入方式,注意


<body>
  <button onclick="alert('却话巴山夜雨时')">何当共剪西窗烛</button>
  <script>

    alert('哈哈哈哈')
  </script>
  <script src="./js/1.js"></script>
</body>

行内式使用onclick,内嵌式与外部式使用script标签.外部式不允许标签中间写任何内容.

2.js的注释

使用 //注释单行代码

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

快捷键:ctrl + / 使用 /* */ 注释多行代码

快捷键:shift + alt + A (或ctrl+shift+/)

3.输入和输出语句

3.1.输出语句

将数据显示到网页(可以解析标签)

// 1. 将数据显示到网页，相当于给body添加内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')

在网页弹出一个提示框,输出数据

//2 .在网页弹出一个提示框
alert("hello world");

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

//3.控制台打印输出,给程序员看的
console.log('噫吁嚱')
3.2.输入语句

在网页弹出一个输入框,让用户输入数据

prompt('请输入您的年龄：')

在网页弹出一个确认框，让用户输入 确认/取消 二选一

confirm("你确定你已经成年了吗？");

4.变量

变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子.

变量作用:用来存放数据. 声明(定义)变量有两部分构成：声明关键字、变量名（标识)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
   // 1. 声明一个年龄变量
    let age
   //2. 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    console.log(age)
    // 3. 声明的同时直接赋值  变量的初始化
    // let age = 18
      // 小案例
    let num = 20
    let uname = '旗木卡卡西'
    console.log(num)
    console.log(uname)
  </script>
</body>
</html>

更新变量

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

// 1 声明的同时直接赋值  变量的初始化
let age = 18
age = 19
console.log(age)
//let 不允许多次声明一个变量
let age = 19

声明多个变量

多个变量中间使用逗号隔开

// 2 声明多个变量
let age = 18, uname = '日向雏田'
console.log(age, uname)
//提倡声明方式 一行声明一个变量,可读性比较好
let age = 18
let uname = '日向雏田'
console.log(age, uname)

经典案例交换变量

有2个变量： num1 里面放的是 10， num2 里面放的是20

最后变为 num1里面放的是 20 ，num2里面放的是 10

// 1 声明 num1 num2 2个变量并赋值
let num1 = 10
let num2 = 20
// 2.声明临时变量
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)
变量的命名规范

关于变量的名称（标识符）有一系列的规则需要遵守：

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

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

5.数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

数组是一种复杂数据类型

数组可以在容器中存储多个数据

数组三要素: 元素 下标 数组长度

数组声明语法:

let arr = [数据1,数据2,数据3,...,数据n]

// let arr = [10, 20, 30]
    // 1. 声明数组 
    let arr = ['刘德华', '张学友', '黎明', '郭富城', '一木知夏', 10]
    // 2. 使用数组  数组名[索引号] 从0
    // console.log(arr)
    console.log(arr[0]) // 刘德华/
    console.log(arr[4])
    // 3. 数组长度:数组名.length
	// 数组长度 =  索引号 + 1 
    console.log(arr.length)  // 6

    // let 刘德华 = 10
    // console.log(刘德华)

6.常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

// 1.常量 不允许更改值
const PI = 3.14
// PI = 3.15
// console.log(PI)
// 2. 常量声明的时候必须赋值
const PI

7.数据类型

基本数据类型:number(数字型) . string(字符串型). boolean(布尔型) . undefined(未定义型) . null(空类型)

7.1数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

// js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
let score = 100 // 正整数
let price = 12.345 // 小数
let temperature = -40 // 负数
 // java 强数据类型的语言    int num = 10
7.1.1算术运算符

数学运算符也叫算术运算符，主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)（取模）

    console.log(1 + 1)
    console.log(1 * 1)
    console.log(1 / 1)
    console.log(4 % 2) // 求余数  0
    console.log(5 % 3) // 求余数  2 
    console.log(3 % 5) // 求余数  3
7.1.2NaN

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN :not a number

//NaN   not a number 	不是一个数字
   console.log('宇智波鼬' - 2)
    console.log(NaN - 2)
    console.log(NaN + 2)
    console.log(NaN / 2)
    console.log(NaN === NaN)
7.2字符串型

字符串型

通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单 或者外单内双)
  3. 必要时可以使用转义符 ``，输出单引号或双引号
let str = '波风水门'
let str1 = "波风水门"
// 反引号
let str2 = `中文`
console.log('波风水门会'飞雷神'')// 报错
console.log('波风水门会"飞雷神"')//正确
console.log('波风水门会\'飞雷神\'')//正确

字符串拼接

+运算符 可以实现字符串的拼接。

口诀：数字相加，字符相连

console.log(1 + 2)
console.log('我叫' + 'sober')
let age = 25 
document.write('我今年' + age + '岁了')

模板字符串

模板字符串 外面用`` 里面 ${变量名}

    // let age = 20
    // document.write(`我今年${age}岁了`)
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')
    // 输出
    document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)

7.3布尔型

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

// 1. true  false 是布尔型字面量
console.log(3 > 4)
let isCool = false
console.log(isCool)

7.4未定义

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

// 2. 未定义类型   弱数据类型   声明一个变量未赋值就是 undefined
 let num
 console.log(num)

7.5空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

 // 3. null 空的
let obj = null
console.log(obj)
// 计算有区别
console.log(undefined + 1)  // NaN
console.log(null + 1) // 1

undefined与null的区别

undefined 表示没有赋值

null 表示赋值了，但是内容为空

数据类型检测

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

1.作为运算符： typeof x （常用的写法）

2.函数形式： typeof(x)

有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

	let num = 10
    console.log(typeof num)
    let str = 'pink'
    console.log(typeof str)
    let str1 = '10'
    console.log(typeof str1)
    let flag = false
    console.log(typeof flag)
    let un
    console.log(typeof (un))
    let obj = null
    console.log(typeof obj)

    let num1 = prompt('请输入第一个数：')
    console.log(typeof num1)//string

8.类型转换

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

8.1隐式转换

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

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

任何数据和字符串相加结果都是字符串

	let num = 10
    console.log(typeof num)
    let str = 'pink'
    console.log(typeof str)
    let str1 = '10'
    console.log(typeof str1)
    let flag = false
    console.log(typeof flag)
    let un
    console.log(typeof (un))
    let obj = null
    console.log(typeof obj)

    let num1 = prompt('请输入第一个数：')
    console.log(typeof num1)//string
8.2显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

8.2.1转换为数字型
	let str = '123'
	console.log(Number(str))
	console.log(Number('bozai'))//NaN
	// let num = Number(prompt('输入年薪'))
    // let num = +prompt('输入年薪')
    // console.log(Number(num))
    // console.log(num)
 	console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12.94px'))
    console.log(parseInt('abc12.94px'))

    // -------------------
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // 12.94
8.2.1转换为字符型
 	// 1. 把数字型转换为字符串型 变量.toString()
       let num = 10;
       let str = num.toString();
        console.log(str);
        console.log(typeof str);
        // 2. 我们利用 String(变量)   
        console.log(String(num));
avatar
文章
阅读
粉丝