专栏【前端易错合集】
喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。
音乐分享【如愿】
大一同学小吉，欢迎并且感谢大家指出我的问题
目录
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())
在窗口出现弹窗
Document alert("这是一个JavaScript例子");
document.write(“这是一个JavaScript例子”);
把文本信息显示在桌面上
Document document.write("这是一个JavaScript例子");
console.log(“这是一个JavaScript例子”);
把信息显示在控制台上
Document console.log("这是一个JavaScript例子"); 
document.getElementById(“d1″).innerHTML=”这是一个JavaScript例子”;
获取界面的id=”d1″的元素，使其 显示在桌面上
注意：document.getElementById(“d1”)是获取id对象
Document document.getElementById("d1").innerHTML="这是一个JavaScript例子";
⭐注意，下面这种情况会没有上面的效果
因为是要获取id=”d1″的HTML元素，但是在执行语句时，该元素还没有加载，所以就不会显示
在HTML里面内嵌JavaScript
Document console.log("这是一个JavaScript例子"); 今后大家一起学习JavaScript知识
点击该字符后，会触发onclick事件，从而调用其中的JavaScript代码
⭐注意
‘这是一个JavaScript例子’，为什么要用单引号，而不是双引号呢
因为，JavaScript里面的字符串是用单引号或双引号括起来的一个或多个字符，但是当外面有双引号时，里面的字符串只能用单引号括起来，反之亦然
函数
如果有多条语句，代码会写的很长，写在网页标记就回很乱，这时就可以把这些代码封装成一个函数，然后进行调用
通常把函数定义放在网页头部，以保证被调用时已经加载
Document function fun(){alert("这是一个JavaScript例子"); } 今后大家将一起学习JavaScript知识
链接样式引用
有时需要在若干个页面中运行相同的js代码，为了避免重复和方便修改，通常将js代码放在外部的JavaScript文件中（以.js为后缀）
⭐基本格式
URL是说明外部JavaScript文件的位置，其含义是将外部JavaScript文件内容导入HTML文件的该位置
js_1.js
function fun(){alert("这是一个JavaScript例子");}html
Document alert("这是一个JavaScript例子");今后大家将一起学习JavaScript知识
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语句根据不同的时间，在网页上面显示不同的时间
根据现在的时间来显示
Document var d=new Date();var time=d.getHours();if(time<10){ document.write("Good morning");}else if(time>10&&time<16){ document.write("Good day");}else{ document.write("Hello World");}⭐动态表格
【JavaScript】动态表格_js动态表格_在下小吉.的博客-CSDN博客
⭐结构表现和行为
Document .c0{color: red;} .c1{color: green;text-align:center;} 红色 绿色并居中 我要努力学好网页设计
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; } } } 
按下第一个后
按下第二个后
分析
为什么代码里面的function没有被调用，但是仍然能够执行呢
在这段代码中，function()确实没有被直接调用。它是在单选框元素的onclick事件发生时才会执行。
具体来说，这里使用了匿名函数定义方式，将一个函数作为事件处理函数传递给input[i].onclick属性。这个函数没有名字，因此称之为匿名函数。
if(input[i].checked == true){ h1.className = ‘c’+i; }
在事件处理函数内部，使用if条件判断语句判断当前单选框元素是否被选中。如果被选中，则执行h1.className = 'c'+i，将标题的样式类名更改为c0或c1，从而改变标题的字体颜色或对齐方式。
⭐全选效果
全选效果 td{ text-align:center; font-size:13px; line-height:25px; } 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; } } } 全选 商品名称 价格（元） 网页设计 28 CSS + DIV布局 28 JavaScript程序设计 28
按下全选键后
⭐为下拉列表添加元素
方法一
Document 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);}}
方法二
Document fieldset{padding: 20px;width: 200px;margin: 0 auto;}#fromStation{width: 100px;}#stationList{margin-left: 72px;width: 104px;display: none;}function showSelect(){document.getElementById("stationList").style.display="block";}function setText(selectobj,textId){document.getElementById(textId).value=selectobj.options[selectobj.selectedIndex].text;}
分析
ο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”
Document function hello() {alert("hello");}setTimeout(hello, 5000);⭐制作年历
制作年历 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;}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 += ""str += "" + y + "年" + m + "月 日 一 二 三 四 五 六 ";for (var d = 1; d <= max; d++) {//遍历该月份if (w && d == 1) { //该月的第一天不是星期天，则填充空格str += "" + d + " ";//设置日历的日期部分的框架if (w == 6 && d != max) str += " ";//如果是周六但不是该月最后一天，则换行else if (d == max) str += " "//该月最后一天w = (w + 1 > 6) " />";}return str;}
如果大家有不明白的地方，或者文章有问题，欢迎大家在评论区讨论，指正