前端学习笔记

于 2024-10-04 23:40:45 发布
阅读量517 收藏 14
点赞数 6
文章标签： 前端 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42978338/article/details/142499531
版权

文章目录

JavaScript基础

绘制三角形

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="test.js">
    </script>
  </body>
</html>

function print_triangel(n){
    for(var i = 1; i <= n; ++i){
        for(var j = 0; j < i; ++j){
            document.write("*");
        }
        document.write("<br>");
    }
}
do{
    var n = prompt("Input an Integer!");
    if(Number(n)<=0 || parseFloat(n)!=parseInt(n)){
        console.log(typeof(n));
        console.log(n); 
        alert("请输入正整数！");
    }else{
        print_triangel(n);
    }
    break;
}while(n);

JSON

JavaScript object notation

用来传输由属性值或者序列性的值组成的数据对象
没有方法只有属性的对象，其中属性必须用双引号包围

熟悉内建对象的属性与方法

输出格式化日期

function formatDate(d){
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();
    month = month<10?"0"+month:month;
    date = date<10?"0"+date:date;
    hour = hour<10?"0"+hour:hour;
    minute = minute<10?"0"+minute:minute;
    second = second<10?"0"+second:second;
    var res_part1=[year,month,date].join("/");
    var res_part2=[hour,minute,second].join(":");
    var res_final=[res_part1,res_part2].join(" ");
    console.log(res_final);
    "yyyy/MM/dd HH:mm:ss";
}
formatDate(new Date());

写一个函数去掉数组中的重复元素

function clearArray(a){
    var res = [];
    var existed = new Object();
    for(i in a){
        if(!existed[a[i]]){
            res.push(a[i]);
            existed[a[i]]=true;
        }
        // 低效但是使用buildin api
        // if(res.indexOf(a[i])==-1){
        //     res.push(a[i]);
        // }
    }
    return res;
}

写一个函数判断一个字符串中出现次数最多的字符，并统计这个字符出现的次数

function countChar(s){
    res = new Object();
    for (c in s){
        if(res[s[c]]){
            res[s[c]]++;
        }else{
            res[s[c]]=1;
        }
    }
    res_max=0;
    var res_char;
    for (k in res){
    	if(res_max<res[k]){
			res_max=res[k];
			res_char=k
		}
    }
    console.log(res_char+"出现次数最多，为"+res_max);
}

实现导航栏

来自蓝桥云课
来自蓝桥云课

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css">
    <title></title>
  </head>
  <body>
    <div id="menu">
      <ul id="list">
        <li><a>首页</a></li>
        <li><a>HTML</a></li>
        <li><a>CSS</a></li>
        <li><a>JavaScript</a></li>
        <li><a>关于</a></li>
        <li><a>帮助</a></li>
      </ul>      
    </div>
    <script src="test.js">
    </script>
  </body>
</html>

#list li {
    list-style-type: none;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background-color: beige;
    text-align: center;
    float: left;
}

#list li.current {
    background-color: red;
}

#list li {
    text-decoration: none;
}

function becomeRed(){
    var p = this.parentNode;
    for(var i=0; i< p.children.length;++i){
        var c = p.children[i];
        c.removeAttribute("class");
    }
    this.className="current";
}

var lis = document.getElementById("list").getElementsByTagName("li");
for(var i = 0; i < lis.length; ++i){
    lis[i].onclick=becomeRed;
    lis[i].firstElementChild.href="javascript:void(0)";
}

闭包

Closures “close over” their environment, meaning they remember the variables from the outside scope even after the function is returned or the scope has exited.

模拟私有变量

