预习博客（JS基础语法）

最新推荐文章于 2022-08-08 22:06:36 发布

散落于尘埃

最新推荐文章于 2022-08-08 22:06:36 发布

阅读量104

点赞数 1

本文链接：https://blog.csdn.net/m0_56018900/article/details/116563750

版权

文章目录

前端
一、JavaScript
- （1）JS简介
- （2）JS的使用
二、JS基本语法

前端

一、JavaScript

JavaScript 是属于 HTML 和 Web 的编程语言。
对网页行为进行编程

（1）JS简介

JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

示例

document.getElementById("demo").innerHTML = "Hello JavaScript";

注：JavaScript 同时接受双引号和单引号：

document.getElementById("demo").innerHTML = 'Hello JavaScript';

JavaScript 能够改变 HTML 属性
本例通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能做什么？</h2>

<p>JavaScript 能够改变 HTML 属性值。</p>

<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

</body>
</html>

JavaScript 能够改变 HTML 样式
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 /显示HTML 元素
可通过改变 display 样式来隐藏/显示 HTML 元素

document.getElementById("demo").style.display="none";  //隐藏

document.getElementById("demo").style.display="block";  //显示

（2）JS的使用

<script> 标签
在 HTML 中，JavaScript 代码必须位于<script> 与 </script> 标签之间。
注：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的部分。

该函数会在按钮被点击时调用：
示例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

在这里插入图片描述

<body> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的部分。

该函数会在按钮被点击时调用：

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

在这里插入图片描述

注：把脚本置于<body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
• 分离了 HTML 和代码
• 使 HTML 和 JavaScript 更易于阅读和维护
• 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
示例

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

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

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

在这里插入图片描述
注：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()
出于测试目的，使用 document.write() 比较方便：
示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

注：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

在这里插入图片描述

使用 window.alert()
您能够使用警告框来显示数据：
示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

在这里插入图片描述

使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
示例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

在这里插入图片描述

二、JS基本语法

（1）变量

JavaScript 变量
JavaScript 变量是存储数据值的容器。
示例

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>在本例中，x、y 以及 z 都是变量。</p>

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

<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML =
"z 的值是：" + z;
</script>

</body>

在这里插入图片描述

类似代数

在编程中，类似代数，使用变量（比如 price1）来存放值。
在编程中，类似代数，在表达式中使用变量（total = price1 + price2）。
注：JavaScript 变量是存储数据值的容器。

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

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

赋值运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。
在 JavaScript 中，把 x + 5 的值赋给 x。
（计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）
注：JavaScript 中的“等于”运算符是 ==。

（2）数据类型

字符串值，数值，布尔值，数组，对象
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

字符串

JavaScript 字符串用于存储和操作文本。
JavaScript 字符串是引号中的零个或多个字符，能够使用单引号或双引号，不匹配围绕字符串的引号

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 字符串</h2>

<p>可以在字符串中使用引号，只要不匹配围绕字符串的引号即可：</p>

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

<script>

var answer1 = "It's good to see you again!";
var answer2 = "He is called 'Bill'";
var answer3 = 'He is called "Bill"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>
</body>
</html>

字符串长度
内建属性 length 可返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符
反斜杠转义字符把特殊字符转换为字符串字符：
在这里插入图片描述
转义字符（\）也可用于在字符串中插入其他特殊字符。
其他六个 JavaScript 中有效的转义序列：

数值

JavaScript 只有一种数值类型。
写数值时用不用小数点均可：

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来写：

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

布尔值

布尔值只有两个值：true 或 false。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>布尔值只有两个值：true 或 false。</p>

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

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

</body>
</html>

数组

JavaScript 数组用于在单一变量中存储多个值。
数组是一种特殊的变量，它能够一次存放一个以上的值。
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。
创建数组

var array-name = [item1, item2, …];

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

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

<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

对象

对象属性
JavaScript 对象中的名称:值对被称为属性。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

在这里插入图片描述

对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法是作为属性来存储的函数。
在这里插入图片描述

this 关键词
JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

对象定义
定义（创建）一个 JavaScript 对象：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

访问对象方法
您能够通过如下语法访问对象方法

objectName.methodName()

函数

JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, …)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}

函数参数（Function parameters）是在函数定义中所列的名称。
函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
在函数中，参数是局部变量。
在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

函数调用
函数中的代码将在其他代码调用该函数时执行：
•当事件发生时（当用户点击按钮时）
•当 JavaScript 代码调用时
•自动的（自调用）

函数返回
当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

<!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 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // code here CAN use carName
}

// 此处的代码可以使用 carName

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建，在函数完成时被删除。

散落于尘埃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
预习博客（JS基础语法）

文章目录前端一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前端提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport
复制链接

扫一扫