网页设计练习-JavaScript的学习
2023.12.17 JavaScript引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素事件JavaScript</title>
<script>
function alert1(){
alert("单击再次弹窗")
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="alert('单击弹窗')">
<input type="button" value="按钮2" onclick="alert1()">
<script>
document.write("单击以上按钮会有不同内容提示")
</script>
</body>
</html>//单击按钮1的效果
//单击按钮2的效果
知识点：
1、不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于：是否与服务器进行数据交互。或者简单来说，是否用到了后端技术（如PHP、JSP、ASP.NET）；
2、外部JavaScript：即把HTML代码和JavaScript代码单独放在不同文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码（可以再html文件中任何地方引入）；
<script src="文件路径（文件.js）"></script>3、内部JavaScript：即把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在<script></script>标签对内（script标签不是自闭合标签）；
<script>
......
</script>
//等价于
<script type="text/javascript">
.....
</script>4、元素事件JavaScript：即在元素的“事件属性”中直接编写JavaScript或调用函数；
<input type="button" value="按钮1" onclick="alert('单击弹窗')">5、方法
（1）document.write()：在页面输出一个内容。用<br>换行；
（2）alert()：弹出一个对话框。用\n换行；
2023.12.18 语法基础+流程控制
语法基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语法基础</title>
</head>
<body>
<script>
var a = 10;
var b = 20;
b = 30;
document.write(a+"<br>"+b+"<br>");
var c = 15 //变量声明
c = c + 1;
alert(c)
var num = 20 + 18;
var str1 = "我喜欢" + "这一年";
var str2 = "今年是" + 2023;
var str3 = "2023" + 2024;
document.write(num+"<br>"+str1+"<br>"+str2+"<br>"+str3+"<br>"); //加法运算符
var m = 10;
var n = 4;
var n1 = m+n;
var n2 = m-n;
var n3 = m*n;
var n4 = m/n;
var n5 = m%n; //取模
document.write("m+n="+n1+"<br>");
document.write("m-n="+n2+"<br>");
document.write("m*n="+n3+"<br>");
document.write("m/n="+n4+"<br>");
document.write("m%n="+n5+"<br>"); //运算符
</script>
</body>
</html>
知识点：
1、变量与常量
（1）变量由字母、下划线、$或数字组成，且开头不能是数字；
（2）变量不能是系统关键字和保留字，且区分大小写；
（3）所有JavaScript变量都是由var声明（var-全局变量；let-局部变量；counts-常量）；
语法：var 变量名 = 值；
（4）一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：
var DEBUG = 1；
2、数据类型
（1）基本数据类型有5种：数字（number）、字符串（string）、布尔值（boolean）、未定义值（undefined）和空值（null）；
（2）常见的引用数据类型有两种：数组、对象。
（3）对于一个字符串来说，一定要加上引号，单引号或双引号都可以；
3、运算符
（1）加法运算符：
数字 + 数字 = 数字；
字符串 + 字符串 = 字符串；
字符串 + 数字 = 字符串；
var num = 10 + 5; //num的值为15
var str = "从0到1" + "系列图书"; //str的值为"从0到1系列图书"
var str = "今年是" + 2023 //str的值为"今年是2023"（这是一个字符串）（2）自增运算符：（自减同理）
i++：使用i之后，再让i的值加上1；
++i：使用i之前，先让i的值加上1；
（3）比较运算符：
==：类型转换后比较值；
===：不会进行类型转换，类型不同，值相同也是false；
4、类型转换
（1）将字符串转换为数字
Number()；
parseInt()；（0/NaN/空串/null/undefined的值为false）
parseFloat()；
（2）数字转换为字符串
与空字符串相加；
toString()；
5、注释
（1）//单行注释；
（2）/*多行注释*/；
流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制</title>
</head>
<body>
<script> //3种循环输出1-100的和的方法
var n = 1;
var sum1 = 0;
while (n <= 100) //没有分号
{
sum1 = sum1 + n;
n = n + 1;
}
document.write("1+2+3+...+100=" + sum1 + "<br>" + "<hr>");
var m = 1;
var sum2 = 0;
do {
sum2 = sum2 + m;
m = m + 1;
} while (m <= 100);
document.write("1+2+3+...+100=" + sum2 + "<br>" + "<hr>");
var i = 1;
var sum3 = 0;
for (i = 1; i <= 100; i++) {
sum3 = sum3 + i;
}
document.write("1+2+3+...+100=" + sum3 + "<br>" + "<hr>");
</script>
<script> //循环方式输入菱形图案
for (var i = 1; i < 4; i++) {
for (var j = i; j < 4; j++) {
document.write("-");
}
for (var m = 1; m <= i * 2 - 1; m++) {
document.write("*");
}
document.write("<br/>");
}
for (var i = 1; i <= 4; i++) {
for (var j = 1; j < i; j++) {
document.write("-");
}
for (var m = i; m <= 8 - i; m++) {
document.write("*");
}
document.write("<br/>");
}
document.write("<hr>")
</script>
<script> //输出九九乘法表
var i = 0;
do {
i++;
var j = 0;
do {
j++;
document.write(i + " * " + j + " = " + i * j, " ")
}
while (j < i);
document.write("<br>");
}
while (i < 9);
</script>
</body>
</html>
2023.12.19 初识函数+获取元素
初识函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识函数</title>
</head>
<body>
<a href="javascript:a()">点击跳转</a>
<hr>
<input type="button" onclick="eventVisit()" value="请单击我！" >
<script> //全局变量和局部变量
var a = "大雾四起";
//a在主程序中定义，是全局变量，即在script标签对内都任何地方都可以用
function getMes() {
var b = a + "我在无人之处";
return b;
}
//b在函数getMes()中定义，有效范围只在函数中
//var str = b + "爱你"; 在页面上不会有显示，因为b是局部变量，函数外不可使用
var str = getMes() + "爱你";
//在函数内使用return语句，调用函数返回b的值，可以在函数外使用函数内的变量
document.write(str);
</script>
<script> //在超链接中调用函数
function a() {
alert("欢迎光临\n我的第一位观众")
}
</script>
<script> //在事件中调用函数
function eventVisit() {
alert("谢谢你！");
}
</script>
</body>
</html>
//点击“点击跳转”链接显示：
//单击“请单击我！”按钮显示：
知识点：
1、定义函数：var定义变量，function定义函数；
（1）没有返回值的函数，即函数执行完不会返回任何值；
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
}（2）有返回值的函数，函数执行完会返回一个供我们使用的返回值；（return语句）
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
return 返回值;
}2、调用函数
（1）直接调用（一般用于没有返回值的函数）；
函数名(实参1, 实参2, ... , 实参n);（2）在表达式用调用（一般使用函数的返回值作为一部分参与表达式的计算）；
function addSum(a,b)
{
var sum = a + b;
return sum;
} //定义函数addSum(a,b)
var n = addSum(1, 2) + 100;
//调用函数参与表达式计算n的值
document.write(n);（3）在超链接中调用（在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户点击超链接时，就会调用该函数）；
（4）在事件中调用（鼠标移动、鼠标单击等事件中调用）；
DOM基础-获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oInput = document.getElementsByName("subject");
for (var i = 0; i < oInput.length; i++) { //利用for循环选中所有复选框
oInput[i].checked = true;
}
document.title = "梦想是什么？"; //选择title元素
//document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
//设置网页body中的内容
var arr = ["网页设计", "java程序设计", "数据结构"];
var oLi1 = document.getElementById("list"); //id选择
var oLi2 = document.getElementsByTagName("li"); //标签名选择
for (var i = 0; i < oLi2.length; i++) {
oLi2[i].innerHTML = arr[i]; //设置li元素中的内容为对应下标的数组arr中的元素
}
var oLi3 = document.getElementsByClassName("li") //class选择
oLi3[1].style.color = "red"; //设置li类中第2个元素的颜色为红色
var oTable1 = document.querySelectorAll(".all") //获取所有class为all的元素，类数组
for (var n = 0; n < oTable1.length; n++) {
oTable1[n].style.color = "blue";
}
var oTable2 = document.querySelector("#selector tr:nth-child(2)") //选取id为selector的元素下的第2个元素
oTable2.style.color = "pink";
var oDiv = document.getElementById("div1");
oDiv.style.color = "green";
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="subject" value="网页设计">网页设计
<input type="checkbox" name="subject" value="java程序设计">java程序设计
<input type="checkbox" name="subject" value="数据结构">数据结构
</form>
<hr>
<ul id="list">
<li class="li"></li>
<li></li>
<li class="li"></li>
</ul>
<hr>
<table id="selector">
<tr>
<td class="all">网页设计</td>
</tr>
<tr>
<td>java程序设计</td>
</tr>
<tr>
<td class="all">数据结构</td>
</tr>
</table>
<hr>
<div id="div1">呵呵</div>
</body>
</html>
知识点：获取元素的6种方式
1、getElementById()：“get element by id（通过id来获取元素）”类似css中的id选择器；
document.getElementById("id名")2、getElementsByTagName()：“get elements by tag name（通过标签名来获取元素）”类似css中的元素选择器；
document. getElementsByTagName("标签名")3、getElementsByClassName()：“get elements by class name（通过类名来获取元素）”类似css中的class选择器；
document. getElementsByClassName("类名")4、querySelector()和querySelectorAll()
document.querySelector("选择器"); //对于id选择器更建议使用byid方法获取元素
document.querySelectorAll("选择器");
//#id名 .class名
document.querySelector("#main") //选择id为main的第一个元素
document.querySelector("#list li:nth-child(1)") //选择id为list的元素下的第1个元素
document.querySelectorAll("#list li") //选择id为list的元素下的所有li元素
document.querySelectorAll("input:checkbox") //获取页面上第1个复选框的值5、getElementsByName()：只用于表单元素，通过起name属性获取，一般只用于单选按钮和复选框；
document.getElementsByName("name名")6、document.title和document.body：选取页面中唯一的title元素和body元素；
7、使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了；
window.onload = function ()
{
……
}2023.12.20 HTML属性操作（对象属性）+css属性操作
DOM进阶-HTML对象属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput); //设置按钮的id、type和value属性值并将按钮添加到body中
//为按钮添加点击事件
oInput.onclick = function ()
{
alert(oInput.id); //获取按钮的id属性值
}
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true; //使用布尔变量flag来标识两种状态，使得两张图片可以来回切换
oBtn.onclick = function(){
if(flag){
oBtn.value = "熄灭";
oPic.src = "../img/on.gif"
flag = false;
} else {
oBtn.value = "点亮";
oPic.src = "../img/off.gif"
flag = true;
}
}
}
</script>
</head>
<body>
<img id="pic" src="../img/off.gif" >
<input id="btn" type="button" value="点亮">
<hr>
</body>
</html>
//单击“点亮”按钮
//单击“熄灭”按钮
//单击“提交”按钮
知识点：
1、获取html属性值；
obj.attr
//obj表示DOM对象(名)，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点。
//attr表示CSS属性名。驼峰型命名css属性名2、设置html属性值；
obj.attr = "值";DOM进阶-css属性操作
知识点：
1、获取css属性；
getComputedStyle(obj).attr
2、设置css属性；
（1）style对象：
obj.style.attr = "值";
//等价于
//obj.style["attr"] = "值"（2）cssText属性：
obj.style.cssText = "值";
//cssText的值是一个字符串
//这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如background-color应该写成background-color，而不是backgroundColor。
//例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";