【JavaScript】讲解JavaScript的基础知识并且配有案例讲解

news2024/11/6 23:28:57

🎊专栏【 前端易错合集】

🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。

🎆音乐分享【如愿】

大一同学小吉,欢迎并且感谢大家指出我的问题🥰

目录

🎁JavaScript嵌入网页的方式

🍔alert("这是一个JavaScript例子");     (或者window.alert())

🍔 document.write("这是一个JavaScript例子");  

🍔console.log("这是一个JavaScript例子");  

🍔document.getElementById("d1").innerHTML="这是一个JavaScript例子";  

 ⭐注意,下面这种情况会没有上面的效果

🍔在HTML里面内嵌JavaScript

⭐注意

🍔函数

​编辑🍔链接样式引用

⭐基本格式

🎁JavaScript对象

🍔语法格式

🍔引用对象的方法或属性的语法格式

🍔对象废除 

🎁练习

⭐创建一个HTML网页,使用if语句根据不同的时间,在网页上面显示不同的时间

⭐动态表格

⭐结构表现和行为

​编辑

🎈分析

⭐全选效果

 ⭐为下拉列表添加元素

🎈方法一

🎈方法二 

 🎈分析

⭐实现页面打开5秒后出现警示对话框“hello”

⭐制作年历 


 

🎁JavaScript嵌入网页的方式

🍔alert("这是一个JavaScript例子");     (或者window.alert())

在窗口出现弹窗 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("这是一个JavaScript例子");    
    </script>
</head>
<body>
</body>
</html>

🍔 document.write("这是一个JavaScript例子");  

把文本信息显示在桌面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("这是一个JavaScript例子");    
    </script>
</head>
<body>

</body>
</html>

🍔console.log("这是一个JavaScript例子");  

把信息显示在控制台上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       console.log("这是一个JavaScript例子");  
   </script>
</head>
<body>
    <h1 id="d1">
</body>
</html>

🍔document.getElementById("d1").innerHTML="这是一个JavaScript例子";  

获取界面的id="d1"的元素,使其  显示在桌面上

🎁注意:document.getElementById("d1")是获取 id对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h1 id="d1">
    <script>
         document.getElementById("d1").innerHTML="这是一个JavaScript例子";  
    </script>
</body>
</html>

 ⭐注意,下面这种情况会没有上面的效果

 因为是要获取id="d1"的HTML元素,但是在执行<script></script>语句时,该元素还没有加载,所以就不会显示

🍔在HTML里面内嵌JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       console.log("这是一个JavaScript例子");  
   </script>
</head>
<body>
    <h1 onclick="javascript:alert('这是一个JavaScript例子');">
        今后大家一起学习JavaScript知识
    </h1>
</body>
</html>

点击该字符后,会触发onclick事件,从而调用其中的JavaScript代码 

⭐注意

‘这是一个JavaScript例子’,为什么要用单引号,而不是双引号呢

因为,JavaScript里面的字符串是用单引号或双引号括起来的一个或多个字符,但是当外面有双引号时,里面的字符串只能用单引号括起来,反之亦然

🍔函数

如果有多条语句,代码会写的很长,写在网页标记就回很乱,这时就可以把这些代码封装成一个函数,然后进行调用

通常把函数定义放在网页头部,以保证被调用时已经加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
       function fun(){
        alert("这是一个JavaScript例子");
       }
   </script>
</head>
<body>
    <h1 onclick="fun()">
        今后大家将一起学习JavaScript知识
    </h1>
</body>
</html>

🍔链接样式引用

