JavaWeb系列三: JavaScript学习 上

已于 2024-06-28 13:43:56 修改
阅读量3.9k 收藏 21
点赞数 5
分类专栏： JavaWeb 文章标签： javascript 前端 学习
于 2023-03-10 13:06:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18817831/article/details/129286381
版权

JavaScript-跟着韩顺平老师学Java

在这里插入图片描述

⬅️ 上一篇: JavaWeb系列二: CSS

🎉 欢迎来到 JavaWeb系列三: JavaScript学习 上 🎉

在本篇文章中，我们将带您初步了解和入门 JavaScript。JavaScript 是一种轻量级的、解释型的编程语言，广泛应用于网页开发中。通过学习 JavaScript，您可以实现网页的动态效果和交互功能。

🔧 本篇需要用到的项目: javascript-demo项目

官方文档

地址: https://www.w3school.com.cn/js/index.asp

离线文档: W3School离线手册(2017.03.11版)

基本说明

1.JavaScript 能改变 HTML 内容, 能改变 HTML 属性, 能改变 HTML 样式(CSS), 能完成页面的数据验证.

演示: D:\idea_project\zzw_javaweb\zzw_javascript\js演示_1.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='./img/eg_bulbon.gif'"> 开 灯
</button>
<img id="myImage" border="0" src="../img/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='./img/eg_bulboff.gif'"> 关 灯
</button>
</body>
</html>

2.JS 需要运行浏览器来解析执行 JavaScript 代码.

3.JS 是 Netscape 网景公司的产品, 最早取名为 LiveScript, 后更名为 JavaScript. 和 Java 没有关系.

4.JavaScript 简写 JS.

JavaScript特点

1.JavaScript 是一种解释型的脚本语言, C,C++ 等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释.

2.JavaScript 是一种基于对象的脚本语言, 可以创建对象, 也能使用现有的对象(有对象).

3.JavaScript是弱类型的, 对变量的数据类型不做严格的要求, 变量的数据类型在运行过程中可以变化.

创建js弱类型.html

<head>
    <meta charset="UTF-8">
    <title>JavaScript是弱类型的</title>
    <!--
        1.js代码可以写在script标签中
        2.type="text/javascript" 表示这个脚本(script)类型是javascript
        3.type="text/javascript" 可以不写,建议写上
        4.js语句后可以不写 ; 建议写上
        5.var
    -->
    <script type="text/javascript">
        //弱类型
        var name = "你好,世界";
        //输出, alert() 使用弹框方式
        //输出, console.log() 在调试位置输出
        alert("name=" + name);
        //输出变量的类型typeof, 输出变量的类型
        alert(typeof name);
        //name = 100;//给name重新赋值
        //alert(typeof name);//这里因为浏览器缓存的原因,仍然输出String

        var age = 10;//数值
        console.log("age=" + age);
        console.log(typeof age);
        age = "赵志伟";
        console.log("age=" + age);
        console.log(typeof age);

        //如果输出字符串+数字,会把数字换成String吗
        var n = 123 + "zzw";
        console.log(n);
        console.log(typeof n);//String
    </script>
</head>

4.跨平台性 (只要是可以解释 JS 的浏览器都可以执行, 和平台无关)

JavaScript快速入门

使用方式1:Script标签写JS代码

1.应用实例 . 新建 1.js.use.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script标签中写JS代码</title>
    <!--
    解读
    1.可以在head和body内嵌入script
    2.执行顺序: 从上到下
    3.建议放在head
    4.是text/javascript 不是javascript
    -->
    <script type="text/javascript">
        //在head标签内使用script写js代码
        alert("ok");
        console.log("ok");
    </script>
</head>
<body>
<script type="text/javascript">
    //在body内使用script写js代码
    console.log("hi");
</script>
</body>
</html>

在这里插入图片描述

使用方式2:使用script标签引入JS文件

1.应用实例 创建 test.js 和 2.js-use.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用script标签引入JS文件</title>
  <script type="text/javascript" src="js/test.js"/>
</head>
<body>
</body>
</html>

在这里插入图片描述

两种方式，不能混用

