javascript学习总结

最新推荐文章于 2024-07-26 20:46:33 发布

想写好代码的小香菜

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.5k

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_59049031/article/details/125421501

版权

javascript学习总结

前言
一、JavaScript是什么？
二、JavaScript使用

前言

这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。

一、JavaScript是什么？

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript使用

<script> 标签：在 HTML 中，JavaScript 代码必可以在 HTML 文档中放入不限数量的脚本。须位于 <script> 与 </script> 标签之间。
<head> 或 <body> 中的 JavaScript：可以在 HTML 文档中放入任意数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分。一般做法是把脚本全部放在<head>，或者放在页面底部，可让编写html代码时更加清晰，不会干扰道页面内容。

<head> 中的 JavaScript函数被放置于 HTML 页面的 <head> 部分。示例中的函数会在按钮被点击时调用。

 <!DOCTYPE html>
 <html>
 <head>
 <script>
 function myFunction() {
         document.getElementById("demo").innerHTML = "段落被更改。";
 }
 </script>
 </head>
 <body>
      <h1>一张网页</h1>
      <p id="demo">一个段落</p>
      <button type="button" onclick="myFunction()">试一试</button>
 </body>
 </html>

<body> 中的 JavaScript函数被放置于 HTML 页面的 <body> 部分。示例中的点函数会在按钮被点击时调用。

  <!DOCTYPE html>
  <html>
  <body> 
 <h1>A Web Page</h1>
 <p id="demo">一个段落</p>
 <button type="button" onclick="myFunction()">试一试</button>
 <script>
 function myFunction() {
       document.getElementById("demo").innerHTML = "段落被更改。";
   }
</script>
</body>
</html>

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

2.1、JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

2.2、JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

2.2.1、JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。通常使用var来声明变量。
字面量：写数值时有无小数点均可以。字符串是文本，需要由双引号或单引号包围。
变量：用于存储数据值。JavaScript 使用关键字 var 来定义变量，使用等号=来为变量赋值。

var x, length
x = 5
length = 6

2.2.2、JavaScript 运算符

JavaScript 使用算数运算符（+ - * /）来计算值；
JavaScript 使用赋值运算符（=）向变量赋值。
JavaScript还有关系运算符，关系运算符在逻辑语句中使用，以测定变量或值是否相等，例如'<'，'>'，'<='，'>='。
JavaScript 使用逻辑运算符测定变量或值之间的逻辑，常用逻辑运算符'&&'，'||'，'!'。
JavaScript 使用比较运算符来比较两个值是否相等，如果相等会返回true，否则返回false。使用 == 来做相等运算，使用 != 来做不相等运算，使用 === 来做全等运算，使用 !== 来做不全等运算

2.2.3、JavaScript 关键词

JavaScript 关键词用于标识被执行的动作，JavaScript有许多关键字，int，else，let等等。

2.2.4、JavaScript 注释

JavaScript 使用双斜杠//来添加单行注释，多行注释以 /* 开始，以 */ 结尾。

2.2.5、JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等。
主要分为两类：值类型(基本类型)和引用数据类型（对象类型）。

 tips:
   1、JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
   2、变量的数据类型可以使用 typeof 操作符来查看。
   3、字符串是存储字符（比如 "Bill Gates"）的变量。字符串可以是引号中的任意文本。
   4、JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。
   5、布尔（逻辑）只能有两个值：true 或 false。

声明数组、对象和变量类型示例：

 //创建数组方法一
 var cars = ["Saab", "Volvo", "BMW"];
 //创建数组方法二
 var car1 = "Saab";
 var car2 = "Volvo";
 var car3 = "BMW"; 
 //创建数组方法三
 var cars = new Array("Saab", "Volvo", "BMW");
 //声明JavaScript 对象
 var person={firstname:"John", lastname:"Doe", id:5566};
 //声明变量类型
 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

