前端的初学习 -- 第六章 -- JavaScript基本使用

最新推荐文章于 2025-07-27 14:47:24 发布

翻译最新推荐文章于 2025-07-27 14:47:24 发布 · 209 阅读

标签

#js #javascript #java

前端学习专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍JavaScript的基础知识，包括JS的特点、组成及与HTML的结合方式。深入探讨了变量、类型转换、运算符等内容，并提供了字符API、数组操作及数学对象等实用示例。

博客说明

文章内容输出来源：拉勾教育Java就业急训营

什么是JavaScript

在这里插入图片描述

JS特点

在这里插入图片描述

JS组成

在这里插入图片描述

HTML与JS结合方式

三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

行内脚本

在这里插入图片描述

内部脚本

在这里插入图片描述

外部脚本

在这里插入图片描述
外部JS：

alert("外部JS");

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 外部JS -->
<script src="js/test01.js"></script>

<!-- 内部JS -->
<script>
    alert("内部JS");
</script>

<body>
    <!-- 行内JS -->
    <h1 onclick="alert('行内JS')">点我试试</h1>
</body>
</html>

变量

因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
在这里插入图片描述

自动类型转换

数字 + 字符串：数字转换为字符串
[10+’a’ -> 10a ]
数字 + 布尔值：true转换为1，false转换为0
[ true+5 -> 6]
字符串 + 布尔值：布尔值转换为字符串true或false
[true+’a’ -> truea ]
布尔值 + 布尔值：布尔值转换为数值1或0
[ true+true -> 2]

类型转换

在这里插入图片描述

null 与 nudefined

在这里插入图片描述

算术运算

在这里插入图片描述

关系运算

严格等于：===
类型、数值相等
非严格等于：！==
类型、数值不相等

逻辑运算符

在这里插入图片描述

控制语句

if(关系表达式){
	// 语句块1  
}else {
	// 语句块2 
}

if(关系表达式){
	// 语句块1  
}else if(关系表达式){
	// 语句块2 
}else if(关系表达式){
	// 语句块3 
}else {
	// 语句块4
}

switch (表达式) {
	case 值1:语句1; break;
	case 值2:语句2; break;
	default:如上面都不成立，执行此语句;
}

for (var i=1 ; i<=5 ; i++)
{
	 alert(i);
}

while (条件){ 
	// 语句1;
	...
}

常用字符API

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号
toUpperCase/toLowerCase :转大小写
charAt(下标) ：返回某个下标上的字符
indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标
substring(开始,结束)：截取字符串中一部分（结束是不包含的）
replace(旧的,新的)：将字符串中的旧字符替换成新字符
split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

<body>
    <script>
        /* 1、length：获取字符串的长度 */
        var str = "hello";
        console.log(str.length);

        /* 2、toUpperCase/toLowerCase：转大小写 */
        var name = "ABCdefGHiJk";
        console.log(name.toUpperCase());
        console.log(name.toLowerCase());

        /* 3、charAt(下标) ：返回某个下标上的字符 */
        /* 显示下标为12的字符 */
        var str1 = "JavaScriptTest";
        var str2 = str1.charAt(12);
        console.log(str2);

        /* 3.1、charCodeAt：返回一个unicode编码 */
        /* 显示韵的unicode编码 */
        var str3 = "韵";
        var str4 = str3.charCodeAt(0);
        console.log(str4);

        /* 4、indexof：查找字符串中字符出现的首次下标 */
        var str5 = str1.indexOf("a");
        console.log(str5);

        /* 5、lastIndexof：查找字符串中字符最后一次出现的下标 */
        var str6 = str1.lastIndexOf("a");
        console.log(str6);

        /* 6、substring(开始,结束)：截取字符串中一部分（开始是包含的、结束是不包含的） */
        var str7 = str1.substring(2,4);
        console.log(str7);

        /* 7、replace(旧的,新的)：将字符串中的旧字符替换成新字符 */
        var str8 = name.replace("HiJ","WWWW");
        console.log(str8);

        /* 8、split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型 */
        var str9 = "一,二,三,四";
        var arr = str9.split(",");
        console.log("一共切成了：" + arr.length + "块");
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr[3]);
    </script>
</body>

数组

创建数组

var arr1 = new Array();

初始化数组的三种方式

		// 第一种
        var arr1 = new Array();
        arr1[0] = 110;
        arr1[1] = 119;
        arr1[2] = 120; 

        // 第二种
        var arr1 = new Array(10, "a", true); 
        
        // 第三种
        var arr1 = [10, "a", true];
       
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }

数组常用的方法

tostring()：将数组转换成字符串
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
concat(新元素)：将原来的数组连接新元素，原数组不变。
slice(开始，结束)：在数组中提取一部分，形成新的数组
reverse()：数组的反转（倒序）
sort()：数组排序

		// 1、tostring()：将数组转换成字符串 
        var arr = [1,2,3,4];
        var str = arr.toString();
        console.log(str + ",类型为：" + typeof(str));

        // 2、join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。 
        var str1 = arr.join("-");
        console.log(str1 + ",类型为：" + typeof(str));

        // 3、concat(新元素)：将原来的数组连接新元素，原数组不变。 
        var arrnew = arr.concat(5,6);
        console.log( arrnew +",类型为：" + typeof( arrnew ) ); 
        console.log("原数组：" + arr);

        // 4、slice(开始，结束)：在数组中提取一部分，形成新的数组。 
        var arr2new = arrnew.slice(2,4);// 开始包含、结束不包含
        console.log(arr2new);

        //5、reverse()：数组的反转（倒序）
        arr.reverse();
        console.log(arr);

        // 6、sort()：数组排序
        var arr3 = [11,55,853,6684,015,1,6];
        //6.1、arr.sort() 字符排序
        arr3.sort();
        console.log(arr3);

        //6.2、arr.sort(func) 数值排序 
        arr3.sort(test_sort);
        console.log(arr3);

        //6.2.1 定义排序函数
        function test_sort(a,b){
            return a-b;
        }

Math数学对象

在这里插入图片描述
选取上面方法大概使用一下

// 返回0-9之间任意一个随机数字 
var i = Math.random() * 10; 
var j = Math.floor(i); 
console.log(j);

Number数学对象

在这里插入图片描述

正则表达式(reg)

对字符串执行模式匹配的强大工具
在这里插入图片描述
👉正则表达式在线生成、测试

日期对象

<script>
        var time = new Date();

        console.log(time);

        var year = time.getFullYear();//年
        var month = time.getMonth() + 1;//月，从0开始，所以+1补全
        var day = time.getDate();//日
        var hour = time.getHours();//时
        var mm = time.getMinutes();//分
        var s = time.getSeconds();//秒
        var ms = time.getMilliseconds();//毫秒

        var timestr = year + "年" + month + "月" + day + "号 " + hour + "时" + mm + "分" + s + "秒" + ms + "毫秒";
        console.log(timestr);

    </script>