1.应用实例
新建js-use-detail.html，看使用细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种使用js的方式,二选一,不能混用</title>
  <!--
    如果你两种方式都使用了
    1.不会报错
    2.但是只有一个生效, 前面引入的js生效
  -->
  <script type="text/javascript" src="js/test.js">
    alert("hi 你好");//这里不会生效. 如果想再次使用, 再写一段 script 即可     
  </script>     
  <script type="text/javascript">     
    alert("hi 你好 ~这里能正常弹出");     
  </script>     
</head>     
<body>     
</body>     
</html>

查看js报错信息!!!

执行js，chrome浏览器如何查看错误信息

右上角三个点 -> 更多工具 -> 开发者工具 -> 控制台(console)

创建error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怎么看错误提示</title>
    <script type="text/javascript">
        //在浏览器ctrl+shift+i 进入到调试器
        console1.log("hi");
        console1.log("hi");
        console1.log("hi");
        console1.log("hi");
        console1.log("hi");
        console1.log("hi");
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

执行js, ff 浏览器如何查看错误信息

右上角 -> 更多工具 ->Web 开发者工具 -> 控制台
在这里插入图片描述

JavaScript变量

JavaScript变量表示存储数据的容器

在这里插入图片描述

应用实例

创建simple_var.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量举例</title>
    <script type="text/javascript">
        //js语言非常的松散, 没有强制的约束
        var age = 23;
        console.log(typeof age);//number
        age = "abc";
        console.log(typeof age);//string
        age = 'a';//js中没有char类型, 归属于string类型
        console.log(typeof age);//string
        age = 1.1;
        console.log(typeof age);//number
        age = true;
        console.log(typeof age);//boolean
        age = function () {
            
        }
        console.log(typeof age);//function
        age = null;
        console.log(typeof age);//object
        age = undefined;
        console.log(typeof age);//undefined
        age = [1, 2, 3];
        console.log(typeof age);//object
        age = {name: 'zzw', age: 25};
        console.log(typeof age);//object
    </script>
</head>
<body>
</body>
</html>

变量定义格式

创建var_define.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量举例</title>
    <script type="text/javascript">
        //js语言非常的松散, 没有强制的约束
        var age = 23;
        console.log(typeof age);//number
        age = "abc";
        console.log(typeof age);//string
        age = 'a';//js中没有char类型, 归属于string类型
        console.log(typeof age);//string
        age = 1.1;
        console.log(typeof age);//number
        age = true;
        console.log(typeof age);//boolean
        age = function () {
            
        }
        console.log(typeof age);//function
        age = null;
        console.log(typeof age);//object
        age = undefined;
        console.log(typeof age);//undefined
        age = [1, 2, 3];
        console.log(typeof age);//object
        age = {name: 'zzw', age: 25};
        console.log(typeof age);//object
    </script>
</head>
<body>
</body>
</html>

js正则表达式

格式: / 正则表达式主体 / 修饰符(可选)

修饰符描述
i执行对大小写不敏感的匹配
g执行全局匹配

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

//正则表达式验证用户名
var usernamePattern = /^\w{6,10}$/;
if (!usernamePattern.test(usernameValue)) {
    $("span[class='errorMsg']").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
    return false;
}

var content = "/views/manage/furn_add.jsp";
/^\/views\/manage\/.*/.test(content);

var regExp = new RegExp("^\/views\/manage\/.*");
regExp.test(content);

参考👉

  1. split()
var str = "1a2b3c4d5e6f7g";

var result = str.split(/[A-z]/); // 参数是一个正则表达式：表示所有字母
console.log(result);

打印结果: [“1”, “2”, “3”, “4”, “5”, “6”, “7”, “”]

  1. search()
	var str = "hello abc hello aec afc";
	/*
	* 搜索字符串中是否含有abc 或 aec 或 afc
	*/
	result = str.search(/a[bef]c/);
	console.log(result); // 打印结果：6
  1. match()
	var str = "1a2a3a4a5e6f7A8B9C";

	var result1 = str.match(/[a-z]/);   // 找到符合要求的第一个内容，然后返回
	var result2 = str.match(/[a-z]/g);  // 设置为“全局匹配”模式，匹配字符串中 所有的小写字母
	var result3 = str.match(/[a-z]/gi); // 设置多个匹配模式，匹配字符串中 所有的字母（忽略大小写）

	console.log(result1); // 打印结果：["a"]
	console.log(result2); // 打印结果：["a", "a", "a", "a", "e", "f"]
	console.log(result3); // 打印结果：["a", "a", "a", "a", "e", "f", "A", "B", "C"]
  1. replace()
	新的字符串 = str.replace(被替换的内容，新的内容);

    //replace()方法：替换
    var str2 = "Today is fine day,today is fine day !!!"

    console.log(str2);
    console.log(str2.replace("today","tomorrow"));  //只能替换第一个today
    console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，且为“全局匹配”模式，才能替换所有的today

