新手小白学习JavsScript的第一天

无敌暴暴龙（超级无敌版）

已于 2023-12-05 10:27:13 修改

阅读量849

点赞数 23

文章标签：学习 javascript 前端

于 2023-11-28 10:03:46 首次发布

本文链接：https://blog.csdn.net/weixin_52692705/article/details/134635429

版权

我是跟着黑马程序员进行学习的，如果看不懂我写的，可以直接在B站看黑马程序员，会把练习题单独放出来进行练习，进行巩固知识点。

1.书写js的位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。

内部形式——写在<body>之间

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>demo</title>
  </head>
  <body>
    <script>
      alert("这是内部形式哦");
    </script>
  </body>
</html>

外部形式——写在专门存放js的文件中，通过src路径将js文件引入html,书写的位置尽量写到文档末尾 </body> 前面

在index.js的代码如下

alert('这是外部形式哦')

在html文件的代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>demo</title>
  </head>
  <body>
    <script src="index.js"></script>
    //注意，使用外部文件引入js文件时，script标签中不能写入其他的js代码
    //<script src="index.js">
        //alert('这里是不会显示的哦')
    //</script>
  </body>
</html>

内联方式——就是写在html文件中的标签中（这里只是举个点击事件的例，后面会写alert等代码的用法）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>demo</title>
  </head>
  <body>
    <button onclick="alert('这是内联方式哦')">点击我</button>
  </body>
</html>

2.js的注释

js的注释有单行注释和多行注释

单行注释

符号：//

作用：//右边这一行的代码会被忽略

快捷键：ctrl+/

多行注释

符号：/* */

作用：在/* */之间的所有内容都会被忽略

快捷键：shift + alt + a

3.结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

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

4.JS常见的输入输出语法

——输出语法

语法1：document.write('要输出的内容')，作用是向body输出内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('要输出的内容')
         //如果输出的内容写的是标签，也会被解析成网页元素
        document.write('<h1>加了标签输出内容</h1>')
    </script>
</body>
</html>

语法2：alert（‘要输出的内容’），作用是页面弹出警告对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       alert('要输出的内容')
    </script>
</body>
</html>

语法3：console.log('要输出的内容')，作用是在控制台输出语法，程序员调试使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       console.log('要输出的内容')
    </script>
</body>
</html>

——输入语法

prompt('请输入您的姓名')，作用是显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       prompt('请输入您的名字')
    </script>
</body>
</html>

5.js代码执行顺序

按html文档流顺序执行js代码，alert（）和prompt() 会跳过页面渲染先被执行

6.字面量

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

比如：

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

'工资' 是字符串字面量

还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

7.变量

变量是计算机中用来存储数据的“ 容器 ”，它可以让计算机变得有记忆。变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。变量指的是容器而不是数据。

7.1变量的使用

变量的使用分为两步：变量的声明与变量的赋值

7.1.1 变量的声明

语法：声明关键字变量名（标识符）

声明关键字包括let,var，let 不允许多次声明一个变量。(const是声明常量，这三个都是声明关键字，只是声明的类型不同)

声明多个变量，中间用逗号隔开(为了可读性，并不推荐)

let age = 18,num = 20

7.1.2 变量的赋值

在变量名之后跟上一个“=”，然后是数值。

//声明一个变量
let age
//赋值,age是变量，18是字面量
age = 18
//输出age变量
alert(age)

再简单点，在声明的同时完成赋值操作，这种操作也被称为变量初始化

let age = 18

7.1.3 变量更新新值

直接给他一个不同的值来更新

let age = 18
age = 20
alert(age)//此时age的数值已经更新为20

7.2 变量命名规则与规范

7.2.1规则

不能使用关键字，比如If,let,var
只能使用下划线，字母，数字，$组成，且数字不能开头
字母严格区分大小写

7.2.2规范

起名要有意义
遵守小驼峰命名法，第一个单词小写，后面每个单词首字母大写，比如userName

7.3关键字的拓展

之前一直使用的是var进行声明变量，但是现在常见的还是用let声明变量。（var就是一个bug，别用了，以后统一使用let）

let——现在实际开发变量声明方式

var——以前的声明变量的方式，会有很多问题

const——类似于let，但是变量的值无法被修改

