【JavaScript】初入前端,记录JavaScript学习过程

news2025/1/18 9:53:29

文章目录

  • 一、下面将是你在本教程中学到的主要内容
    • 1. JavaScript直接写入HTML输出流
    • 2. JavaScript对事件的反应
    • 3. JavaScript:改变 HTML 内容
    • 4. JavaScript 改变HTML图像
    • 5. 改变HTML样式
    • 6. JavaScript 验证输入
  • 二、JavaScript 语法学习
    • 1. JavaScript的位置
    • 2. 浏览器运行JavaScript代码
    • 3. JavaScript 输出
    • 4. JavaScript 语法
    • 5. JavaScript 字符串
    • 6. JavaScript 运算符号
    • 7. JavaScript条件语句
    • 8. JavaScript 循环语句
    • 9. JavaScript 正则表达式
    • 10. JavaScript 异常体系
    • 11. JavaScript 表单
    • 11. JavaScript 的this关键字
    • 12. JavaScript JSON
  • 三、JavaScript 异步编程

一、下面将是你在本教程中学到的主要内容

1. JavaScript直接写入HTML输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
// 直接输出write的内容
document.write("<h1>这是一个标题123</h1>");
document.write("<p>这是一个段落456。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
	
</body>
</html>

在这里插入图片描述

2. JavaScript对事件的反应

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>

<!--通过js的alert函数来弹出窗口-->
<button type="button" onclick="alert('欢迎!')">点我!</button>
	
</body>
</html>

在这里插入图片描述

3. JavaScript:改变 HTML 内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述

4. JavaScript 改变HTML图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	// 获取id = myimage的元素
	element=document.getElementById('myimage')
	// 如果是bulbon,那就变成bulboff
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	// 如果不是bulbon,那就变成bulbon
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<!--如果点击这个图片,就会触发changeImage()函数,并且图像的初始背景是bulboff-->
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

在这里插入图片描述

5. 改变HTML样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述

6. JavaScript 验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述

二、JavaScript 语法学习

1. JavaScript的位置

HTML 中的 Javascript 脚本代码必须位于 <script></script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body><head> 部分中。

外部文件通常包含被多个网页使用的代码,文件扩展名是 .js。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>

<!--点击按钮就会引用myScript.js文件中的myFunction()函数-->
<button type="button" onclick="myFunction()">点击这里</button>

<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script src="myScript.js"></script>
	
</body>
</html>

在这里插入图片描述

2. 浏览器运行JavaScript代码

Console 窗口调试 JavaScript 代码
在这里插入图片描述

我们也可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件:
在这里插入图片描述

3. JavaScript 输出

- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。

4. JavaScript 语法

操作符
在这里插入图片描述

注释

// 我不会执行这里的注释

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/

数据类型

var carname = "Volvo XC60";		// carname是字符串变量
var carId = 3;					// carId是数字变量
var pai = 3.14;					// pai是数字变量
var flag = true;				// flag是布尔类型
var x;							// x为undefined未知类型
var cars=new Array("Saab","Volvo","BMW");	// cars是数组类型

var person={					// person是对象类型
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象

// 对象可以是一个变量
var car = "Fiat"

// 对象也可以是多个变量的集合
var car = {name:"Fiat", model:500, color:"white"};

// 访问对象属性
person.lastName;

// 访问对象方法
name = person.fullName();

函数

// 无返回值函数
function myFunction(var1,var2)
{
	alert("Welcome " + name + ", the " + job);
}

// 带有返回值函数
function myFunction()
{
    var x=5;
    return x;
}

变量

数据类型:JavaScript变量有很多种类型,但是现在我们只关注数字和字符串。
变量名:必须以字母、$、_ 开头,并且对大小写敏感
关键字:var、const、let
默认值:undefined
作用范围:全局变量、局部变量
// 当您向变量分配文本值时,应该用双引号或单引号包围这个值。
// 当您向变量赋的值是数值时,不要使用引号。
var pai = 3.14;			// var被解析为数字类型
const pi = 3.14;		// const将pi定义为常量
var person1 = "John";	// var被解析为字符串类型
var person2 = 'Adam';	// 字符串用单引号或者双引号括起来
var carname;			// 变量carname的值将是undefined

// let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。
{ 
    let x = 2;
}
// 这里不能使用 x 变量

函数

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

5. JavaScript 字符串

// 字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:
var carname = "Volvo XC60";
var carname = 'Volvo XC60';

// 你也可以在字符串添加转义字符来使用引号:
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

// 字符串长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

// 字符串相加
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;		// What a very nice day

// 字符串与数字相加
x=5+5;			// 10
y="5"+5;		// 55
z="Hello"+5;	// Hello5

6. JavaScript 运算符号

算法运算符
在这里插入图片描述
赋值运算符
在这里插入图片描述
比较运算符
在这里插入图片描述
逻辑运算符
在这里插入图片描述
条件运算符

// 如果变量 age 中的值小于 18,则向变量 voteable 赋值 "年龄太小",否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";

7. JavaScript条件语句

// if - else if - else语句
if (time<10){
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20){
    document.write("<b>今天好</b>");
}
else{
    document.write("<b>晚上好!</b>");
}

// switch - case语句
var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
  
  default:
    x="期待周末";
}

8. JavaScript 循环语句

for (var i=0;i<cars.length;i++){ 
    document.write(cars[i] + "<br>");
}

for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

9. JavaScript 正则表达式

// 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
var str = "Visit Runoob!"; 
var n = str.search("Runoob");

// 用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

10. JavaScript 异常体系

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

11. JavaScript 表单

表单验证

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

11. JavaScript 的this关键字

方法中使用 this

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
  	// this表示person对象
    return this.firstName + " " + this.lastName;
  }
};

