JavaScript 初识，基础知识概括

最新推荐文章于 2022-11-23 17:32:46 发布

烈阳煮海

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量361

点赞数 2

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qq_66436524/article/details/123044576

版权

JavaScript入门知识概括

如果你看到这篇文章，说明你对 html 与 css 都有了一定的了解，那么接下来我们将探寻网页组成的第三部分， JavaScript ！！看完本文你将对 JavaScript 拥有一个大致的了解，并学习到一些基础知识，所谓打好地基，才能盖起高楼！让我们为了更高的工资更强的发型而努力吧！！

01- 了解 JavaScript

1.1 ：为什么要学习JavaScript?

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系

HTML：确定网页的结构
CSS: 确定网页的样式
JavaScript: 确定网页的行为(交互)

众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而 JavaScript 则主要负责 网页的行为（动态效果，交互事件等）。 在这里插入图片描述
例如网页中的轮播图与登录页面。

1.2 ：js的组成

在这里插入图片描述

ECMAScript - JavaScript的核心
ECMAScript定义了JavaScript的语言规范
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.3 ：js的三种书写方式

我门知道，在css中有三种书写方式，同样 j s 也有三种

** css的书写方式

1.行内样式：不推荐，因为不便于维护
<h1 style="background: bisque">哈哈哈</h1>
2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
<style>.div{background: hotpink;}</style>
3.外部样式：写在css文件中，使用link导入
<link rel="stylesheet" href="./01-css外联样式.css">

** js的三种书写方式

1.行内样式：不推荐，因为不便于维护
<button onclick="window.alert('js行内写法')">欢迎踏入前端大门</button>
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
<script >alert("这是JS内联样式")</script >
3.外部样式：写在js文件中，使用script的src属性导入
<script src="./01-JS外联写法.js"></script>

需要注意
1.行内写法 : 写在标签行内
2.内部写法 : 写在script标签内部
3.外部写法 : 写在js外部文件中,使用script标签的src属性导入
* 注意：如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。

1.4 ： js两种注释写法

1）

  //单行注释：注释内容只能是这一行

 vscode快捷键 CTRL + /

