JavaScript基础笔记

最新推荐文章于 2024-09-29 11:29:55 发布

下雪了～

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量784

点赞数 32

文章标签： javascript 笔记开发语言学习前端

本文链接：https://blog.csdn.net/2302_77250325/article/details/140418738

版权

JavaScript

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript 介绍

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中，JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

JavaScript 内置了一些对象的标准库，比如数组（Array），日期（Date），数学（Math）和一套核心语句，包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途；例如：

客户端的 JavaScript 通过提供对象，控制浏览器及其文档对象模型（DOM），来扩展语言核心。例如：客户端的拓展代码允许应用程序将元素放在某个 HTML 表单中，并且支持响应用户事件，比如鼠标点击、表单提交和页面导航。
服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。

这意味着，在浏览器中，JavaScript 可以改变网页（DOM）的外观与样式。同样地，在服务器上，Node.js 中的 JavaScript 可以对浏览器上编写的代码发出的客户端请求做出响应。

JavaScript 的使用

在HTML中，JavaScript 代码必须位于<script> 与 </script> 标签之间。

实例

<script>
    document.getElementById("demo").innerHTML = "这是我的第一段 javascript";
</script>

基础语法

书写规范

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无【推荐要么全都写，要么全都不写】。
大括号表示代码块。
注释：
- 单行注释：// 注释内容快捷键Ctrl+/
- 多行注释：/* 注释内容 */ 快捷键 Shift+Ctrl+/

我们需要借助js中3钟输出语句，来演示书写语法：

api	描述
window.alert(…)	警告框
document.write(…)	在HTML 输出内容
console.log(…)	写入浏览器控制台

接下来我们就通过VS Code，来演示一些上述的3种输出语句的书写语法

第一步：在VS Code中创建名为 02.JS-基础语法-输出语句.html的文件

第二步：按照基本语法规则，编写3种输出语句的代码，并且添加注释，具体代码如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法-输出语句</title>
</head>
<body>
	
    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

声明变量

Let

基本的书写语法我们清楚了之后，接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

JS中主要通过 let 关键字来声明变量的。
JS是一门弱类型语言，变量是可以存放不同类型的值的。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
- 变量名严格区分大小写，如：name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、if、for等

变量的声明示例如下所示：

<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。因为JS是弱类型语言。

const

在JS中，如果声明一个场景，需要使用const关键字。一旦声明，常量的值就不能改变（不可以重新赋值）。

如下所示：

<body>

    <script>
        //常量
        const PI = 3.14;
        PI = 3.15;
        alert(PI);
    </script>
</body>

注意：

在早期的JS中，声明变量还可以使用 var 关键字来声明。例如：

<body>

    <script>
         //var声明变量
		var name = "A";
		name = "B";
		alert(name);
        
         var name = "C"
         alert(name);
    </script>
</body>

打开浏览器运行之后，大家会发现，可以正常执行，第一次弹出 B，第二次弹出 C 。我们看到 name变量重复声明了，但是呢，如果使用var关键字，是没有问题的，可以重复声明。

var声明的变量呢，还有一些其他不严谨的地方，这里就不再一一列举了，所以这个声明变量的关键字，并不严谨【不推荐】。

