网页布局的思路，以及前端开发三板斧之Javascript学习

最新推荐文章于 2025-05-19 17:23:59 发布

这个也呦名字

最新推荐文章于 2025-05-19 17:23:59 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42625189/article/details/96976472

本文分享了作者从模仿优秀网页样例开始，利用HTML和CSS进行网页布局的过程。介绍了如何使用Layui进行侧边框菜单设计，以及决定深入学习JavaScript的基础知识，包括其特性、基本使用方法、事件触发等，为后续网页开发奠定基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿着构思的布局

在这里插入图片描述
通过学习和模仿着网上优秀的网页样例，我利用Html和Css语言大概画出我希望的网页的样子，下面需要完成侧边框菜单的设计，通过网络知道了利用Layui可以做快捷的设计，Layui结合了Js，我还没有学习，因此打算先学习一下Js，学习之余继续完善网页。

Javascript简介

它是一种轻量级的脚本编程语言
可插入HTML页面的编程代码里面
脚本语言：解释语言，一个脚本通常是解释运行而非编译。从Script（解释的意思）也知道，通常以.exe的形式呈现，不需要编译，只需要执行就可以。对于代码的规范没那么严格，相比与Java：需要代码严格按照Java的规则去编写

Javascript的基本使用方法

首先，HTML的脚本语言必须放在< script>和< /scirpt >之间，< script>标签可以放在body和head部分。
通常把Javascript的函数放在head部或者body的底部，然后在body需要Javascript函数的时候根据函数名调用，这样比较简洁。
调用外部的Javascript，将脚本文件保存在本地，在script标签里面通过"src=xxx.js"来调用这个脚本文件，外部的脚本文件没有script标签。
例如下面这个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

//函数名是myFunction，函数体被放在头部，在按钮标签里面调用函数，使得具有demo这个id的标签变成：我的第一个。
//HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），例如：这相当于在按钮组件里面使用myFunction（）的函数，这样使用会使得**“这是一个标题”**覆盖整个网页。

function myFunction()
{
		document.write(<h1>这是一个标题</h1>)
}
<button onclick="myFunction()">点我</button>

Javascript输出，各种输出，可用于调试

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
看上一部分的使用方法
使用 innerHTML 写入到 HTML 元素。
通常和document.getElementById(id).innerHTML=" " 使用，document.getElementById顾名思义为通过id寻找元素然后通过inner来修改元素内容。
使用 console.log() 写入到浏览器的控制台。

下面说一下我学习的基本知识和其他语言不一样的地方

定义变量统一使用var关键字，可以定义数字，字符串，数组等都可以，其中定义数组有三种方法。
定义对象数组类型：通过下面的代码我们可以知道，对象是变量的容器

var person={lastname：John, id：4555；} ;  //定义一个数组名为person的对象数组，属性之间用","隔开，属性内部为":"
name=person.lastname;	 name=person["lastname"]							//访问数组里面的名字元素

同样申明变量的类型也是用new关键字，var a =new number;申明a为数字类型（数字类型包括整型，double型）
用对象的方法定义了一个函数，则此方法作为对象的属性存储。例如：

var person={
name:“小明”,
age:“18”,
like:function(){
return “喜欢打篮球,弹吉他”;
}
}
创建有返回值的函数时，不需要在申明函数的时候添加数据类型，并且在函数中出现return时，函数接下来会停止执行，你们并返回return的值。

function like（）{
		var x=4;
		return x;
}

关于变量的作用域也很容易理解：局部变量：在函数中通过var声明的变量。全局变量：在函数外通过var声明的变量。没有声明就使用的变量，默认为全局变量，无论这个变量是否在函数体里面。

JS事件

事件触发饿方式有两种：
1.在Html元素内部:<元素事件=“jsp代码”>,
2.外部：

<input id="test" type="button" value="提交"/>
<script>
window.onload = function(){
    var test = document.getElementById("test");   //获取元素的ID
    test.addEventListener("click",myfun2);   		//设置监听，当点击时触发myfun2函数，此时点击的触发为click，去掉了on
    test.addEventListener("click",myfun1);
}
function myfun1(){  
    alert("你好1");
}
function myfun2(){ 
    alert("你好2");
}
</script>

常见的触发事件有：
在这里插入图片描述