B站 ----【狂神说Java】JavaScript学习笔记

最新推荐文章于 2024-05-11 17:12:14 发布

「已注销」

最新推荐文章于 2024-05-11 17:12:14 发布

阅读量410

点赞数 2

分类专栏：前端文章标签： javascript js 脚本语言

本文链接：https://blog.csdn.net/weixin_46846929/article/details/115773057

版权

这篇博客是基于狂神说Java的JavaScript学习笔记，涵盖了JavaScript的起源、框架、快速入门、数据类型、流程控制、函数、内部对象、面向对象编程、BOM和DOM操作等内容。特别强调了JavaScript在前端开发中的重要性，讲解了JavaScript框架如jQuery、Angular、React和Vue，以及DOM操作和表单验证的关键点。

摘要由CSDN通过智能技术生成

B站 ----【狂神说Java】JavaScript学习笔记

前言

非常感谢【狂神说 Java 】的视频教程

【狂神说Java】JavaScript最新教程通俗易懂

1、Javascript简介

Javascript是一门世界上最流行的脚本语言，其源代码在发往客户端之前不需要经过编译，而是将文本格式交由浏览器解释运行。

起源：由网景公司的Brendan Eich用10天就开发出来了。

== 一个合格的后端开发者，必须精通 JavaScript ==

ECMAScript是 JavaScript 的一个标准，已经到es6版本

但是大部分浏览器还只停留在支持es5代码上

导致开发环境和线上环境，版本不一致。

1、JavaScript框架

JQuery：简化了DOM操作
Angular：
React：
Vue：一款渐进式JavaScript框架
Axios：

UI框架

Ant Design：
Bootstrap：
AmazeUI：

主流前端框架：Vue.js

前端开发主要使用框架

2、快速入门

2.1、引入JavaScript

2.1.1、内部标签

<!-- script标签内，写JavaScript代码  -->
  <script>
    alert("Hello world");
  </script>

例子：

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

<!-- script标签内，写JavaScript代码  -->
  <script>
    alert("Hello world");
  </script>


</head>
<body>

</body>
</html>

2.1.2、外部引入

<!-- script标签必须成对出现
    不能使用闭合标签
 -->
  <script src="MyFirstJavascript.js"></script>

例子：

MyFirstJavascript.js

alert("Hello world");

Myfirst.html

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

<!-- script标签必须成对出现
    不能使用闭合标签
 -->
  <script src="MyFirstJavascript.js"></script>

</head>
<body>

</body>
</html>

2.2、基本语法入门

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

  <script>
    // 单行注释

    /* 多行注释 */

    /*
    * 多行注释
    * */

    // 1. 定义变量   变量类型  变量名 = 变量值
    var num = 1;
    var name = "qinjiang";
    // alert(num); // 弹窗显示 num的值
    // 2.条件控制
    var score = 65;
    if (score > 60 && score < 70){
    
      alert("及格");
    }

    // console.log(score) 在浏览器控制台打印变量

    

  </script>

</head>
<body>

</body>
</html>

2.3、数据类型

数值，文本，图形，音频，视频…

变量

声明变量时，变量名可以是字母，数字，下划线，$符号，也可以是中文，与java类似，首个字符不能是数字开头

var 
let 		// ES6 新特性，用于声明局部作用域的变量

2.2.1 number

js不区分小数和整数，Number

123 // 整数123
122.2 // 浮点数122.2
1.123e3   //科学计数法
-99 // 
NaN. // not a number
Infinity //表示无限大

2.2.2 字符串

‘abc’ “abc”

2.2.3 布尔值

true, false

2.2.4 逻辑运算

&&    // 两个都为真，结果为真
||   // 一个为真，结果为真
!    // 真即假，假即真

2.2.5 比较运算法

	=   // 
  ==   // 等于（类型不一样，值一样，也会判断为true
  ===  // 绝对等于（类型一样，值一样，结果true

这是JS的缺陷，坚持不要使用 == 比较
只能通过 isNaN(NaN)来判断

浮点数问题：

console.log((1/3) == (1-2/3)); // 结果不相等

尽量避免使用浮点数进行运算，存在精度问题！

console.log(Math.abs((1/3) - (1-2/3) < 0.00000001));

2.2.6 null 和 undefined

null 空
undefined 未定义

2.2.7 数组

java 的数组必须是相同类型的对象，JS中不需要这样！

// 保证代码可读性，尽量使用[]
    var arr = [1,2,3, 'hello', null, true];
    console.log(arr);

    new Array(1,2, 3, 'hello', null, true);

取数组下标越界时，返回 undefined

2.2.8 对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

var person = {
   
      name: "张三",
      age: 3,
      tags: ['js', 'java', 'web', '...']
    }

取对象的值

person.name
> "张三"
person.age
> 3