单独使用this

"use strict";
// this 也是指向全局(Global)对象
var x = this;

事件中的this

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

12. JavaScript JSON

//这是一个js对象.
var obj = {a: 'Hello', b: 'World'}; 
//这是一个 JSON 字符串,本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'; 

// 从JSON字符串转换为JS对象
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象
// 从JS对象转换为JSON字符串
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

三、JavaScript 异步编程

setTimeout 函数
这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 “print”,在命令行输出 “RUNOOB!”。

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

Promise()
例如,如果我想分三次输出字符串,第一次间隔 1 秒,第二次间隔 4 秒,第三次间隔 3 秒

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

这段程序实现了这个功能,但是它是用 “函数瀑布” 来实现的。可想而知,在一个复杂的程序当中,用 “函数瀑布” 实现的程序无论是维护还是异常处理都是一件特别繁琐的事情,而且会让缩进格式变得非常冗赘。

现在我们用 Promise 来实现同样的功能:

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

我们使用 Promise 构造函数创建了一个 Promise 对象,并使用 setTimeout 模拟了一个异步操作。如果异步操作成功,则调用 resolve 函数并传递成功的结果;如果异步操作失败,则调用 reject 函数并传递失败的原因。然后我们使用 then 方法处理 Promise 成功状态的回调函数,使用 catch 方法处理 Promise 失败状态的回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');
    } else {
      reject('error');
    }
  }, 1000);
});
 
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

异步函数
我们可以通过异步函数将上面的代码变得更好看

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

异步函数 async function 中可以使用 await 指令,await 指令后必须跟着一个 Promise,异步函数会在这个 Promise 运行中暂停,直到其运行结束再继续运行。

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值,await 语句也会返回它:

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/435127.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在硬盘上恢复已经删除的照片?

可以从硬盘恢复删除的照片吗&#xff1f; 旅行后&#xff0c;许多人倾向于将照片保存到另一个储存设备作为副本或备份。例如&#xff0c;将它们存储在外部硬盘上或将图片传输到电脑。但是在整理照片的时候&#xff0c;很可能不小心把照片删掉了&#xff0c;尤其是使用外接硬…