有时需要在若干个页面中运行相同的js代码,为了避免重复和方便修改,通常将js代码放在外部的JavaScript文件中(以.js为后缀

⭐基本格式

<script src="URL" type="text/javascript"></script>

URL是说明外部JavaScript文件的位置,其含义是将外部JavaScript文件内容导入HTML文件的该位置


js_1.js

function fun(){
    alert("这是一个JavaScript例子");
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js_1.js" type="text/javascript">
      alert("这是一个JavaScript例子");
       
   </script>
</head>
<body>
    <h1 onclick="fun();">
        今后大家将一起学习JavaScript知识
    </h1>
</body>
</html>

🎁JavaScript对象

🍔语法格式

var 引用变量 = new 对象类型名();

🍔引用对象的方法或属性的语法格式

引用变量 . 方法名([参数])

引用变量 . 属性

🍔例如

var today=new Date();
var prompt="今天是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月";
prompt=prompt+today.getDate()+"日";
document.write(prompt);

网页中每个标记在加载时,会自动创建对应类型的对象。通过document.getElementById()等方法来获取对象,然后修改网页对象的属性,达到动态控制网页的效果,例如

var obj1=document.getElementById("stationList");
obj1.style.display="block";

 也可以写成下面的链式操作

var obj1=document.getElementById("stationList").style.display="block";

🍔对象废除 

var today=new Date();
today=null;

🎁练习

⭐创建一个HTML网页,使用if语句根据不同的时间,在网页上面显示不同的时间

根据现在的时间来显示 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script type="text/javascript">

        var d=new Date();
        var time=d.getHours();

        if(time<10){
           document.write("<b>Good morning</b>");
        }
        else if(time>10&&time<16){
           document.write("<b>Good day</b>");
        }
        else{
           document.write("<b>Hello World</b>");
        }
      </script>
</body>
</html>


⭐动态表格

【JavaScript】动态表格_js动态表格_在下小吉.的博客-CSDN博客

⭐结构表现和行为

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="">
     <style>
         .c0{color: red;}
         .c1{color: green;text-align:center;}
     </style>
 </head>
 <body>
     <input type="radio" name="color">红色
     <input type="radio" name="color">绿色并居中
     <h1 class="">我要努力学好网页设计</h1>
 </body>
 <script>
     let h1 = document.querySelector("h1");
     let input = document.getElementsByName("color");
     for (let i=0;i<input.length;i++){
         input[i].onclick = function(){
             if(input[i].checked == true){
                 h1.className = 'c'+i;
             }
         }
     }
 </script>
 </html>

按下第一个后

按下第二个后

  

🎈分析

为什么代码里面的function没有被调用,但是仍然能够执行呢

在这段代码中,function()确实没有被直接调用。它是在单选框元素的onclick事件发生时才会执行。

具体来说,这里使用了匿名函数定义方式,将一个函数作为事件处理函数传递给input[i].onclick属性。这个函数没有名字,因此称之为匿名函数

if(input[i].checked == true){ h1.className = 'c'+i; }

在事件处理函数内部,使用if条件判断语句判断当前单选框元素是否被选中。如果被选中,则执行h1.className = 'c'+i,将标题的样式类名更改为c0c1,从而改变标题的字体颜色或对齐方式。

⭐全选效果

<!doctype html>
 <html>
 <head>
 <meta charset = "utf-8">
   <title>全选效果</title>
   <style type = "text/css">
     td{ text-align:center;
       font-size:13px;
       line-height:25px;
     }
   </style>
   <script type = "text/JavaScript">
     function check() {
       var oInput = document.getElementsByName("product");
       
       for ( var i = 0; i < oInput.length; i++ ) {
         if (document.getElementById("all").checked == true) {//all,实现全选
           oInput.item(i).checked = true;
           // oInput[i].checked = true; //这两种方法都可以
         }
         else {
           oInput[i].checked = false;
         }
       }
     }
   </script>
 </head>
 <body>
   <table border = "1" cellspacing = "0" cellpadding = "0"  width = "300px;" >
     <tr>
       <td><input  id = "all" type = "checkbox" value = "全选" onclick = "check();"/>全选</td>
       <td>商品名称</td>
       <td>价格(元)</td>
     </tr>
     <tr>
       <td><input name = "product" type = "checkbox" value = "1" /></td>
         <td>网页设计</td>
         <td>28</td>
       </tr>
     <tr>
       <td><input name = "product" type = "checkbox" value = "2" /></td>
       <td>CSS + DIV布局</td>
       <td>28</td>
     </tr>
     <tr>
       <td><input name = "product" type = "checkbox" value = "3" /></td>
       <td>JavaScript程序设计</td>
       <td>28</td>
     </tr>
   </table>
 </body>
 </html>
 

按下全选键后

 ⭐为下拉列表添加元素

🎈方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var citys=new Array('北京','上海','天津','重庆');
        window.onload=function(){   //匿名函数
            var obj1=document.getElementById("stationList");
            for(i=0;i<citys.length;i++)
            {
                var newoption=new Option(citys[i]);//创建一个新的option元素
                obj1.add(newoption);
            }
        }
    </script>
</head>
<body>
    <select id="stationList">
    </select>
</body>
</html>

🎈方法二 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset{
            padding: 20px;width: 200px;
            margin: 0 auto;
        }
        #fromStation{
            width: 100px;
        }
        #stationList{
            margin-left: 72px;width: 104px;
            display: none;
        }
    </style>
    <script type="text/javascript">
        function showSelect(){
            document.getElementById("stationList").style.display="block";
        }
        function setText(selectobj,textId){
            document.getElementById(textId).value=selectobj.options[selectobj.selectedIndex].text;
        }
    </script>
