2021-08-09打卡js笔记

Posted A牛仔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021-08-09打卡js笔记相关的知识，希望对你有一定的参考价值。

javascript笔记

学习JavaScript（一）通过W3School学习

js输出

1.使用 window.alert() 写入警告框
2.document.write() 写入 html 输出
3.innerHTML 写入 HTML 元素
4.console.log() 写入浏览器控制台

<p id="demo"></p>
 <button type="button" onclick="document.write(5 + 6)">试一试</button>
<script>
//输出
 document.getElementById("demo").innerHTML = 5 + 6;
 //弹框
 window.alert(5 + 6);
 //输出控制台，通过 F12查看
 console.log(5 + 6);
</script>

js语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

js语法

var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值
//实列
<p id="demo"></p>
<script>
var x, y;
x = 7;
y = 8;
document.getElementById("demo").innerHTML = x + y;
</script>

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
构造变量名称（唯一标识符）的通用规则是：
名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

JavaScript 算数运算符

一个简单的表格是这么创建的：

运算符描述
+加法
-减
*乘法
/除法
%取模（余数）
++递加
–递减

JavaScript 赋值运算符

运算符例子等同于
=x=yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 运算符</h1>

<p>对数字和字符串相加，会返回字符串。</p>

<p id="demo"></p>

<script>
var x = 7 + 8;
var y = "7" + 8;
var z = "Hello" + 7;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>

</body>
</html>

JavaScript 逻辑运算符 类型运算符 位运算符

1.逻辑运算符
&& 逻辑与
|| 逻辑或
! 逻辑非
2.类型运算符
typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。
3.位运算符

运算符描述例子等同于结果十进制
&与5 & 10101 & 000100011
或5 10101 000101015
~非~ 5~0101101010
^异或5 ^ 10101 ^ 000101004
<<零填充左位移5 << 10101 << 1101010
>>有符号右位移5 >> 10101 >> 100102
>>>零填充右位移5 >>> 10101 >>> 100102

第二行是"| " 或 ，‘|”因为表格原因显示不出来

JavaScript 数据类型

字符串值，数值，布尔值，数组，对象。

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 
//超大或超小的数值可以用科学计数法来写：
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

JavaScript 函数

函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行。
JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
一个具有注脚的文本。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数</h2>

<p>本例调用了一个执行计算的函数，然后返回结果：</p>

<p id="demo"></p>

<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
    return a * b;
}
</script>

</body>
</html>

JavaScript 对象

和Java中的面向对象一样的，举列在真实生活中，汽车是一个对象。

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法。
对象名.属性名

js事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onclick="this.innerHTML=Date()">时间是？</button>

</body>
</html>

onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

JavaScript 字符串

使用单引号或双引号：
var carname = “Porsche 911”;
var carname = ‘Porsche 911’;
字符串方法
1.length 属性返回字符串的长度：
2.indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
3.如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
4.lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。
5.检索字符串中的字符串search() 方法搜索特定值的字符串，并返回匹配的位置：
6.slice() 方法提取字符串的某个部分并在新字符串中返回被提取的部分。
7.substring() 方法substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
8.substr() 方法substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
9.替换字符串内容replace() 方法用另一个值替换在字符串中指定的值：
10.toUpperCase() 把字符串转换为大写：
11. toLowerCase() 把字符串转换为小写：
12. concat() 连接两个或多个字符串：
13. trim() 方法删除字符串两端的空白符：警告：Internet Explorer 8 或更低版本不支持 trim() 方法。
14. charAt() 方法返回字符串中指定下标（位置）的字符串：
15. charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
16. split() 将字符串转换为数组：

JavaScript 数组

数组用于在单一变量中存储多个值。和Java基本是一样的，数组是对象
数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
创建数组
var cars = [“Saab”, “Volvo”, “BMW”];或者 var cars = new Array(“Saab”, “Volvo”, “BMW”);是一样的
数组的方法，把数组转换为字符串
JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

pop() 方法从数组中删除最后一个元素：
join() 方法也可将所有数组元素结合为一个字符串。
push() 方法（在数组结尾处）向数组添加一个新的元素：
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，位移与弹出等同，但处理首个元素而不是最后一个。
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。
splice() 方法可用于向数组添加新项：
concat() 方法通过合并（连接）现有数组来创建一个新数组，concat() 方法也可以将值作为参数（将数组与值合并）。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。
slice() 方法用数组的某个片段切出新数组。
length 属性提供了向数组追加新元素的简易方法：
delete 运算符来删除：delete 数组[0];

JavaScript 数组排序

sort() 方法以字母顺序对数组进行排序，但是对数字排列不准确，通过一个比值函数来修正此问题

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>单击按钮以升序对数组进行排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
	//升序
  points.sort(function(a, b){return a - b});
  //降序
  //points.sort(function(a, b){return b - a}); 
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

JavaScript 数组迭代方法

forEach() 方法为每个数组元素调用一次函数（回调函数）。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.forEach()</h1>

<p>为每个元素调用一次函数。</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

JavaScript 获取日期方法

1.getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数：
var d = new Date();
document.getElementById(“demo”).innerHTML = d.getTime();
2.getFullYear() 方法以四位数字形式返回日期年份：
3.getMonth() 以数字（0-11）返回日期的月份：
4.getDate() 方法以数字（1-31）返回日期的日：
5.getHours() 方法以数字（0-23）返回日期的小时数：
6.getSeconds() 方法以数字（0-59）返回日期的秒数：
7.getMilliseconds() 方法以数字（0-999）返回日期的毫秒数：
8.getDay() 方法以数字（0-6）返回日期的星期名（weekday）：

以上是关于2021-08-09打卡js笔记的主要内容，如果未能解决你的问题，请参考以下文章

学习打卡07 可解释机器学习笔记之Shape+Lime代码实战

学习打卡07 可解释机器学习笔记之Shape+Lime代码实战

学习打卡07 可解释机器学习笔记之Shape+Lime代码实战

学习打卡05可解释机器学习笔记之CAM+Captum代码实战

学习打卡05可解释机器学习笔记之CAM+Captum代码实战

学习打卡05可解释机器学习笔记之CAM+Captum代码实战