anonymous的前端学习笔记(3)——JavaScript基础(1)

最新推荐文章于 2024-04-22 09:27:03 发布
最新推荐文章于 2024-04-22 09:27:03 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： # JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ycdxw_xx/article/details/105926713
版权

文章目录

JavaScript历史背景

  • 布兰登 • 艾奇(Brendan Eich，1961年~至今)，1995年在网景公司，发明的JavaScript。
  • 一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。
  • 同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

什么是JavaScript

JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

  • JavaScript被设计用来向HTML页面添加交互行为。
  • JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
  • JavaScript由数行可执行计算机代码组成。
  • JavaScript通常被直接嵌入HTML页面。
  • JavaScript是一种解释性语言(就是说代码执行不进行预编译)。

JavaScript的组成

  • 核心(ECMAscript)：语法，语句。
  • 文档对象模型(DOM)：document object model，操作文档中的元素和内容。
  • 浏览器对象模型(BOM)：浏览器对象。

JavaScript的作用

  • 使用JavaScript添加页面动画效果，提供用户操作体验。
  • 主要应用有：嵌入动态文本于HTML页面、对浏览器事件作出响应、读取HTML元素、验证提交数据、检测访客的浏览器信息等。

JavaScript的引入

在HTML文件中引入JavaScript有3种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。

  • 行内引入，在标签元素中引入js代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内引入js</title>
    <style>
        #div1 {
            background-color: red;
            width: 80px;
            height: 40px;
        }
    </style>
</head>
<body>
<div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div>
</body>
</html>

  • 内嵌式，在HTML文档中，通过<script>标签引入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入js的方式</title>
    <style>
        #div1 {
            background-color: red;
            width: 80px;
            height: 40px;
        }
    </style>
<!--    style标签只能放在head头部标签中，script标签即可以放在head头部标签中，也可以放在body标签中。-->
<!--    html页面加载顺序是从上往下开始加载的。所以当script标签(里边有对页面元素进行操作的代码)放在head头部中可能会出现，无法执行script标签内的代码的情况。-->
    <script type="text/javascript">
        alert("哈哈哈哈哈哈哈")
    </script>
</head>
<body>
<!--<div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div>-->
<div id="div1">哈哈哈</div>
</body>
</html>

  • 外联式，在HTML文档中，通过<script src="">标签引入xxx.js文件

    quote_js.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入js的方式</title>
    <style>
        #div1 {
            background-color: red;
            width: 80px;
            height: 40px;
        }
    </style>
    <!--    外联式引入js-->
    <script type="text/javascript" src="main.js"></script>
    <!--    style标签只能放在head头部标签中，script标签即可以放在head头部标签中，也可以放在body标签中。-->
    <!--    html页面加载顺序是从上往下开始加载的。所以当script标签(里边有对页面元素进行操作的代码)放在head头部中可能会出现，无法执行script标签内的代码的情况。-->
    <!--    <script type="text/javascript">-->
    <!--        alert("哈哈哈哈哈哈哈");-->
    <!--    </script>-->
</head>
<body>
<!--<div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div>-->
<div id="div1">哈哈哈</div>
</body>
</html>

    main.js

    alert("外联js");

基本语法

注释

通过添加注释来对JavaScript代码进行注释，增强代码可读性

  • 单行注释：以//开头
  • 多行注释：以/*开始，以*/结尾

变量命名规则

  • 必须以字母或下划线开头
  • 变量名不能包含空格等符号
  • 不能使用JavaScript关键字作为变量名，如：function
  • 变量名对大小写敏感，JavaScript严格区分大小写。
  • 小驼峰命名

变量声明

  • 必须使用var关键字来声明变量,JavaScript变量可以不声明，直接使用。默认值：undefined
    var name;
  • 声明变量并赋值
    //JavaScript是弱类型语言，即同一个变量可以存放不同类型的数据。(js在声明变量时不用指定变量的数据类型，这点跟Java不同。)
var name = "小花花";
var age = 21;
var gender;
// console.log()打印变量值到控制台
console.log("name:" + name);
console.log("age:" + age);
  • 同时声明多个变量并赋值
    //同时给多个变量赋值