</head>
<body>
    <fieldset>
        <legend>余票查询</legend>
        出发地<input id="formStation" placeholder="简码/汉字" onclick="showSelect()"><br>
        <select id="stationList" size="5" onclick="setText(this,'formStation')">
            <option>北京</option>
            <option>上海</option>
            <option>天津</option>
            <option>重庆</option>
        </select>
    </fieldset>
</body>
</html>

 🎈分析

οnclick="setText(this,'formStation')为什么要传入formstation

在 JavaScript 中,可以通过document.getElementById()方法获取一个指定 ID 的 HTML 元素对象,并操作该元素属性或内容。因此,在代码中使用 document.getElementById(textId) 获取具有指定 ID 的文本框对象,然后通过对该文本框的value属性进行设置,在选中 option 元素时将其文本值自动填充到文本框中。

因此,代码中需要传入 setText() 函数的第二个参数 textId,指定要填充文本框的 ID,这里是formStation。具体来说,当用户选中一个 option 元素时,被调用的 setText() 函数会将这个 option 的文本内容填充到 ID 为 formStation 的文本框中,使得用户输入起来更加方便。

 document.getElementById("stationList").style.display="block";为什么要有这一段代码

这段代码的作用是将 ID 为 "stationList" 的下拉列表框显示出来。

具体来说,当用户在文本框中点击一次时,就会触发 showSelect() 函数。该函数会获取 ID 为"stationList" 的下拉列表框的对象,并将其 display 属性设置为 "block"使得该下拉列表框在网页上呈现出来(默认情况下,该下拉列表框的 display 属性为 "none",即不可见状态)。

⭐实现页面打开5秒后出现警示对话框“hello”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function hello() {
            alert("hello");
        }
        setTimeout(hello, 5000);
    </script>
</head>
<body>
</body>
</html>

⭐制作年历 

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

<head>
	<meta charset="UTF-8">
	<title>制作年历</title>
	<style>
		body {
			display: flex;
			flex-wrap: wrap;
		}

		table {
			width: 33.33%;
			padding: 15px 10px;
			box-sizing: border-box;
		}

		th {
			background-color: #0000ff;
			height: 30px;
		}

		td {
			background-color: pink;
			height: 20px;
			text-align: center;
		}
	</style>
	<script>
		var year = prompt("请输入年份:", "2022");
		document.write(calendar(year));
		function calendar(y) {
			// var w=new Date(y,0).getDay(); //获取指定年份1月1日是星期几
			var str = "";
			for (var m = 1; m <= 12; m++) {
				str += "<table>"
				str += "<tr><th colspan='7'>" + y + "年" + m + "月</th></tr>";	//日历最上面,合并单元格,起到居中的效果
				str += "<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"
				var max = new Date(y, m, 0).getDate();//获取每个月份有多少天 y:年 m:月 0:日
				var w = new Date(y, m - 1).getDay(); //获取每月1号的星期值  y:年 m:月  没有传入日,默认为1号

				str += "<tr>";
				for (var d = 1; d <= max; d++) {  //遍历该月份
					if (w && d == 1) {   //该月的第一天不是星期天,则填充空格
						str += "<td colspan=" + w + "></td>";
					}

					str += "<td>" + d + "</td>";			//设置日历的日期部分的框架
					if (w == 6 && d != max) str += "</tr><tr>";  //如果是周六但不是该月最后一天,则换行
					else if (d == max) str += "</tr>"    //该月最后一天

					w = (w + 1 > 6) ? 0 : w + 1;     //控制星期的值在0-6之间
				}
				str += "</table>";
			}
			return str;
		}
	</script>