2.2.9 严格检查模式

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

  <!--
  前提是：IDEA 需要设置支持ES6语法

   'use strict';  严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在 JavaScript的第一行！
   局部变量建议使用 let 去定义
   -->
  <script>
    'use strict'; // 严格检查模式
    // 全局变量
    // i = 1;
    // 局部变量  ES6 let
    let i = 1;

  </script>


</head>
<body>

</body>
</html>

3、数据类型

3.1 字符串

3.1.1 正常的字符串我们使用单引号，或者双引号包裹

3.1.2 注意转移字符 \

\'		
\n		
\t		
\u4e2d		
\x41			Asc11字符

例子：

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

  <script>
    'use strict';
    console.log('\'a\'');
    console.log('\n');
    console.log("\u4e2d");
    console.log("\x41");
  </script>
</head>
<body>

</body>
</html>

3.1.3 多行字符串编写

// tab键上面的 piao 键，esc键下面
    var msg = `hello
    world
    你好呀
    你好 `

4、模版字符串

let name = "张三";
    let age = 1;
    let msg2 = `你好呀，${
     name}`;
    console.log(msg2);

5、字符串长度

str.length

6、字符串的可变性，不可变

7、大小写转换

var student = "stu";

// 注意，这里是方法，不是属性了
student.toUpperCase();  // 转换成大写
student.toLowerCase();  // 转换成小写

8、student.indexOf(‘t’)

9、substring

student.substring(1); // 下标从1开始，所以是从第二个字符串截取到最后一个
student.substring(1, 3); // 下标从1开始，到3结束

例子：

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

  <script>
    'use strict';
    // console.log('\'a\'');
    // console.log('\n');
    // console.log("\u4e2d");
    // console.log("\x41");

    // tab键上面的 piao键，esc键下面
    // var msg = `hello
    // world
    // 你好呀
    // 你好
    //
    // `
    //
    // let name = "张三";
    // let age = 1;
    // let msg2 = `你好呀，${name}`;
    // console.log(msg2);

    let student = "我是一个学生";
    console.log(student.substring(1)); // 下标从1开始，所以是从第二个字符串截取到最后一个
    console.log(student.substring(1,3)) // 下标从1开始，到3结束

  </script>
</head>
<body>

</body>
</html>

3.2 数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0];
arr[2] = 3;

1、长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化～，如果赋值过小，元素就会丢失

2、indexOf，通过元素值获得下标索引

arr.indexOf(2);

例子：

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

  <script>
    'use strict'; // 严格检查模式

    let student = "我是一个学生";
    console.log(student.indexOf("我"));
    console.log(student.indexOf("个"));
    
  </script>
</head>
<body>

</body>
</html>

输出：

0
3

3、slice() 截取Array 的一部分，返回一个新的数组，类似于java 中的 String 中的 substring

例子：

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

  <script>
    'use strict';
  
    let student = "我是一个学生";

    console.log(student.slice(1)); // 从下标1开始向后截取
    console.log(student.slice(0,2)); // 从下标0开始截取到下标2

  </script>
</head>
<body>

</body>
</html>

输出：

是一个学生
我是

4、push()，pop()

push()			// 将元素压入到尾部
pop()				// 将尾部的元素弹出

5、unshift(), shift()头部

unshift()			// 压入到头部
shift()			// 弹出头部的一个元素

例子：

arr
(5) [1, 2, 3, 4, 5]
arr.shift();
1
arr
(4) [2, 3, 4, 5]
arr.unshift(7);
5
arr
(5) [7, 2, 3, 4, 5]
arr.reverse();		//元素反转
(5) [5, 4, 3, 2, 7]
arr
(5) [5, 4, 3, 2, 7]

6、排序 sort()

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

  <script>
    'use strict';
    var arr = ["C", "B", "A"];
    console.log("原来的数组" + arr)
    console.log("排序后的数组" + arr.sort());
  </script>
</head>
<body>

</body>
</html>

输出：

原来的数组C,B,A
排序后的数组A,B,C

7、元素反转 reverse()

例子：

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

  <script>
    'use strict';
    var arr = ["C", "B", "A"];
    console.log("原来的数组" + arr)
    console.log("反转后的数组" + arr.reverse());
  </script>
</head>
<body>

</body>
</html>

输出：

原来的数组C,B,A
反转后的数组A,B,C

8、concat()

<!DOCTYPE html>
<html lang=

最低0.47元/天解锁文章

「已注销」

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
B站 ----【狂神说Java】JavaScript学习笔记

B站 ----【狂神说Java】JavaScript学习笔记前言非常感谢【狂神说 Java 】的视频教程【狂神说Java】JavaScript最新教程通俗易懂1、Javascript简介 Javascript是一门世界上最流行的脚本语言，其源代码在发往客户端之前不需要经过编译，而是将文本格式交由浏览器解释运行。起源：由网景公司的Brendan Eich用10天就开发出来了。== 一个合格的后端开发者，必须精通 JavaScript ==ECMAScript是 JavaScript 的一个
复制链接

扫一扫