var a = 10, b = 20, c = 30;
console.log(a, b, c);

数据类型

  • 数字类型
    var bookName = "疯狂Python讲义";
var price = 59.99;
console.log("《" + bookName + "》" + "售价" + price + "元");//输出：《疯狂Python讲义》售价59.99元
  • 字符串
    var bookName = "疯狂Python讲义";
var price = 59.99;
console.log("《" + bookName + "》" + "售价" + price + "元");//输出：《疯狂Python讲义》售价59.99元
  • 数组
    //类似于Python中的列表，通过下标进行取值
var myArrayList = Array(1, 2, 3, "哈哈哈");
console.log(myArrayList[0]);
console.log(myArrayList[1]);
console.log(myArrayList[2]);
console.log(myArrayList[3]);
//length返回数组的长度
console.log("myArrayList数组的长度为：" + myArrayList.length);//myArrayList数组的长度为：4
//push向数组末尾插入元素
myArrayList.push("Go");
console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go"]
myArrayList.push("Python", "Java");
console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go", "Python", "Java"]
//pop删除数组中最后一个元素并将被删除的元素返回
console.log(myArrayList.pop());//Java
console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go", "Python"]
console.log(myArrayList.pop());//Python
console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go"]
console.log(myArrayList.pop());//Go
console.log(myArrayList);//[1, 2, 3, "哈哈哈"]
  • null,类似于Python中的None
    //null：空类型，类似于Python中的None
var myHobby = null;
//变量已声明未赋值，此变量不是空类型，是undefined
var myHeight;
console.log("myHobby:" + myHobby + ", myHeight:" + myHeight);//myHobby:null, myHeight:undefined
  • undefined
    //null：空类型，类似于Python中的None
var myHobby = null;
//变量已声明未赋值，此变量不是空类型，是undefined
var myHeight;
console.log("myHobby:" + myHobby + ", myHeight:" + myHeight);//myHobby:null, myHeight:undefined
  • boolean
    var areYouOK = true;
var areWeOK = false;
console.log("areYouOK:" + areYouOK);//areYouOK:true
console.log("areWeOK:" + areWeOK);//areWeOK:false

运算符

  • 算术运算符：+(加), -(减), *(乘), /(除), %(取余)
  • 赋值运算符：=(赋值), +=(加等于), -=(减等于), *=(乘等于), /=(除等于), %=(取余等于)
  • 条件运算符：==(代表相等，比较的两个值内容相等即可，数据类型可以不一样), ===(代表严格相等:数据类型和值都相等), >, >=, <, <=, !=
  • 逻辑运算符：&&(并且), ||(或者), !(否)

条件语句

  • if ... else if ... else...语句
    var age = 21;
if (age > 21) {
    console.log("年龄大于21岁!");
} else if (age === 21) {
    console.log("年龄等于21岁!");
} else {
    console.log("年龄小于21岁!");
}
//输出：年龄等于21岁!
  • switch语句
    var a = 9, b = 7;
switch (a - b) {
    case 4:
        console.log(a + " - " + b + " = " + 4);
        break;
    case 2:
        console.log(a + " - " + b + " = " + 2);
        break;
    case 3:
        console.log(a + " - " + b + " = " + 3);
        break;
    default:
        console.log(a + " - " + b + " = 默认值");
        break;
}
//输出：9 - 7 = 2

循环

while循环

var a = 21;
while (a <= 30) {
    console.log(a);//输出：21到30
    a++;
}

for循环

for (var i = 1; i <= 10; i++) {
    console.log(i);//输出1到10
}

for in循环

  • for in循环遍历数组
    var myArray = Array("小花花", 21, "女", "打羽毛球");
for (j in myArray) {
    // console.log(j);//输出0到3，输出的是myArray数组的元素下标
    console.log(myArray[j]);//输出：小花花 21 女 打羽毛球
}
  • for in循环遍历对象
    var objA = {
    name: "小花花",
    age: 21,
    gender: "女",
    hobby: "旅行"
};
for (n in objA) {
    // console.log(n);//输出的是对象的属性：name age gender hobby
    console.log(objA[n]);//输出对象的属性值：小花花 21 女 旅行
}

