我们进入更复杂的主题之前,我们本周回来探索Web开发的基本元素。本周焦点是JavaScript。如果你还没有检查出我的以前的博客为Web开发的三连胜,请查看我的博客文章在HTML和CSS。
JavaScript:曾经令人担忧的技术现在(并且已经有一段时间了)是事实上的开发选择。它允许您在网页上编写动态行为。
JavaScript是我们稍后将要探讨的常用框架的基础。它是MEAN堆栈的基础 - 当今Web开发的标准。MEAN代表M:MongoDB(后端/数据库),E:Express(易于在HTTP后端使用Node.js模块),A:Angular(页面结构的前端框架)和N:Node.js 。我们将在未来几周内探索Node.js!
但在涵盖所有性感内容之前,让我们了解JavaScript的基础知识以及它如何与页面交互。JavaScript(或从此以后的JS)允许我们操纵DOM(文档对象模型)。DOM帮助我们理解HTML页面上的内容(因为HTML是一个文档)。它将HTML页面分解成节点,我们可以使用JS等其他语言轻松理解节点。
为了向你展示一个例子,让我们在页面上添加一些带有一些JS的按钮。打开你的index.html文件。
在您的个人资料链接下,我们定义一个新的按钮标签。
Load the picture
也许添加一对断线() - 这相当于在word文档上敲击回车键。这是一个不好的造型习惯,但是对于初学者来说,这将是没问题的,因为当我们在接下来的几周谈论Bootstrap时我们会解决它。
保存您的更改,然后在浏览器中打开index.htm文件。
这将在您的页面上创建一个新的按钮元素。
如果你点击这个按钮,它将不会执行任何操作。让我们改变它!这是你添加一个小JS的地方。我们可以定义“ onclick ”事件属性。事件属性允许我们在元素与之交互时触发JavaScript代码。例如,onclick按钮时触发......等待它......点击!
操纵DOM的另一个关键部分是ID。所有标签都应该有ID。这使他们可以通过他们的ID进入。
让我们在我们的按钮下面定义一个占位符图像标签(),但一定要给它一个ID!
<img id="myImage">
现在我们可以通过ID myImage来访问这个元素。
在该按钮中,将onclick属性添加到按钮打开标记。所述的onclick值将是一个小的脚本,将更新的值SRC为属性图像元素。我们可以通过引用其ID 来访问img标签,然后我们可以设置src值。要为JS中的属性赋值,我们使用一个equals(=)。使用多个equals是一个等价操作符,我们将在一分钟内完成。
目前,着眼于将图像域的源属性设置为图片。我使用了JS标志的在线图像。
document.getElementById('myImage').src='http://www.hmttv.cn/uploadfile/2024/1012/20241012051842346.png'
所以你的按钮应该看起来像这样:
<button onclick="document.getElementById('myImage').src='http://www.hmttv.cn/uploadfile/2024/1012/20241012051842346.png'">Load the picture</button>
保存您的更改,然后在浏览器中打开index.html文件。
你将有一个按钮,你现在可以采取行动。点击按钮,你的图片将加载到你的按钮旁边。
如果我们希望能够重用它,我们也可以将JS移出元素定义。
在您的目录中创建一个新的script.js文件。
我们来定义一个新的函数。这样,如果需要,多个元素可以访问它。函数用于包含调用时应执行的代码块。当一个函数被调用时,只有该函数块内的代码才会被执行。
在新的script.js文件中定义一个空白函数。
function onPictureButtonClicked() {
}
给你的函数命名是一个好主意,所以很容易理解它们的功能。
现在,将onclick 属性中的代码复制 到您的新函数中。
function onPictureButtonClicked(){
document.getElementById('myImage').src='http://www.hmttv.cn/uploadfile/2024/1012/20241012051842346.png';
}
保存对script.js文件的更改。
要在index.html文件中使用这个新函数,我们需要添加一个对文件的引用(类似于我们对CSS样式表的操作),然后在onclick 属性中调用该函数 。
为了告诉index.html文件它可以引用script.js文件中的JS代码,我们在头文件中定义一个标签。src是script.js。
<script src="script.js"></script>
这让我们的页面知道可引用的JS可以在这个文件中找到。
最后,更新按钮。在按钮定义中,删除以前的代码并将其替换为 onPictureButtonClicked()。这将为该onclick 事件分配该功能 。
保存您的更改。你的页面的行为将是相同的。在我们继续之前对它进行测试,但是与网页没有明显区别。
现在让我们说我们想要改变这个动作,这个图像是否已经加载?
我们可以让JS为我们完成这项工作,但在我们完成JavaScript代码之前,我们需要对HTML进行一些调整。还记得我说身份证重要吗?好吧,我们忘了在我们的按钮上添加一个,所以让我们来添加一个!
<button id="pictureButton" onclick="onPictureButtonClicked()">
我们要确保按钮始终反映我们正在采取的操作,因此我们需要在更改功能时更新文本。
保存您的更改,然后回顾script.js文件。
在你的 onPictureButtonClicked 功能中,我们需要做一些改变。
首先,我们保存src属性值的副本。我们需要多次引用它,所以将它定义为一个变量并在我们需要该值时使用该变量会更容易。
我们可以通过使用var和名称来创建一个变量。在你的函数定义下面定义这个权利(所以这是你函数的第一行)。
var imageSrc=document.getElementById('myImage').src;
现在无论何时我们需要调用函数时图像src的初始状态,我们都可以引用imageSrc。
让我们根据src的当前值采取行动。如果什么都没有,让我们加载一个图像。如果有图像,让我们删除图像。
你看我在前一段中如何使用ifs?JS符号与我们如何发声以及如果,然后声明英语非常相似。如果imageSrc为空,则设置一个值。
if(imageSrc=='') {
document.getElementById('myImage').src='http://www.hmttv.cn/uploadfile/2024/1012/20241012051842346.png';
}
这里我们使用了double equals(==)来做比较。这做了一个价值比较。JS中的最佳实践声明您应该使用三元组equals(===),因为它比较了值和类型,所以它们确实是等价的。这可能非常棘手,但对于空值非常重要,因为并非所有的空值都是相同的。
else {
document.getElementById('myImage').removeAttribute('src');
}
(注意:由于许多原因,包括可访问性,src是图像的必填字段,所以这也不是一个好习惯,这纯粹是为了演示目的。)
我之前提到,按钮应始终说明其预期的操作。如果我们的代码删除图像,“加载图像”是否有意义?不。所以我们需要解决这个问题。
您可以更新按钮文本,类似于我们如何更新图像的src元素,除了将使用的src属性之外 innerHTML。试一试!
你的script.js文件应该如下所示:
function onPictureButtonClicked(){
var imageSrc=document.getElementById('myImage').src;
if (imageSrc=='') {
document.getElementById('myImage').src='http://www.hmttv.cn/uploadfile/2024/1012/20241012051842346.png';
document.getElementById('pictureButton').innerHTML="Remove Picture";
} else {
document.getElementById('myImage').removeAttribute('src');
document.getElementById('pictureButton').innerHTML="Load Picture";
}
}
保存您的更改,然后在浏览器中打开index.html文件。
如果您点击该按钮,图像将加载并且按钮文字将变为“删除图像”。如果再次单击该按钮,它将删除图片并将按钮文本更改为加载图像。整齐!
这只是一个小小的入门知识,你可以用JavaScript做什么!如果我要涵盖所有内容,我想我会这样做3年以上!
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端开发-拖拽上传文件</title>
</head>
<body>
<script>
document.ondragover=(e)=> {
e.preventDefault()
}
document.ondrop=(e)=> {
e.preventDefault()
// 某些版本的 Firefox 无视 preventDefault
// 需要执行 stopImmediatePropagation 防止浏览器打开文件
e.stopImmediatePropagation()
const file=e.dataTransfer.files[0]
const img=new Image()
img.src=URL.createObjectURL(file)
document.body.appendChild(img)
console.log(file)
// 如何上传文件?
// 参见 https://www.toutiao.com/article/7298667864926536242/
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:400px; height:300px; background:#CCC; position:relative;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0)
{
l=0;
}
else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
{
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
{
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
</body>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。