数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：原始数据类型和引用数据类型。那这部分，我们先来学习原始数据类型，主要包含以下几种类型：

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引(‘…’)、双引号(“…”)、反引号(`…`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

第一步：在VS Code中创建名为 04.JS-基础语法-数据类型.html 的文件

第二步：编写如下代码，然后直接挨个观察数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（“…”）、单引号（‘…’）以外，还可以使用反引号（`…`）。而使用反引号引起来的字符串，也称为模板字符串。

模板字符串的使用场景：拼接字符串和变量。
模板字符串的语法：
- `…` ：反引号（英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）
- 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

  <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

运算符

那接下来，我们再来介绍JS中的运算符。JS中的运算规则绝大多数还是和JAVA中是一致的，具体运算符如下：

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , –
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , `注意 == 会进行类型转换，=== 不会进行类型转换`
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

上述所罗列的这些运算符中，绝大部分的运算符和Java中的使用方式、含义都是一样的。那这里，我们主要介绍一下 = 、、= 的区别：

= 是赋值操作
== 会在比较时，判断左右两边的值是否相等（会自动进行类型转换）
=== 全等，在比较时，判断左右两边的类型和值是否都相等，都相等才为true（不会进行类型转换）

接下来我们通过代码来演示JS中的运算法，主要记忆JS中和JAVA中不一致的地方

第一步：在VS Code中创建名为05. JS-基础语法-运算符.html的文件

第二步：编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body> 

    <script>
         var age = 20;
         var _age = "20";
         var $age = 20;

         alert(age == _age); //true ，只比较值
         alert(age === _age); //false ，类型不一样
         alert(age === $age); //true ，类型一样，值一样
    </script>
</body>
</html>

类型转换

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

字符串 <-> 数字：
- +号两边只要有一个是字符串，都会把另外一个转成字符串。
- 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。
- 通过parseInt(…)函数，可以将一个字符串转为数字。
其他类型 -> 布尔类型：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。

字符串<–>数字

//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

其他类型<–>布尔类型

在js中，还有非常重要的一点是：0，null，undefined，“”，NaN 理解成false，反之理解成true。

// 类型转换 - 其他类型转为boolean
if(0){//false
    alert("0 转换为false");
}
if(NaN){//false
    alert("NaN 转换为false");
}
if(1){//true
    alert("除0和NaN其他数字都转为 true");
}

if(""){//false
    alert("空字符串为 false, 其他都是true");
}

if(" "){//true
    alert("空格字符串为 true");
}

if(null){//false
    alert("null 转化为false");
}
if(undefined){//false
    alert("undefined 转化为false");
}

**需要注意的是：**在JS中，0，null，undefined，“”，NaN理解成false，反之都为 true。

流程控制语句

在JS中，当然也存在对应的流程控制语句。常见的流程控制语句如下：

if … else if … else …
switch
for
while
do … while

参考：https://www.w3school.com.cn/js/index.asp

<script>
    /* if语句
     */
    if(1){
      alert("你说的对");
    };
    
    let greetings;//提前定义了一个问候变量
    let time=new Date().getHours();//获取当前的系统时间,小时
    if(time<=9){
      greetings="早安";
    }else if(time<=20){
      greetings="午安";
    }else{
      greetings="晚安";
    }
    console.log(greetings)
    
     /* 
      switch,
      需求：判断今天是星期几
    */
    let day;//定义一个变量，用来最终承载星期几
    let today=new Date().getDay();//获取当前系统时间的的天
    switch (today) {
      case 0:
        day="星期天";
        break;
      case 1:
        day = "星期一";
        break;
      case 2:
        day = "星期二";
        break;
      case 3:
        day = "星期三";
        break;
      case 4:
        day = "星期四";
        break;
      case 5:
        day = "星期五";
        break; 
      default:
        day="星期六"; 
    }
    console.log(day)
    
     /* 
      了解数组
    */
    //先定义一个数组变量
    let cars=['宝马','法拉利','保时捷','比亚迪','保时米','蔚来'];
    //alert(cars.length);
    /* 数组变量中是有下标(角标)（也叫元素对应的位置编号，但是该编号从0开始）
      想得到其中一个元素的值,采用的格式:变量名称[下标]=cars[0]=宝马
    */
  // alert(cars[0]+""+cars[5])
  /* for循环遍历 
      需求：我们想获取到数组中的每一个元素，然后保存到一个字符串类型的变量中，进行拼接展示
      输出结果:let text="宝马+法拉利+..."
    */
    //1.先定义一个变量
    let text="";
    /* 2.遍历数组 
    第一种方式
      for(表达式1;表达式2;表达式3){ 代码块}
      表达式1表示，定义初始值，let index=0,遍历从第0个开始
      表达式2 表示，遍历的结束条件  
      表达式3 表示：初始值递增，当执行完表达式1和表达式2条件都满足之后，一定执行代码块，然后执行第二次之前，对初始值进行递增
    */
   /*  for (let index = 0; index < cars.length; index++) {
        text+=cars[index]+" ";
    } */
    /* 
    第二种方式
      for in 遍历方式
       for (let index in cars) cars表示数组变量名称
       in是关键字
       let index 表示定义的数组下标
    */
    /* for (let index in cars) {
      text+=cars[index]+" ";
    } */
   /* 
      第三种方式
      foreach 遍历方式
   */
    cars.forEach(car => {
        text+=car+" "
    });

    console.log(text);
    
    
       /* 
      while循环遍历
   */
    let i=30;
    while (i<30) {
      i++;
      console.log("开始死循环了")
    }
    /* dowhile循环遍历 */
    let num=30;
    do{
      console.log("开始执行dowhile循环")
      num++;
    }
    while(num<30);

  </script>

函数

在JAVA中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，方便程序的封装复用。在JS中，需要通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法：

格式一：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

示例：

function add(a, b){
    return a + b;
}

如果要调用上述的函数add，可以使用：函数名称(实际参数列表)

let result = add(10, 20);
alert(result);

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10, 20, 30, 40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

格式二

刚才我们定义函数，是为函数指定了一个名字。那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。那接下来，方式二，就来介绍一下匿名函数的定义和调用。

**匿名函数：**是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式和箭头函数。

函数表达式：

var add = function (a, b){
    return a + b;
}

箭头函数：

var add = (a,b) => {
    return a + b;
}

上述匿名函数声明好了之后，是将这个函数赋值给了add变量。那我们就可以直接通过add函数直接调用，调用代码如下：

let result = add (10, 20);
alert(result);

也可以在定义完匿名函数之后，让该函数立即执行，这类函数我们也称为 立即执行函数。

(function (a,b) {consle.log(a + b);}) (10, 20);

((a,b) => {console.log(a + b);})(100, 200);

下雪了～

关注

32
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