function createCounter() {
  let count = 0; // 这个变量是私有的，外部无法直接访问

  return {
    increment: function() {
      count += 1;
      return count;
    },
    decrement: function() {
      count -= 1;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const myCounter = createCounter();
console.log(myCounter.getCount());    // 输出: 0
console.log(myCounter.increment());   // 输出: 1
console.log(myCounter.increment());   // 输出: 2
console.log(myCounter.decrement());   // 输出: 1

创建变量

var let const

面向对象编程

函数进阶

HTML5

双标签（又称体标签）

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

单标签（又称空标签）

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

常用标签综合
在这里插入图片描述

h1 {
    text-align:center;
}

#slogan {
    text-align: center;
}

#first {
    background-color: pink;
    width: 500px;
    height: 300px;
}

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="first">
      <h1>实验楼学习教程</h1>
      <p id="slogan">学习就上<span><a href="https://www.lanqiao.cn/">实验楼</a></span></p>
      <hr />
      <p>在实验楼你可以学习的课程有：</p>
      <ul>
        <li>HTML5基础课程</li>
        <li>CSS基础课程</li>
        <li>Linux基础课程</li>
        <li>...</li>
      </ul>
    </div>
  </body>
</html>

课程表实验
在这里插入图片描述

<!doctype html>
<html>
    <head>
        <title>test</title>
        <meta charset='UTF-8'>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <table border="l" width="600px" height="150px" bgcolor="pink">
            <caption>课程表</caption>
            <tr align="center">
                <td colspan="4">时间\日期</td>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
            </tr>
            <tr align="center">
                <td rowspan="2">上午</td>
                <td colspan="3">9:30-10:15</td>               
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr align="center">
                <td colspan="3">10:25-11:10</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td colspan="9"> &nbsp; </td>
            </tr>
            <tr align="center">
                <td rowspan="2">下午</td>
                <td colspan="3">14:30-15:15</td>               
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr align="center">
                <td colspan="3">15:25-16:10</td>               
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
        </table>
    </body>
</html>

表单综合案例
在这里插入图片描述

<!doctype html>
<html>
    <head>
        <title>test</title>
        <meta charset='UTF-8'>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <form name="regist" method="post" action="#">
            <p>
            姓名：
                <input type="text" size="30" maxlength="5"></input>
            </p>
            <p>
            密码：
                <input type="password" size="30"></input>
            </p>
            <p>
            性别：
                <input type="radio" name="gender" value="male">男</input>
                <input type="radio" name="gender" value="female">女</input>
            </p>
            <p>
            爱好：
                <input type="checkbox" name="hobby" value="singing">唱歌</input>
                <input type="checkbox" name="hobby" value="running">跑步</input>
                <input type="checkbox" name="hobby" value="swiming">游泳</input>
            </p>
            <p>
            照片：
                <input type="file"> </input>
            </p>
            <p>
            个人描述：
                <textarea name="individual description" rows="3" cols="30"></textarea>
            </p>
            <p>
            籍贯：
            <select name="birthplace">
                <option value="成都">成都</option>
                <option value="广州">广州</option>
                <option value="杭州">杭州</option>
                <option value="武汉">武汉</option>
            </select>
            </p>
            <p>
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </p>
        </form>
    </body>
</html>

框架的使用

<!doctype html>
<html>
    <head>
        <title>test</title>
        <meta charset='UTF-8'>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <p>
            <a href="https://www.lanqiao.cn/" target="shiyanlou">实验楼</a>
        </p>
        <iframe 
            name="shiyanlou"
            width="400"
            height="400"
            frameborder="0">
        </iframe>
    </body>
</html>

HTML5图片拖放

<!doctype html>
<html>
    <head>
        <title>canvas</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="canvas.css" />
    </head>
<body>
    <p>请把图片拖到矩形框中</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img 
        id="drag1"
        src="drag-image.png"
        draggable="true"
        ondragstart="drag(event)"
    />
    <script src="canvas.js">
    </script>
</body>
</html>

#div1 {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid red;
}

function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

本地留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校园留言板</title>
    <link rel="stylesheet" href="webStorage.css"></link>
</head>
<body>
    <h1>简单Web留言本</h1>
    <textarea id="memo" rows="3" cols="60"></textarea>
    <br />
    <input type="button" value="新增留言" onclick="saveStorage('memo')">
    <input type="button" value="清空留言" onclick="clearStorage()">
    <input type="button" value="清除最后一个留言" onclick="clearSingleStorage()">
    <hr />
    <p id="msg"></p>
    <script src="index.js"></script>
</body>
</html>

function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().toUTCString();
    localStorage.setItem(time, data);
    showMsg("msg");
}