函数

函数定义

定于本函数的关键字function,函数内的代码块包裹在花括号内

//函数定义 使用function关键字
function test() {
    console.log("这是一个函数!");
}

//函数调用
test();
//输出：这是一个函数!
函数参数
//函数定义 使用function关键字
function addition(a, b) {
    result = (a + b);
    console.log(a + " + " + b + " = " + result);
}

//函数调用
addition(100, 199);
//输出：100 + 199 = 299
函数返回值
//在使用return语句时，程序执行到return语句时会立刻终止，并返回函数的返回值
function addition(a, b) {
    result = (a + b);
    return result;
}

//函数调用
var res = addition(100, 199);
console.log("res = " + res);
//输出：res = 299

对象

创建对象

创建对象的两种方式

  • 方式一
    objA = new Object();
  • 方式二，类似于Python中的字典
    var objB = {};
对象属性
  • 对象的属性以键值对(name:value)的形式定义，属性由逗号分离。
    var objC = {name: "python", age: 21, gender: "男"};
  • 创建对象属性声明可以横跨多行
    var objD = {
    name: "小花花",
    age: "21",
    gender: "女"
};
操作对象的属性
var objC = {name: "小华华", age: 21, gender: "男"};
//获取objC对象的属性
console.log(objC.name);//小华华
console.log(objC["age"]);//21
console.log(objC);//{name: "小华华", age: 21, gender: "男"}
//修改objC对象的属性值
objC.name = "小刚刚";
console.log(objC);//{name: "小刚刚", age: 21, gender: "男"}
objC["age"] = 22;
console.log(objC);//{name: "小刚刚", age: 22, gender: "男"}
对象方法
//对象方法：对象方法是作为属性来存储的函数
var objD = {
    name: "小花花",
    age: "21",
    gender: "女",
    func: function (a, b) {
        alert("对象方法");
        this.name = "大花花";//this来修改了objD对象的name属性的值为"大花花"
        return a + b;
    }
};

res = objD.func(10, 15);
console.log(res);//25
console.log(objD);//{name: "大花花", age: "21", gender: "女", func: ƒ}

JS操作页面

DOM简介

通过HTML DOM可以访问JavaScript文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM被构造为对象的树。

HTML DOM树
在这里插入图片描述

节点树中的节点彼此拥有层级关系

  • 父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。

  • 如何改变HTML元素的内容(innerHTML)。
  • 如何改变HTML元素的样式(CSS)。
  • 如何对HTML DOM事件做出反应。
  • 如何添加或删除HTML元素。

获取页面标签

通常通过JavaScript操作HTML元素，可以使用内置的对象document的方法来找到标签。

test_js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作页面</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="div3">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<div class="div4">div4</div>
</body>
</html>
  • 通过id找到HTML元素(常用)。
    • document.getElementById();
    //等到页面全部加载完成后再执行
window.onload = function () {
    //通过id选择元素
    var div2 = document.getElementById("div2");
    div2.style.backgroundColor = 'red';
    div2.style.width = "50px";
    div2.style.height = "50px";
};
  • 通过标签名找到HTML元素
    • 获取出来的是列表
    • getElementsByTagName();
    //等到页面全部加载完成后再执行
window.onload = function () {
    //通过tagName标签名字来选择，返回的是选择集
    var div3_col = document.getElementsByTagName('li');
    console.log("div3_col:", div3_col);
    for (var j = 0; j < div3_col.length; j++) {
        if (j % 2 !== 0) {
            console.log(div3_col[j]);
            div3_col[j].style.backgroundColor = 'pink';
        }

    }
};
  • 通过class类名找到HTML元素(通过class查找HTML元素在IE5,6,7,8中无效)
    • 获取出来的是列表
    • getElementsByClassName();
    //等到页面全部加载完成后再执行