</head>

<body></body>

</html>

🥰如果大家有不明白的地方,或者文章有问题,欢迎大家在评论区讨论,指正🥰

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

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

相关文章

LVS--DR集群部署

LVS--DR集群 一、DR模式原理二、实验 一、DR模式原理 原理&#xff1a;首先负载均衡器接收到客户的请求数据包时&#xff0c;根据调度算法决定将请求发送给哪个后端的真实服务器&#xff08;RS&#xff09;。然后负载均衡器就把客户端发送的请求数据包的目标MAC地址改成后端真…

PCI Express架构概述

目录 1. PCIe 总线概述 2. PCIe 拓扑结构 3. PCIe 分层结构 4. PCIe 事务层类型 5. PCIe 配置和地址空间 1. PCIe 总线概述 PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;是一种用于连接计算机内部硬件设备的高速串行总线。它是在PCI&#xff08…

在Windows 11 中安装和使用 WSL 2

文章目录 列出可安装的发行版/分发安装WSL 2常用命令显示帮助启动分发从powershell中退出分发关闭正在运行的分发立即终止所有正在运行的分发和 WSL 2轻型虚拟机。更新wsl 使用VSCode连接WSL设置代理换源WSL 与 Windows 11 共享文件导入、导出 WSL 发行版导出导入 安装Docker E…

Nacos架构与原理 - 总体架构

文章目录 Nacos 起源Nacos 定位Nacos 优势Nacos 生态Nacos 总体设计设计原则架构图用户层业务层内核层插件 小结 Nacos 起源 Nacos 在阿里巴巴起源于 2008 年五彩石项目&#xff08;完成微服务拆分和业务中台建设&#xff09;&#xff0c;成长于十年双十⼀的洪峰考验&#xff…

【大数据之路1】Hadoop 入门

1. Hadoop 入门 1. 大数据概述1. 大数据相关说明2. Hadoop 及大数据生态圈3. Hadoop 核心组件4. Hadoop 生态圈5. 集群安装模式6. Hadoop 运行模式7. Hadoop 工作流程8. Hadoop 的推行策略9. 知识点 2. Hadoop 启动与服务名1. Hadoop&#xff08;HDFS/YARN&#xff09;启动2. H…

区间预测 | MATLAB实现基于QRCNN-BiGRU卷积双向门控循环单元多变量时间序列区间预测

区间预测 | MATLAB实现基于QRCNN-BiGRU卷积双向门控循环单元多变量时间序列区间预测 目录 区间预测 | MATLAB实现基于QRCNN-BiGRU卷积双向门控循环单元多变量时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRCNN-BiGRU卷积神经…

数据结构4:二叉树

目录 1.树概念及结构 1.1树的概念 1.3树的表示 1.4树在实际中的运用&#xff08;表示文件系统的目录结构&#xff09; 2.二叉树的概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3特殊的二叉树&#xff1a; 2.4 二叉树的性质 2.5二叉树的存储结构 1.顺序结构 …

如何用 10 种策略改进 ChatGPT 的人工智能

你是否曾有过和AI机器人交互无果的经历&#xff1f;或许只是因为提示语的问题&#xff01;想要ChatGPT/Bard/Bing Chat等AI机器人更智能、回应更高效? 必须学会AI提示语技巧&#xff01;本文将深入解析如何用精准的语言编写提示&#xff0c;让您的AI聊天机器人更进一步。 为什…

从买卖股票入手谈谈DP Table

动态规划问题主要就是要明确dp函数定义、搞清楚状态以及状态转移方程 构建DP思路解析 状态 188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; 对于股票&#xff0c;我们每天有三种选择 > buy, sell, hold 限制条件有 > 天数限制&#xff08;n&…

Java关键字abstract详解

abstract 1.可以用来修饰&#xff1a;类、方法 2.具体的&#xff1a; abstract修饰类&#xff1a;抽象类 抽象类不能实例化 抽象类中一定有构造器&#xff0c;便于子类实例化时调用&#xff08;涉及&#xff1a;子类对象实例化的全过程&#xff09;。 开发中&#xff0c;都会提…