2）

 /* 多行注释：注释内容可以是多行
    第一行
    第二行* /

vscode快捷键 ALT + SHIFT + A

1.5 ：输入与输出语句

输出语句

在网页弹出一个提示框，输出数据
//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试

alert("hello world");

在控制台打印某个数据
//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的

console.log("欢迎大家加入前端大家庭");

将数据显示到网页
//输出语句3:将数据显示到网页，相当于给body添加内容

document.write("我是输出语句，你写东西会在页面中显示");

输入语句

在网页弹出一个输入框，让用户输入数据
//输入语句1：弹出一个输入框，可以用来输入数据

prompt("请输入你的期望工资");

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

confirm("你确定你要放弃年薪百万的机会吗？");

1.6 ： js代码执行原理介绍

    程序运行原理：
    1.计算机将存储在硬盘中的html文件读取到内存中
    2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
    3.CPU处理与计算
    4.CPU将我们代码在运行时产生的数据保存到内存中

我们先简单了解下，以后如果有需要，再深入了解。

02- js的数据类型

2.1 ：数据类型介绍

为什么需要有数据类型？
每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
*什么是数据类型？
js编译器在解析代码的时候,会产生各种不同的数据。而不同的数据’运算’与’存储’方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。

2.2 : 五种基本数据类型

string类型: 字符串一切以单引号’’ 双引号"" 反引号``包起来的内容
//作用 : 用于展示文本

  console.log("我是字符串") //双引号  ""
      console.log('我是字符串')//单引号 ''
      console.log(`我也是字符串`) //反引号 ``
      console.log('我是"嵌套"字符串')//嵌套字符串

number类型 : 数值一切数学中的数字。
//作用 : 用于数学计算

 console.log(123) //整数,默认正整数
      console.log(-123) //负数
      console.log(9.9) //小数
      console.log(Infinity) //特殊数值,无穷大

boolean类型 : 布尔只有两个值 : true(真) false(假)
//作用 : 用于条件判断 true:条件成立 false:条件不成立

 console.log(true)
      console.log(false)

undefined : 未定义只有一个值 undefined

  console.log( undefined )

null : 空值只有一个值 null

   console.log( null )

03 - 变量

3.1 : 认识变量

变量的作用
存储数据
变量原理
一个容器本质是内存中的一块存储数据的空间

在这里插入图片描述

3.2 ：声明变量

想要使用变量，首先我们要先创建一个变量（术语就是声明变量）
语法 let 变量名
例如：

 let age //age为变量名

3.3：变量的赋值

// : =赋值运算符（把右边的数据放入左边的变量中）

 age = 18

//变量可以在声明的时候赋值

      let age = '11'//等价于
       (1)let age  
      (2)age = '11'
      document.write( age )//得到字符串11

3.4 ：变量使用注意点

注意点1 ：变量不能重复声明，否则程序会报错
注意点2 ：变量重复赋值，会先销毁旧值，然后存入新值
注意点3 ：一个变量赋值给另一个变量，会将自己的数据拷贝一份然后赋值

3.5 ：变量命名规则与规范

规则：我们必须遵守的 ,不然就会报错
1）不能用关键字

关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

2）只能用下划线、字母、数字、$组成，且数字不能开头
3)字母严格区分大小写，如 Age 和 age 是不同的变量
规范，不遵守不会报错，但不符合业内通识
1）起名要有意义
2）遵守小驼峰命名法：
使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写
例：userName

3.6 : 常量

js中一旦被定义就无法再被修改的变量，称之为常量
常量:不能修改的值
常量的关键字是const
常量只能读取，不能修改

常量通常用大写字母定义，多个单词之间用下划线_分隔

3.7：字面量

在计算机科学中，字面量（literal）用于表示代码中的固定值(数据)
比如：
我们工资是： 1000 此时 1000 就是数字字面量
‘前端摸虾大师’ 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

概念性知识点辅助理解
字面量其实就是对计算机中的数据另一种称呼。如果字符：’302’ 数字: 302
需要注意的是，只有计算机可以识别的数据才能叫做字面量。例如：张三，这种数据计算器是无法识别的，程序会报错，因此张三不能叫做字面量

3.8数据类型的转换

类型转换的概念
一种数据类型转成别的类型， JavaScript是弱数据类型，很多情况计算的时候，需要转换数据类型
显式转换
自己写代码告诉系统转成什么类型
1） Number //数值型
字符串内容里有非数字得到NaN
2）String //字符串型
3）Boolean //布尔型
隐式转换
系统自动做转换

04 -运算符与表达式

4.1 算术运算符

介绍：有运算作用的符号
作用：用于数学算术运算 + - * / %(求模运算,相当于取余数)
表达式 : 由运算符组成的式子
算术表达式：由算术运算符组成的式子例如 1+1
重点：任何表达式,都一定会有运算结果

  //将表达式的结果存入变量
      let num = 1 + 1
      console.log(num) //2

4.2赋值运算符

介绍：将数据存入变量中
赋值运算符 = ， += , -= , *= ,/= , %=,

let num1 = 10;
num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
console.log ( num1 );//20
//-=
let num2 = 70;
num2 -= 10; //相当于  num2 = num2 - 10;
console.log(num2);//60
//*=
let num3 = 20;
num3  *=  4;  //相当于  num3 = num3 * 4;
console.log(num3);//80
// /=
let num4 = 90;
num4 /= 3;//相当于 num4 = num4 / 3
console.log(num4);//30

let num5 = 10;
num5 %= 3; // num5 = num5 % 3;
console.log(num5);//1

4.3: 关系运算符

 关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
  八种： >  >=  <  <=  ==  `!=`   `=== 全等`     `!== 不全等`
 2.关系表达式：由关系运算符组成的式子    例如:  2 > 1
  只要是表达式，就会有运算结果
 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立

    //1.基本使用
    console.log ( 5 > 3 );//true  成立
    console.log ( 100 < 1 );//false 不成立

    //2.相等与不等:只比较数据的值，不比较数据的类型
    //注意：一个 = 号表示赋值运算符  两个 == 是比较运算符，它们作用不一样，不要搞混淆了
    console.log ( 1 == 1 );//true   常用
    console.log ( "1" == 1 );//true  他们的值一样，只是数据类型不一样

    //3.全等不全等： 先比较数据的值，再比较数据的类型
    console.log ( "1" === 1 );//false  两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立

4.4:自增自减运算符

1.自增运算符 ++

  //自增表达式:   num++
    let num1 = 10;
    num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );//11

2.自减运算符 - -
自减表达式： num- -

   let num2 = 20;
    num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );//12

4.5 : 逻辑运算符

    关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
    1.逻辑运算符：多个条件之间的关系
    2.逻辑运算符只有三种
        && :逻辑与 ，读作并且
        || :逻辑或，读作或者
        !  :逻辑非，读作取反
             true（真）变false（假），false（假）变true（真）
 3.逻辑表达式: 表达式1 逻辑运算符 表达式2

    //1.逻辑与&&结果： 一假为假     （左右两边同时成立，才为真，否则为假）
    //表达式1    &&  表达式2       运算结果
    //真              真             真
    //真              假             假
    //假              真             假
    //假              假             假
    console.log ( 100 > 50 && 10 > 9 );//true  左右两边同时成立
    console.log ( 100 > 500 && 10 > 9 );//false   因为左边不成立

    //你要上厕所： 要带手机 ， 要带手纸，少一个都不行



    //2.逻辑或 ||结果 : 一真则真  （左右两边同时为假，才为假，否则为真）
    //表达式1    ||  表达式2    运算结果
    //真               真         真
    //真               假         真
    //假               真         真
    //假               假         假

    console.log ( 100 > 500 || 10 > 9 );//true  只要有一边为真则为真
    console.log ( 100 > 500 || 8 > 9 );//false 只有两边都不成立才为假

    //你要上厕所： 要么带手机 ， 要么带手纸，有一个都就行
    
    //3.逻辑非！ ： 又叫做取反  真变假 假变真
    //    ！    表达式   结果
    //           假       真
    //           真       假
    let res = !false;
    console.log ( res );//true  假变真，真变假
    console.log ( ! ( 2 > 1 ) );//false     2>1的结果是true    与true相反的就是false

    //你要上厕所：没手机，没手纸，但还是上了