function showMsg(id){
    var result = '<table border="1">';
    for (var i = 0; i < localStorage.length; i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        result += "<tr><td>"+value+"</td><td>"+key+"</td></tr>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}

function clearStorage(){
    localStorage.clear();
    showMsg("msg");
}

function clearSingleStorage(){
    localStorage.removeItem(localStorage.key(localStorage.length-1));
    showMsg("msg");
}

showMsg("msg");

上传图片并显示预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件读取</title>
    <link rel="stylesheet" href="webStorage.css"></link>
</head>
<body>
    <input id="fileDemo" name="fileDemo" type="file" class="file" multiple />
    <input type="button" value="显示图片" id="readAsDataURL" onclick="showDataByURL();" />
    <input type="button" value="显示文本" id="readAsText" onclick="showDataByText();"/>
    <div id="result"></div>
    <script src="index.js"></script>
</body>
</html>

function showDataByURL(){
    var resultFile = document.getElementById("fileDemo").files[0];
    if (resultFile){
        var reader = new FileReader();
        reader.readAsDataURL(resultFile);
        reader.onload = function(e){
            var urlData = this.result;
            document.getElementById("result").innerHTML += "<img src='"+urlData+"' alt='"+resultFile.name+"'/>";
        }
    }
}

function showDataByText(){
    var resultFile = document.getElementById("fileDemo").files[0];
    if (resultFile){
        var reader = new FileReader();
        reader.readAsText(resultFile);
        reader.onload = function(e){
            var textData = this.result;
            document.getElementById("result").innerHTML += textData;
        }
    }
}

CSS3

GarveyMui
关注
整理的前端 学习笔记资料
08-14
通常，前端学习笔记会包括HTML、CSS、JavaScript这三个基础核心技术，以及相关的框架和库，如React、Vue、Angular等。还可能涉及前端工程化，如模块化、构建工具（Webpack、Gulp）、状态管理（Redux、Vuex）以及响应...
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
Web前端学习笔记
jusw123456的博客
10-19 2400
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
黑马前端学习笔记
qq_40437045的博客
03-10 1645
​​​​​​HTML第一天 一、网页 二、什么是HTML 三、HTML标签 CSS第一天 一、CSS 简介 二、 CSS 基础选择器 三、CSS 字体属性 四、CSS 文本属性 五、CSS 的引入方式 HTML第一天 网页 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页..
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3748
Web前端学习笔记（1）
前端学习笔记汇总
羚漆的博客
07-26 562
在这里对自己学习前端所作笔记进行一个汇总。
前端学习笔记总结
weixin_45268025的博客
03-18 1010
前端学习笔记 介绍 代码张 学习笔记–前端 、最后总结与2022-3-18。其中包含了近几个月的所有前端学习笔记： 笔记部分： 01-07：HTML、CSS、Scss、Js(ES5、ES6)、Node.js、Vue、React、微信小程序、uni-app等，这是对前端或深或浅的一个小总结。希望以后能够继续深入学习，向全栈方向不断深入。 笔记获取方式很简单：https://gitee.com/ilyang/typora-front-end-notes.git （这是我的Gitee开源仓库） 勉励： 努力的最
web前端学习笔记三
别不开心ovo
09-05 426
JavaScript
前端渡一教育的学习笔记
偷得浮生半日闲
09-24 995
如果你是一名前端开发，我相信你一定会刷到过的视频。看那些视频的案例老早就想自己也上手敲一遍了，但奈何总总原因，总觉得时间不充裕。在前不久狠下心来，决定把这些视频上的demo手写一遍，说干就干，于是就有了这个笔记的诞生，现在提薪课已经基本实现完了，准备到。看时间安排，有兴趣可以 star一下。每个案例写有对应的视频链接。
前端学习笔记202311学习笔记第一百叁拾壹天-props详解之2
qq_41632427的博客
01-17 396
前端
前端学习笔记-循环语句
梧桐野老的博客
03-25 1567
循环语句 一、while语句 while(条件){ 执行代码 自身改变条件 } 例： var num = 0 while (num<5){ console.log(num); num++ } 二、do-while语句 do{ 执行代码 自身改变条件 }while(条件) 例： var num = 0 do{ console.log(num); num++
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端学习笔记(精华总结）.zip
11-14
前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习...
前端学习笔记（不断更新中）
01-08
1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 ..._parent：在父框架中打开被链接文档 3.input标签中的require：将文本输入框...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1000
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
最新发布
qq_33546823的博客
10-03 908
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 562
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
2303_81204446的博客
09-30 343
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. CSS样式： - 学习如何使用CSS来为网页添加样式 - 掌握CSS选择器和属性 - 学习如何设置文字样式、颜色、背景、布局等 3. JavaScript基础： - 理解JavaScript的基本概念和语法 - 学习如何操作DOM元素，实现网页交互 - 掌握常用的JavaScript函数和事件处理 4. 响应式设计： - 学习如何使用媒体查询和弹性布局创建响应式网页 - 掌握移动优先设计和流体网格布局 5. 前端框架和工具： - 了解流行的前端框架，如React、Angular、Vue等 - 学习使用前端构建工具，如Webpack、Gulp等 - 掌握前端调试工具和浏览器开发者工具的使用 这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值