(转载)基于蚁群算法的旅行商问题(TSP)求解(matlab实现)

蚁群算法(ant colony algorithm,ACA)是由意大利学者M.Dorigo等人于20世纪90年代初提出的一种新的模拟进化算法&#xff0c;其真实地模拟了自然界蚂蚁群体的觅食行为。M.Dorigo等人将其用于解决旅行商问题(traveling salesman problem,TSP),并取得了较好的实验结果。 近年来&am…

论文精读 —— Invisible Backdoor Attack with Sample-Specific Triggers

文章目录 带有样本特定触发器的隐形后门攻击论文信息论文贡献理解性翻译摘要1. 引言2. 相关工作2.1. 后门攻击2.2. 后门防御 3. 深入了解现有防御4. 样本特定的后门攻击&#xff08;SSBA&#xff09;4.1. 威胁模型4.2. 提出的攻击如何生成样本特定的触发器样本特定的后门攻击流…

linux学习之top命令详解

参考文章 https://blog.csdn.net/langzi6/article/details/124805024 top ​ 第一行&#xff1a;运行时长&#xff0c;负载 top - 10:04:54 up 474 days, 22:16, 2 users, load average: 2.07, 1.60, 0.94 top - 10:04:54&#xff1a;当前时间。 up 474 days, 22:16&#…

redis与分布式锁浅谈

redis与分布式锁浅谈 1.高并发下缓存失效问题 1.1 缓存穿透&#xff1a; 缓存穿透&#xff1a;指查询一个一定不存在的数据&#xff0c;由于缓存是不命中&#xff0c;将去查询数据库&#xff0c;但是数据库也无此记录&#xff0c;我们没有将这次查询的null写入缓存&#xff0…

windows禁用输入法

Rime 呼出菜单的快捷键 ctrl grave 跟 vs code 呼出底部命令行的快捷键冲突了&#xff0c;每次用 vs code 时都会用 ctrl space 将输入法禁用&#xff0c;让它变成一个圈叉&#xff1a; 由 [1]&#xff0c;这个快捷键是 windows 系统禁用输入法的快捷键&#xff0c;在 Setti…

实战干货——教你用Fiddler捕获HTTPS请求

目录 安装Fiddler 配置Fiddler 配置手机 iOS机安装证书 安全思考&#xff1f; 总结&#xff1a; 安装Fiddler 这里不特别说明了&#xff0c;网上搜索一大把&#xff0c;根据安装引导一步步安装即可。&#xff08;这里采用的是fiddler v4.6&#xff09; fiddler抓包视频教…

深入理解Linux虚拟内存管理(六)

系列文章目录 Linux 内核设计与实现 深入理解 Linux 内核&#xff08;一&#xff09; 深入理解 Linux 内核&#xff08;二&#xff09; Linux 设备驱动程序&#xff08;一&#xff09; Linux 设备驱动程序&#xff08;二&#xff09; Linux 设备驱动程序&#xff08;三&#xf…

奇安信应急响应-Windows

处置思路方法和Linux是一致的&#xff0c; 系统命令&#xff0c; 有一些整蛊的就会锁定你&#xff0c;不让你用鼠标点击&#xff0c;就通过命令其打开就好 findstr命令跟linux一样查找关键字&#xff0c;图中就是hello关键字&#xff0c;然后.txt的文件&#xff0c; 我们可以…

(1)HTTP与RPC区别

定义 HTTP接口使用基于HTTP协议的URL传参调用RPC接口则基于远程过程调用 http是一种协议 &#xff0c;rpc是一种方法 RPC RPC服务基本架构包含了四个核心的组件&#xff0c;分别是Client、Server、Clent Stub以及Server Stub。 Client &#xff08;客户端&#xff09;&am…

【数据可视化】2D/3D动画

## 2D动画 - transform ◼ CSS3 transform属性允许你旋转&#xff0c;缩放&#xff0c;倾斜或平移给定元素。 ◼ Transform是形变的意思(通常也叫变换)&#xff0c;transformer就是变形金刚 ◼ 常见的函数transform function有: ---- 平移:translate(x, y) ---- 缩放:scale…