JavaScript入门

最新推荐文章于 2022-06-21 20:19:36 发布

辛德瑞拉和Thomas

最新推荐文章于 2022-06-21 20:19:36 发布

阅读量94

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49905445/article/details/117357812

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript入门

01 JavaScript简介（了解）

1.1 什么是Javascript？

javascript是一种编程语言
在浏览器上运行

1.2 学习Javascript的意义

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系
- HTML：确定网页的结构
- CSS：确定网页的样式
- JavaScript：确定网页的行为(交互)
  - 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
1.3 JavaScript语言的组成
- ECMAScript - JavaScript的核心
  - ECMAScript定义了JavaScript的语言规范
  - JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
- DOM - 文档对象模型(WebAPI)
  - 一套操作页面元素的API（别人提供好的一套方法）
  - DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
- BOM - 浏览器对象模型(WebAPI)
  - 一套操作浏览器功能的API
  - 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.4 JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.外联样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>
2.内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('hello')">按钮</button>

1.5 JS中有哪些输出方式?

打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给自己调试看的
console.log("");

//弹出一个输入框，可以用来输入数据
prompt("");

// 以警告框的方式输出,中断后面代码的执行
alert(); 

//弹出一个确认框，默认会有确定和取消按钮用于提示用户再次确认
confirm("");

//可以给body加内容
//用的非常少，因为可能会把body原来的内容替换掉
document.write("");

02 变量

2.1 变量声明/赋值/取值

1.实际开发因为数据是动态变化，不可能写死数据，因此需要使用变量来进行保存
2.变量（variable）：内存中用来保存数据的一块空间
3.变量作用：在内存中存储数据
4.语法:
- 1.声明变量:let 变量名
- 2.赋值：变量名 = 值
- 3.取值：直接写变量名即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /* 
        1.变量(variable)作用 ： 在内存中 存储数据

        2.变量补充说明
            a. 变量初始化
                语法： let 变量名 = 值;
            b. 变量重复声明
                语法 : let 变量名 = 值;
                特点 : 覆盖已经存在的变量
            c. 变量重新赋值
                语法 : 变量名 = 值;
                特点 : 先销毁旧值，然后存入新值
            d. 变量的值是另一个变量
                语法 : 变量名a = 变量名b
                特点 : 将变量b中的数据， 拷贝一份赋值给a

    */


    //1.变量的初始化：在声明的时候赋值
    let num = 10;//相当于(1)  let num;   (2)num = 10   这两行代码简写形式
    //let 关键字的作用就是内存开辟一块空间，这个空间的名字叫做a

    //2.变量的批量声明：同时声明多个变量
    let a,b,c;

    //3.批量声明的时候也可以赋值
    let num1 = 10,num2 = 20,num3 = 30;

    //4.变量的重复赋值：修改变量里面存储的数据
    num = 99;
    console.log ( num );//99

    //5.变量的值是另一个变量的值
    let n1 = 20;
    let n2 = n1;//将n1的值拷贝一份赋值n2
    console.log (  n2 );//20
    console.log ( n1 );//20

    //注意：这行代码的意思是将字符串'n1'赋值给变量n2，而不是变量n1的值
    //n2 = 'n1';
    //console.log ( n2 );//n1
    
    //6.var也可以声明变量，与let使用方法一样
    var n3 = 3;
    
    //7.let和var的区别：let同名变量只能声明一次，var可以声明多次（干掉原来的）
    let n4 = 4;
    //let n4 = 40;		// 错误：已经定义过，不能再定义
    var n5 = 5;
    var n5 = 50;		// 没问题：第二个n5会重新开辟内存，第一个n5被干掉（浪费内存）

    // 总结：实际开发的时候，我们都是使用let开发，很少使用var了
</script>
</body>

</html>

2.2 变量命名规则与规范

规则：规则是由语法决定的，无法更改。必须要遵守，否则会报错
- 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
- 2.不能以JS的关键字作为变量名
  - 尽量不要使用关键字和保留字作为变量名，也不需要死记硬背，孰能生巧
  - 关键字：JS内置的一些关键字，代表着特殊的语法含义，不允许程序员擅自声明
  - 保留字：有可能在将来会成为关键字，现在可以用，但是并不能保证以后一直可以用
规范：规范是程序员的一种编码习惯，主要目的就是为了提高代码的易读性
- 1.起名要有意义，最好用名词作为变量名
- 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果有其他单词则每一个单词的首字母大写

03 数据类型与直接量

1.1-数据类型与直接量介绍

1.在js中，只有符合数据类型的数据才能被识别
2.数据类型：软件在运行时，会产生数据，数据有很多种，不同的数据CPU的处理方式不同
所以需要对数据进行分类，不同的数据对应不同的类型
3.直接量（字面量）：只要是符合数据类型的数据都叫做直接量
- 顾名思义：让你从字面上理解这个数据
4.如果某行js代码报错，原因只有两个
- 第一：语法错误
- 第二：数据不识别