window.onload = function () {
    //通过class选择元素，返回的是选择集
    var div4_col = document.getElementsByClassName('div4');
    console.log("div4_col:", div4_col);//HTMLCollection [div.div4]
    var div4 = document.getElementsByClassName('div4')[0];
    div4.style.background = '#9297a2';
};

执行以上js代码后，在浏览器中test_js.html渲染效果如下
在这里插入图片描述

操作标签内容

innerHTML用来获取/替换HTML元素的内容。

  • 读取HTML元素内容
    var div1 = document.getElementsByClassName("div1")[0];
//输出被选择标签(div1)内的所有HTML内容
console.log(div1.innerHTML);
/*
div1.innerHTML输出：
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
</ul>
<h3>哈啊啊啊啊啊啊啊</h3>
 */
  • 只读取HTML元素文本
    var div1 = document.getElementsByClassName("div1")[0];
//只获取被选择标签(div1)内的HTML内容的文本
console.log(div1.innerText);
/*
div1.innerText输出：
li1
li2
li3
li4
li5
哈啊啊啊啊啊啊啊
 */
  • 替换HTML元素内容
    var div1 = document.getElementsByClassName("div1")[0];
//innerHTML修改被选择标签里的内容
div1.innerHTML = "<h1>人生苦短，Let's Go!</h1>";
//输出被选择标签(div1)内的所有HTML内容
console.log(div1.innerHTML);//console控制台输出：<h1>人生苦短，Let's Go!</h1>

代码示例

action_label_content.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签内容</title>
    <script src="action_label_content.js"></script>
</head>
<body>

<br>
<form action="">
    请输入：<input type="text" id="input1">
</form>
<br>
<div class="div1">
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
    <h3>哈啊啊啊啊啊啊啊</h3>

</div>
<a href="https:www.baidu.com" target="_blank" id="baidu1" class="baidu2">百度一下</a>

</body>
</html>

action_label_content.js

window.onload = function () {
    var div1 = document.getElementsByClassName("div1")[0];
    //输出被选择标签(div1)内的所有HTML内容
    console.log(div1.innerHTML);
    /*
    div1.innerHTML输出：
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
    <h3>哈啊啊啊啊啊啊啊</h3>
     */

    //只获取被选择标签(div1)内的HTML内容的文本
    console.log(div1.innerText);
    /*
    div1.innerText输出：
    li1
    li2
    li3
    li4
    li5
    哈啊啊啊啊啊啊啊
     */

    /**
     * innerHTML写入节点文本
     */
    //innerHTML修改被选择标签里的内容
    div1.innerHTML = "<h1>人生苦短，Let's Go!</h1>";
    //输出被选择标签(div1)内的所有HTML内容
    console.log(div1.innerHTML);//console控制台输出：<h1>人生苦短，Let's Go!</h1>
    //只获取被选择标签(div1)内的HTML内容的文本
    console.log(div1.innerText);//console控制台输出：人生苦短，Let's Go!
};

修改标签属性

html代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签内容</title>
    <script src="action_label_content.js"></script>
</head>
<body>

<br>
<form action="">
    请输入：<input type="text" id="input1">
</form>
<br>
<div class="div1">
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
    <h3 id="h3Id" class="h3Class">哈啊啊啊啊啊啊啊</h3>

</div>

<div class="div2">哈哈哈哈哈哈哈</div>

<a href="https:www.baidu.com" target="_blank" id="baidu1" class="baidu2">百度一下</a>


</body>
</html>

JavaScript代码示例

window.onload = function () {
    /**
     * 修改元素属性
     */
    var a = document.getElementById("baidu1");
    //将a标签的超链接`https:www.baidu.com`改为`https:www.jd.com`
    a["href"] = "https:www.jd.com";
    //将a标签的文本`百度一下`改为`点我跳转至京东`
    a["text"] = "点我跳转到京东";
    //修改a标签的class属性名(两种方式都可以修改)
    a["className"] = "a_CLASS";
    //操作Class的时候，需要将`class`修改为`className`
    a.className = "a_CLASS1";

    var input = document.getElementById("input1");
    //input文本输入框修改为密码输入框
    input.type = "password";
    /**
     * 修改元素CSS样式
     */
    var div2 = document.getElementsByClassName("div2")[0];
    div2.style.background = "pink";
    div2.style.width = "50%";
    div2.style["height"] = "100px";
}