JavaScript数据类型

数据类型英文表示示例
数值类型numberage = 1.1; age = 1;
字符串类型string‘a’ ‘abc’ “abc”
对象类型objectnull, undefined, [1, 2, 3], {name: ‘zzw’, age: 25}
布尔类型booleanage = true;
函数类型functionage = function () { }

1.4.1 特殊值

特殊值含义
undefined变量未赋初始值时,默认undefined
null空值
NaNNot a Number 非数值

创建datatype.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型的特殊值</title>
    <script type="text/javascript">
        //说明
        //1.typeof() 是 JavaScript 语言提供的一个函数
        //2.作用是 返回变量的数据类型
        //3.这里有 3 个特殊值
        // null 空值
        // undefined 没有赋初始值时就使用
        // NaN 当不能识别类型时

        var email;//特殊值 undefined
        console.log("email=" + email);//undefined
        console.log(typeof email);//undefined

        var adress = null;
        console.log("adress=" + adress);//null
        console.log(typeof adress);//object

        console.log(20 * "abc");//NaN: Not a Number
    </script>
</head>
<body>
</body>
</html>

数据类型注意事项

1.String字符串【可以用双引号括起来, 也可以单引号括起来】, 比如
“a book of javascript”       ‘abc’        “a”

数据类型转换

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。 参考👉

运算符

算术运算符

1.算数运算符用于执行变量与/或值之间的算术运算.

2.y等于5, 下面的表格解释了这些算术运算符.

运算符描述例子结果
+加x=y+2x=7
-减x=y-2x=3
*乘x=y*2x=10
/除x=y/2x=2.5
%求余数（保留整数）x=y%2x=1
++累加x=++yx=6
- -递减x=- -yx=4

赋值运算符

1.赋值运算符用于给 JavaScript 变量赋值

2.给定 x=10 和 y=5, 下面的表格解释了赋值运算符

运算符例子等价于结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

给定: x = 5

运算符描述例子
==等于(只比较值)x == 5 为true,x == "5"为true, x == 8为false
===全等(同时比较值和类型)x === 5 为true; x === "5"为false

关系运算符.html

在这里插入图片描述

1.5.1 逻辑运算符

给定: x=6 和 y=3

运算符描述例子
&&and描述
||or描述
!not描述

逻辑运算符.html
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5.2 三元运算符

条件运算符.html
在这里插入图片描述

🔜 下一篇预告: JavaWeb系列三: JavaScript学习 下

📚 目录导航 📚

  1. JavaWeb系列一: HTML
  2. JavaWeb系列二: CSS
  3. JavaWeb系列三: JavaScript学习 上
  4. JavaWeb系列三: JavaScript学习 下
  5. JavaWeb系列四: XML 和 DOM4J
  6. JavaWeb系列五: Tomcat

💬 读者互动 💬
在学习 JavaScript 的过程中，您有哪些新的发现或疑问？欢迎在评论区留言，让我们一起讨论吧！😊