成都爱尔樊映川:视网膜上视觉最敏锐部位,出问题怎么办

视网膜后极部有一直径约 2mm 的浅漏斗状小凹陷区&#xff0c;该区含有丰富的叶黄素呈现椭圆形黄色&#xff0c;称为“黄斑”&#xff0c;是视网膜上视觉最敏锐的部位。 它主要与精细视觉及色觉等视功能有关。正常情况下&#xff0c;外界物体光线进入眼内&#xff0c;投影在黄斑…

【项目开发】二开系统,费了好大劲,才整好,规划业务逻辑太重要了

作为程序员一天不写代码&#xff0c;不会咋样&#xff0c;第二天会比较生疏&#xff0c;所以小编也不能闲着&#xff0c; 3天的时间吧&#xff0c;搞了个羽毛球场地预约系统&#xff0c;看着场地预约页面比较简单&#xff0c; 小编下班回家&#xff0c;搞了2个晚上&#xff0c…

开发常用的 Linux 命令2(文件的查看、搜索和权限)

开发常用的 Linux 命令2&#xff08;文件的查看、搜索和权限&#xff09; 作为开发者&#xff0c;Linux是我们必须掌握的操作系统之一。因此&#xff0c;在编写代码和部署应用程序时&#xff0c;熟练使用Linux命令非常重要。这些常用命令不得不会&#xff0c;掌握这些命令&…

【MySQL】增删改查基本操作

目录 上篇在这里喔~ 增删改查1 1.条件查询WHERE 1.查询语文成绩大于60的同学 2.查询语文成绩等于NULL的同学 3.查询语文成绩在60-90之间的同学 4.查询英语成绩等于30&#xff0c;77&#xff0c;90的所有同学 5.查询小锦鲤的语文成绩是否为空 6.查询姓孙的同学的所有信息 …

shiro漏洞复现及其攻击流量分析

前言 最近面试时经常被问到&#xff0c;每次说的都不太完美&#xff0c;现在再来复现一边。 shiro介绍 Apache Shiro是一个开源安全框架&#xff0c;提供身份验证、授权、密码学和会话管理。 CVE-2016-4437 利用vulhub搭建的靶场。 在Apache Shiro < 1.2.4版本中存在反…

Servlet 之超详解【2023年最新版】

编译软件&#xff1a;IntelliJ IDEA 2019.2.4 x64 操作系统&#xff1a;win10 x64 位 家庭版 服务器软件&#xff1a;apache-tomcat-8.5.27 目录 一. 什么是Servlet&#xff1f;二. 如何编写第一个servlet程序&#xff1f;三. Servlet的生命周期四. Servlet的技术体系五. web项…

Flutter Animation 动画

前言 &#xff1a; 在Flutter 中&#xff0c;做动画离不开这么一个类&#xff0c;那就是 Animation 这个类如往常一样&#xff0c;也是一个抽象类。 abstract class Animation<T> extends Listenable implements ValueListenable<T> 整个animation.dart 文件只有…

Windows和IDEA安装Scala

一、Windows安装Scala 前提&#xff1a;Windows已经安装好JDK1.8 第一步&#xff0c;下载对应的 Scala 安装文件 scala-2.12.11.zip (尚硅谷资料里有。直接获取&#xff09; 第二步&#xff0c;解压scala-2.12.11.zip 注意自己解压的目录&#xff0c;我这里解压到D盘java文…

3、ThingsBoard使用jar包单机部署

1、概述 前面一节我讲了如何初始化数据库表结构以及默认的数据。这一节我将讲解如何使用jar包部署。 2、部署 2.1、修改thingsboard.yml配置 上一节我已经讲解了thingsboard.yml中的基础配置,基础的组件配置如何redis、kafka、Cassandra、pg等大家都知道,关键的地方是在于…