onclick事件

onclick事件是指HTML元素绑定了点击事件，在前端页面只要点击了该HTML元素就会触发点击事件。

  • HTML行内标签绑定onclick事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签内容</title>
    <script src="action_label_content.js"></script>
</head>
<body>
<div class="div3" style="background-color: #1E90FF;width: 100px;height: 80px" οnclick=alert("你点击了div3")>div3</div>
</body>
</html>
  • HTML行内标签绑定onclick事件,onclick事件绑定需要调用的函数(函数需要声明在当前HTML页面的head中)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签内容</title>
    <script src="action_label_content.js"></script>
    <script>
        //定义一个函数，作为div4的onclick点击事件
        function myClick() {
            alert("你点击了div4!");
        }
    </script>
</head>
<body>
//给div定义一个onclick事件，触发该事件时，调用onclick绑定的函数
<div class="div4" style="background-color: chartreuse;width: 100px;height: 80px" onclick="myClick()">div4</div>
</body>
</html>
__anonymous
关注
专栏目录
深入理解 JavaScript 中的匿名函数
justjavac的专栏
04-12 308
本文源自知乎的一个提问：同样都是在运行时才能确定函数，为什么 b 是匿名函数？这个看似简单的问题，我在浏览器里捣鼓了一个多小时。而且好像发现了 FireFox/Chrome Devto...
现代 JavaScript 教程——ECMAscript基础知识
Tinkerbaby的博客
11-24 642
JavaScript基础知识 现代模式，“use strict” begin from ES5, 为了标识ES5的新特性 变量 我们可以使用 var、let 或 const 声明变量来存储数据。 let — 现代的变量声明方式。 var — 老旧的变量声明方式。一般情况下，我们不会再使用它。 const — 类似于 let，但是变量的值无法被修改。 用 const 声明的对象的值 能 被修改。 数据类型 JavaScript 中有八种基本的数据类型（译注：前七种为基本数据类型，也称为原始类型，而 obj
anonymous的前端学习笔记(1)——HTML基础(1)
个人博客：https://www.wenbin.org.cn/
05-05 748
域名解析 域名 – ip地址 – 220.181.38.149 https://220.181.38.149 – www.baidu.com – DNS解析 {‘www.baidu.com’:‘220.181.38.149’,} 请求和响应 请求:浏览器socket客户端给服务端发信息 响应:服务端socket给客户端回信息 标签 Html标签:超文本标记语言,就是标记用的. 必须是封...
anonymous的前端学习笔记(4)——jQuery入门及简单使用
个人博客：https://www.wenbin.org.cn/
05-10 567
文章目录jQuery的介绍和引用相关资源jQuery的引入jQuery选择器jQuery基本选择器代码示例页面效果选择同胞和父辈元素代码示例选择过滤完整代码示例jQuery操作样式 jQuery的介绍和引用 jQuery是目前使用最广泛的JavaScript函数库。 jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本浏览器，2.x、3.x系列放弃对低版本浏览器的支持。 目前使用最多的是1.x系列版本的jQuery。 相关资源 jQuery官方网站 从jQuery CDN下载jQue
anonymous的前端学习笔记(2)——CSS基础(1)
个人博客：https://www.wenbin.org.cn/
05-05 706
文章目录HTML基础知识回顾HTML标签分类标签封闭head标签body标签inputtableform表单imgaselect下拉框label标签textarea 文本输入框CSS基础css选择器基本选择器组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组伪类选择器伪元素选择器选择器的优先级css属性相关字体属性字体字体大小字体颜色子重,粗细颜色表示方式文字属性文字对齐文字装饰首行...
JS anonymous：匿名函数的使用
vue
03-21 5066
匿名函数： 1、在调试台console用debug调试，会显示一个anonymous，但你发现他是一个函数。 2、这个在w3school上也有,在下面连接页面搜索anonymous，可以看打网站给的两个相关例子，其中据说这个是actually an anonymous function，所以就叫做匿名函数。 这个没有名字的函数很多语言都有，就是先声明用的时候再赋值，其实函数也可以这样的，C，...
web前端期末大作业 基于HTML+CSS+JavaScript学生宿舍管理系统
HTML网页设计
08-04 2173
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
【JavaScript】序列动画
msmxsd的博客
04-08 1404
根据MDN网站学习记录笔记 异步JavaScript一、项目目标二、项目流程三、效果展示四、章节小结4.1 通用异步编程概念4.2 异步JavaScript简介4.2 如何使用Promises4.3 实现基于Promises的API4.4 介绍worker 一、项目目标 二、项目流程 三、效果展示 四、章节小结 4.1 通用异步编程概念 一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。 JavaScript一般来说是单线程的 即使有多个内核，也只能在单
C#之WebApi权限认证_学习笔记1
weixin_30599769的博客
01-23 2376
自己并不懂，在此先记录下来，留待以后学习... 正文 前言：最近，讨论到数据库安全的问题，于是就引出了WebApi服务没有加任何验证的问题。也就是说，任何人只要知道了接口的url，都能够模拟http请求去访问我们的服务接口，从而去增删改查数据库，这后果想想都恐怖。经过一番折腾，总算是加上了接口的身份认证，在此记录下，也给需要做身份认证的园友们提供参考。 WebApi系列文章 C#...
vue笔记总结
m0_64650428的博客
02-21 1137
hgjg
JavaScript 匿名函数（anonymous function）与闭包（closure）
01-19
引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现。闭包就是一个受到保护的变量空间，由内嵌函数生成。“保护变量”的思想在几乎所有的编程语言中都能看到。 先看下 JavaScript 作用域： JavaScript 具有函数级的作用域。这意味着，不能在函数外部访问定义在函数内部的变量。 JavaScript 的作用域又是词法性质的（lexically scoped）。这意味着，函数运行在定义它的作用域中，而不是在调用它的作用域中。这是 JavaScript 的一大特色，将在后面说明。 把这两个因素结合在一起，就能
JavaScript中匿名函数的作用和用法
Dontla的博客
03-05 2306
匿名函数可bai以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。 这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var b=10;
js 匿名函数_编写高质量箭头函数的5个最佳做法
weixin_39635648的博客
11-24 290
箭头功能值得流行。它的语法简洁明了，使用词法绑定绑定 this，它非常适合作为回调。在本文中，通过了解决学习5个最佳实践，以便我们可以从中学习更多箭头函数的知识，并从它身上获得更多的好处。1. 箭头函数名推断JS 中的箭头函数是匿名(anonymous)的:函数的name属性是''。(number=>number+1).name;//=>''在调试会话或调用堆栈分析期...
前端代码常见的安全缺陷（一）
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
04-22 2230
在使用标签中使用target属性，当值设置为“_blank”攻击者会针对`window.opener`API进行恶意行为的攻击，有可能导致钓鱼安全漏洞问题。例如，以下示例使用的`target`属性，但是没有设置`rel`属性。
JS anonymous：无名函数的使用
FeiChangWuRao的博客
04-09 4080
这个无名函数名字是我起的，起这个名字的原因有两条。原因一是在改前端代码的时候发现这个东西，在调试台console用debug调试，会显示一个anonymous，但你发现他是一个函数。原因二是，这个在w3school上也有,在下面连接页面搜索anonymous，可以看打网站给的两个相关例子，其中据说这个是actually an anonymous function，所以索性就叫它无名函数吧。 连接资...
weixin121作品集展示微信小程序+ssm.rar
09-13
所有源码，都可正常运行
weixin090体育资讯软件的实现+ssm.rar
最新发布
09-13
所有源码，都是可以运行起来的
JavaScript面向对象编程基础与C#结合解析
"面向对象编程在JavaScript中的应用及与C#的对比" JavaScript是一种广泛用于Web开发的动态脚本语言，其面向对象编程（OOP）的概念对于理解和利用像微软Ajax库这样的高级工具至关重要。尽管你可能作为ASP.NET开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值