~ 小团子
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
转：最详细的JavaScript 教程，入门级都能看懂
LlanyW的专栏
05-30 1万+
介绍 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript特点 JavaScript 是一门脚本语言。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript 已经由 ECMA（欧洲电脑..
前端基础--JavaScript
qq_50048558的博客
08-22 2616
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
JavaScript常用功能实现示例
最新发布
俎树振的博客
06-11 472
涵盖多种JavaScript常用功能示例，包括大小写字母转换、身份证号和手机号码脱敏、通过身份证计算年龄和性别、获取随机数、获取文件名和文件大小转换、去除字符串空白符、去掉指定字符、小数取整、数字格式化与移除、数字位数补全、大额数值单位转换、汉字转拼音与获取首字母、生成验证码及检测浏览器类型和版本等。
js核心基本语法（全面）
weixin_60941411的博客
04-09 3397
const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN。如果我们在js中写的方法都是全局的方法，在需要嵌入到别人的界面中的时候，这些全局的东西很可能会和别人的东西重名从而引发错误，所以说需要用js闭包包起来。
JS 基础入门教程
天马3798
02-25 1154
3.Js 基础语法、语句、变量、数据类型。1.JS 概念、历史、发展和Js简介。10.Js this关键字详解。2.Js 开发工具、运行、调试。9.Js JSON对象，序列化。4.Js 对象、函数，作用域。7.Js 类、继承、静态方法。8.Js 面向对象编程方案。一、JS 基础入门教程。5.Js 字符串，拼接。
JavaScript 快速入门手册
热门推荐
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
Javaweb课程设计：场地预约管理系统源码.zip
10-30
JavaWeb课程设计通常涵盖了一系列与开发基于Java技术的Web应用程序相关的技术、框架和实践。在这个特定的案例中，"场地预约管理系统"是一个典型的项目，它可能涉及到用户注册、登录、预订场地、查看预订记录等功能。...
JavaWeb学习总结共9页.pdf.zip
10-30
综上所述，"JavaWeb学习总结共9页.pdf.zip"可能涵盖了以上提到的一些或全部内容，为初学者或有经验的开发者提供了一份宝贵的参考资料。这份资料可能详细解析了各个知识点，包括它们的工作原理、如何使用，以及在实际...
javaweb商城实战学习案列.zip
12-26
项目概述：这个案例是一个实际的JavaWeb商城项目，涵盖了电商系统的一系列功能，如商品管理、用户注册登录、购物车管理、订单处理等。 技术栈：使用JavaWeb相关技术，包括Servlet、JSP、JavaBean等，以及数据库技术...
javaweb项目实（含笔记与详细实现步骤）
07-20
本项目实例旨在为新手提供一个全面的学习平台，通过实践操作和详细的步骤讲解，帮助他们快速理解和掌握JavaWeb的核心概念。 1. **环境搭建**：首先，你需要安装Java Development Kit (JDK) 和Java Web服务器，如...
java script 教程
10-09
java script 教程 个人学习用的，对初学者很有帮助
JS教程资料
03-17
NULL 博文链接：https://ctf945.iteye.com/blog/429794
js入门教程(共8个pdf文件）
02-03
一共分八章讲解：（pdf格式） 第1章 JavaScript语言概述 第2章 JavaScript语言基础 第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型(DOM) 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象
新手入门JavaScript看这篇就够了~
技术专家
04-20 1303
新手入门JavaScript看这篇就够了~
熬夜整理56个JavaScript高级的手写知识点
weixin_43857188的博客
11-04 568
前言 大家好，我是林三心，基础是进阶的前提，前面我给大家分享了本菜鸟这一年来笔记中的50个JS基础知识点和50个JS高级知识点 工作中遇到的50个JavaScript的基础知识点 万字总结」熬夜总结50个JS的高级知识点 今天就给大家分享一下我笔记中的56个JavaScript手写知识点 注明：此文章不含算法题 面试常考 1、实现原生的AJAX请求 const ajax = { get(url, fn) { const xhr = new XMLHttpRequest()
JavaScript教程
aliyun3的博客
04-10 2090
1.javascript简介 JavaScript 最初由网景公司开发的一种脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。 JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言，在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。JavaScript 的
Java script 学习笔记 简单易懂
m0_68711597的博客
05-24 214
像最简单的if 条件语句之类的 自己随便百度看看就行了 这里的文章主要讲一些常用的 容易出错的哈哈 ps(自学学不到的哦)从声明变量开始讲起 这里默认你学过Java python PHP之类的语言 有基础。对于Javascript 中的undefind对象详细介绍可以参考这篇文章便于理解。不过我的笔记比较通俗易懂 初学者也可以看。浏览器右键--》检查--》控制台d。JS中的UNDEFIND是什么？从声明变量讲起 注重实操。或者F12 点击控制台。
JavaScript
qq_72238093的博客
12-01 799
JS学习
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~ 小团子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值