1.2-基本数据类型

String类型

String：字符串
- 例如："张三",'abc'
- 范围：一切用双引号或者单引号包围起来的内容都是字符串
  - 作用：展示文本内容

Number类型

Number：数字
- 例如： 10 0.1
- 范围：数学中的一切数字，包含整数和小数
  - 作用：用于数学计算

Boolean类型

boolean：布尔类型
- 只有两个值：true、false
  - 作用：表示现实世界中事物的两种对立面真假、长短、开关、男女等
    - true表示真
    - false表示假

Undefined类型

undefined：变量只有声明，没有赋值
- null是一种空对象，只是目前没有具体内容

null类型

null：变量赋值为null
- 作用：不确定未来是什么数据类型

1.3- typeof关键字

作用：检测一个数据所属的类型
语法：typeof 数据 或者 typeof (数据)
- 会得到改属性所属类型的字符串: string number boolean

console.log(typeof 123);	// "number"
console.log(typeof '123');	// "string"
console.log(typeof true);	// "boolean"
console.log(typeof null);	// "object"：一类特殊对象
console.log(typeof undefined);	// "undefined"

04 运算符与表达式

1.运算符只是一种运算的符号，单独使用无意义，通常与需要计算的数据在一起组成表达式
2.表达式一定有结果，要么直接打印要么存入变量中

4.1 js中+号的作用

1. 字符串连接符：连接字符串
条件： +号两边只要有一边是string类型
1. 算术加法
条件 : +号两边都是number类型

4.2 算术运算符与算术表达式

运算符只是一种运算的符号，由运算符参与的式子称之为表达式
表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存

算术运算符：数学中的算术运算
+：加法
-：减法
*：乘法
/：除法
%：求余（求模运算）
运算符只是一种运算的符号，由运算符参与的式子称之为表达式
算术表达式（运算式）：由算术运算符组成的式子例如：数字1 + 数字2
表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存
算术运算符的优先级与小学数学学的一致：小括号>乘除模>加减

4.3 复合算术运算符：简化算术运算的代码

   +=: 在自身值的基础上再加多
     
   -=：在自身值的基础上减多

    *=: 在自身值的基础上乘多

    /=: 在自身值的基础上除多
    
    %=：在自身值的基础上模多少

4.4 自增/自减运算符

1.自增/自减都称之为自操作运算
- ++：自增，自己+1
- –：自减，自己-1
2.自操作运算都是一元表达式，即只有一个变量参与运算
3.自操作运算不能用于直接量

4.5 Math高级数学计算

JS中有许多的内置对象。其中，Math对象封装了许多常用的数学函数。
- MDN官网：<https://developer.mozilla.org/zh-CN/

Math作用：高级数学计算
常用
a. Math.ceil(数字) ：向上取整
b. Math.floor(数字) ：向下取整
c. Math.max(数字1,数字2,…) ：求最大值
d. Math.min(数字1,数字2,…) ：求最小值
e. Math.random() ：返回 (0,1) 之间的小数

 	//1.圆周率
    let pi = Math.PI;
    console.log ( pi );						//3.1415926.....
    //2.绝对值:一个数字与坐标原点的距离
    console.log ( Math.abs ( - 2 ) )		//2
    //3.天花板函数：向上取整
    console.log ( Math.ceil ( 10 ) );		//整数得到自身
    console.log ( Math.ceil ( 10.1 ) );		//11,小数则向上取整
    console.log ( Math.ceil ( -10.1 ) );	//-10
    //4.地板函数: 向下取整
    console.log ( Math.floor( 8 ) );		//8 整数得到自身
    console.log ( Math.floor ( 7.9 ) );		//7,小数则向下取整
    console.log ( Math.floor ( -7.9 ) );	//-8
    //5.四舍五入取整
    console.log ( Math.round ( 4.5 ) )		//5
    console.log ( Math.round ( 3.3 ) )		//3
    console.log ( Math.round ( - 9.9 ) )	//-10
    //6.求最大值。  数值数量不限使用逗号分割
    console.log ( Math.max ( 50, 99, 888, 123 ) )	//888
    //7.求最小值。  数值数量不限使用逗号分割
    console.log ( Math.min ( 50, 99, 888, 123 ) )	//50
    //8.生成一个随机数  范围 0 - 1 之间的小数
    console.log ( Math.random () );
    //如果想得到0-100之间的整数  可以乘以一百然后向下取整即可
    console.log ( Math.floor ( Math.random () * 100 ) );
    //9.幂运算 Math.pow(x,y)  返回x的y次幂
    console.log ( Math.pow ( 2, 8 ) );				//256    2的八次方