Zimbra 远程代码执行漏洞(CVE-2019-9670)漏洞分析

Zimbra 远程代码执行漏洞(CVE-2019-9670)漏洞分析 漏洞简介 Zimbra是著名的开源系统&#xff0c;提供了一套开源协同办公套件包括WebMail&#xff0c;日历&#xff0c;通信录&#xff0c;Web文档管理和创作。一体化地提供了邮件收发、文件共享、协同办公、即时聊天等一系列解决…

主 存储器

主存储器 概述 实际上在主存储器运作时&#xff0c;根据MAR中的地址访问某个存储单元时&#xff0c;还需经过地址译码、驱动等电路才能找到所需的访问单元。读出时需经过读出放大器&#xff0c;才能将被选中单元的存储字送到MDR。写入时&#xff0c;MDR中的数据也必须经过写入…

课程简介:.Net Core从零学习搭建权限管理系统

课程简介目录 &#x1f680;前言一、课程背景二、课程目的三、系统功能四、系统技术架构五、课程特点六、课程适合人员七、课程规划的章节八、最后 &#x1f680;前言 本文是《.Net Core从零学习搭建权限管理系统》教程专栏的导航站&#xff08;点击链接&#xff0c;跳转到专栏…

【运动规划算法】路径规划中常用的插值方法

文章目录 简介一、线性插值二、三次样条插值三、B样条插值四、贝塞尔曲线插值总结 简介 常见用于处理路径平滑的插值算法主要包括线性插值、三次样条插值、B样条插值和贝塞尔曲线插值等&#xff0c;下面分别介绍它们的优缺点和使用场景。 一、线性插值 线性插值是最简单的插值…

【主流Chat模型的申请入口和方法】

主流Chat模型的申请入口和方法 一、申请New Bing二、申请内测文心一言三、申请内测Claude四、谷歌家的Bard五、Adobe Firefly六、GitHub Copilot chat七、通义千问八、360智脑 一、申请New Bing 注册一个 outlook 邮箱&#xff0c;很简单&#xff0c;2分钟就可搞定&#xff5e…

操作系统(2.7)--进程

目录 一、进程的引入 1.进程的两个基本属性 2.程序并发执行所需付出的时空开销 3.线程---作为调度和分派的基本单位 二、线程(轻型进程)与进程(重型进程)的比较 1&#xff09;调度的基本单位 2&#xff09;并发性 3&#xff09;拥有资源 4&#xff09;独立性 5&#…

离线数仓的数仓分层

数据仓库分层的作用 数据结构化更清晰&#xff1a; 对于不同层级的数据&#xff0c;他们作用域不相同&#xff0c;每一个数据分层都有它的作用域&#xff0c;这样我们在使用表的时候能更方便地定位和理解。 数据血缘追踪&#xff1a; 提供给外界使用的是一张业务表&#xf…

Material Design:为你的 Android 应用提供精美的 UI 体验

Material Design&#xff1a;为你的 Android 应用提供精美的 UI 体验 介绍 Material Design 概念&#xff1a;介绍 Material Design 是 Google 推出的一种设计语言&#xff0c;用于创建现代、美观、直观且一致的用户界面。解释 Material Design 的基本原则&#xff0c;包括材料…

9、MachO简介

一、MachO文件 MachO其实是Mach Object文件格式的缩写,是Mac以及iOS上可执行文件的格式,类似于windows上的PE格式(Portable Executable), linux上的elf格式(Executable and Linking Format) 二、MachO文件结构 Mach-O为Mach Object文件格式的缩写,它是一种用于可执行文件、目…

fileclude(文件包含漏洞及php://input、php://filter的使用)

先介绍一些知识 1、文件包含漏洞 和SQL注入等攻击方式一样&#xff0c;文件包含漏洞也是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行。 什么叫包含呢&#xff1f;以PHP为例&#xff0c;我们常常把可重复使用的函数写…