**2.2.6、JavaScript 类型转换
强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

全局方法 String() 能够将布尔转换为字符串。布尔方法 toString() 同理。

    //全局方法 String() 
    String(false)        // 返回 "false"
    String(true)         // 返回 "true"
    //布尔方法 toString() 
    false.toString()     // 返回 "false"
    true.toString()      // 返回 "true"
    //全局方法 String() 可将日期转换为字符串。
    String(Date())      "demo1">// 返回 "Thu Jun 23 2022  21:22:38 GMT+0800 (中国标准时间)"
    //日期方法 toString() 同理。
    Date().toString()   "demo2">// 返回 "Thu Jun 23 2022 21:22:38 GMT+0800 (中国标准时间)"
    //全局方法 String() 能够把数字转换为字符串。
    String(x)         // 从数值变量 x 返回字符串
    String(123)       // 从数值文本 123 返回字符串
    String(100 + 23)  // 从表达式中的数值返回字符串
    //数字方法 toString() 同理。
    x.toString()
    (123).toString()
    (100 + 23).toString()

全局方法 Number() 可把字符串转换为数字。

 Number("3.14")    // 返回 3.14
 Number(" ")       // 返回 0
 Number("")        // 返回 0
 Number("99 88")   // 返回 NaN
 //全局方法 Number() 也可把布尔转换为数字。
 Number(false)     // 返回 0
 Number(true)      // 返回 1
 //日期方法 getTime() 同理。
 d = new Date();
 d.getTime()        "demo4">// 返回 1655990558350

将其它的数据类型转换为Boolean，只能使用Boolean()函数。使用Boolean()函数,数字 —> 布尔,除了0和NaN，其余的都是true,字符串 —> 布尔,除了空串，其余的都是true,null和undefined都会转换为false,对象也会转换为true

2.2.7、JavaScript条件语句

if…else，是最基本的控制语句。

 //用法一
  if (条件) {
      如果条件为 true 时执行的代码
  } 
  //用法二
  if (条件) {
     条件为 true 时执行的代码块
     } else { 
     条件为 false 时执行的代码块
  }
  //用法三
  if (条件 1) {
     条件 1 为 true 时执行的代码块
  } else if (条件 2) {
     条件 1 为 false 而条件 2 为 true 时执行的代码块
  } else {
     条件 1 和条件 2 同时为 false 时执行的代码块
  }

switch…case是另一种流程控制语句。switch语句更适用于多条分支使用同一条语句的情况。

    switch (语句) {
          case 表达式1:
               语句...
          case 表达式2:
               语句...
          default:
               语句...
     }

2.2.8、JavaScript循环语句

JavaScript有三大循环语句：

for - 循环代码块一定的次数，for/in - 循环遍历对象的属性

   for (语句 1; 语句 2; 语句 3)
   {
       被执行的代码块
    }//语句 1 （代码块）开始前执行,语句 2 定义运行循环（代码块）的条件,语句 3 在循环（代码块）已被执行之后执行

while - 当指定的条件为 true 时循环指定的代码块
```
while (条件)
{
    需要执行的代码
 }
```
do/while - 同样当指定的条件为 true 时循环指定的代码块
```
 do
  {
    需要执行的代码
  }while (条件);
```

2.3、JavaScript 链式语法

让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。

以函数形式调用时，this永远都是window
以方法的形式调用时，this是调用方法的对象
以构造函数的形式调用时，this是新创建的那个对象
使用call和apply调用时，this是传入的那个指定对象
示例如下：

 //链式语法
 var bird = {//定义对象字面量
    catapult: function() {
     console.log( 'Yippeeeeee!' );
     return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
   }
  };
  bird.catapult().destroy();//destroy()后还可以再链接吗？

想写好代码的小香菜

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javascript学习总结

这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习，我对于JavaScript是什么，JavaScript的基本用法和语法有了初步的了解。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由
复制链接

扫一扫