7.4数组的拓展

7.4.1数组的存储

一种将一组数据存储在单个变量名下的方式，按顺序保存，都有自己的编号，从0开始，数组可以存储任意类型的数据

let arr = [数据1，数据2，数据3，....,数据n]
//arr变量，[数据1，数据2，数据3，....,数据n]为数组字面量

7.4.2数组的取值

数组名[下标]

let names = ['小明','小红','小李','小米']
names[0]//小明
names[2]//小李

7.4.3数组的长度

数组中数据的个数，通过数组中的length属性获得

let names = ['小明','小红','小李','小米']
names[0]//小明
names[2]//小李
names.length//4

8.常量

当某个变量永远不会改变的时候，就可以使用const来声明，命名规范和变量一致。常量不允许重新赋值，声明的时候必须赋值（初始化）

//以下方法是错误的，千万不能这么写哦
const age =9.8
age = 10
console.log(age)//会报错

9.数据类型

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

9.1基本数据类型

number-数字型（包括正数，负数，小数等）
string-字符串型
boolean-布尔型
undefined-未定义型
null-空类型

9.1.1数字型

js中优先级越高越先被执行，优先级相同时从左向右执行

乘，除，取余（*，/,%）优先级相同
加，减（+，-）优先级相同
（*，/,%）> （+，-）
使用（）可以提升优先级

NaN代表是一个计算错误，他是一个不正确的或者一个未定义的数学操作所得到的结果 ,任何对NaN的操作都会返回NaN

console.log('老师'-2)  //NaN

9.2.2字符串型

通过单引号(' ')，双引号(" "),或者反引号（` `）包裹的数据都叫字符串

注意事项：单引号和双引号没有本质区别，推荐使用单引号，必要时可以使用转义字符\,输出单引号或双引号

 console.log("\'")//输出的是单引号

通过+运算符，连接字符串(作用是连接字符串与变量)，口诀：数字相加，字符相连

console.log('无敌'+'暴暴龙') //无敌暴暴龙
console.log(2+4) //6

``（反引号），在拼接变量时，用${}包住变量

const age = 18
console.log(`我的年纪刚满${age}岁~`)  //我的年纪刚满18岁~

9.3.3布尔类型

有固定的两个值，分别为true和false,表示肯定的数据用true,表示否定的数据用false

let isTrue = true
let isFalse = false
console.log(isTrue)    //true
console.log(isFalse)   //false

9.3.4未定义类型

只有一个值undefined,只声明，不赋值，变量的默认值为undefined，使用场景是在开发中声明一个变量，等待传送过来的数据，如果不知道这个数据是否传递过来，此时可以通过检测这个变量是不是undefined，就判断用户是否有数据传送过来。

let age 
document.write(age)//页面输出的是undefined

9.3.5空类型

null仅仅是代表一个“无”，“空”或“值未知”的特殊值（使用场景，将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null）

null和undefined的区别：

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

9.2 引用数据类型

object-对象

9.3检测数据类型

通过typeof关键字检测数据类型

语法1：typeof x(常用的写法)

语法2： typeof(x)

let age = 18
console.log(typeof(age))  //number
console.log(typeof age)   //number

9.4数据类型转换

使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，此时就需要是把一种数据类型的变量转换成我们需要的数据类型

9.4.1隐式转换(转换类型不明确，靠经验才能总结)

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

规则：

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

技巧：

+号作为正号解析可以将基本数据类型转换成数字型（和number（）用法效果相同）
任何数据和字符串相加结果都是字符串
有字符串的加法 “” + 1 ，结果是 “1”
减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
null 经过数字转换之后会变为 0
undefined 经过数字转换之后会变为 NaN

 console.log(11+11)//22
 console.log("11"+11)//1111
 console.log(11-11)//0
 console.log("11"-11)//0
 console.log(1*1)//1
 console.log('1'*1)//1
 console.log(typeof '123')//string
 console.log(typeof +'123')//number，就是+号起作用，将'123'字符串转为数字型
 console.log(+'11' + 11)//22
 console.log(123+ +'123')//246
console.log(''-1)//-1
      console.log('pink'-1)//NaN
      console.log(null+1)//1
      console.log(undefined+1)//NaN
      console.log(NaN+1)//NaN