本文最后更新于：2024年5月7日 下午

JavaScript 是属于 HTML 和 Web 的编程语言，编程令计算机完成您需要它们做的工作。本文记录基础教程与部分功能。

简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

使用方法

  • JS 服务于 HTML 和 Web，需要结合网页代码共同运行。

  • 我们可以在 HTML 文档中放置任意数量的脚本。

  • 脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。

<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h2>Body 中的 JavaScript</h2>

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

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

</body>
</html>

旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。

type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

外部脚本

脚本可放置于外部文件中：

  • 外部文件：myScript.js
1
2
3
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用，如果相同的脚本被用于许多不同的网页。

  • JavaScript 文件的文件扩展名是 *.js*。

  • 如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：

实例

1
<script src="myScript.js"></script>

  • 可以在 <head> 或 <body> 中放置外部脚本引用。

  • 该脚本的表现与它被置于 <script> 标签中是一样的。

  • 外部脚本不能包含 <script> 标签。

外部脚本的优势

在外部文件中放置脚本有如下优势：

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

实例

1
2
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用

  • 可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

  • 本例使用完整的 URL 来链接至脚本：

实例

1
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

基本语法

条件语句

  • 使用 if 来规定要执行的代码块，如果指定条件为 true
  • 使用 else 来规定要执行的代码块，如果相同的条件为 false
  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false
  • 使用 switch 来规定多个被执行的备选代码块
if 语句
1
2
3
4
5
6
7
if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}
Switch 语句
1
2
3
4
5
6
7
8
9
10
switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

循环语句

  • for - 多次遍历代码块
  • for/in - 遍历对象属性
  • while - 当指定条件为 true 时循环一段代码块
  • do/while - 当指定条件为 true 时循环一段代码块
for 循环
1
2
3
for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}
While 循环
1
2
3
while (条件) {
    要执行的代码块
}
Do/While 循环
1
2
3
4
5
do {
    要执行的代码块
}

while (条件);

函数

JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。

JavaScript 函数语法

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

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

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

1
(参数 1, 参数 2, ...)
  • 由函数执行的代码被放置在花括号中：{}
1
2
3
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

  • *函数参数（Function parameters）*是在函数定义中所列的名称。

  • 函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

  • 在函数中，参数是局部变量。

函数调用

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）
函数返回

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

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

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

优势

  • 能够对代码进行复用：只要定义一次代码，就可以多次使用它。

  • 能够多次向同一函数传递不同的参数，以产生不同的结果。

实例

计算两个数的乘积，并返回结果：

1
2
3
4
5
var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

x 的结果将是：

1
56

功能示例

读取 json 文件

  • 加载 jquery.js 后
1
2
3
4
$.getJSON(json_path, function(data){
	var video_list_length = data.length
	console.log(var)
});

向 html 元素加入内容

1
2
3
video_url = <a-url-of-video>
video_html_res = "<video id='video_item' style='position: absolute;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>"
document.getElementById("video_insert").innerHTML = video_html_res;

调整 html 元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function set_video_attr(id){

    var height = document.body.children[0].clientHeight
    var width = document.body.children[0].clientWidth
    var video_item = document.getElementById(id);

    if (height / width < 0.56){
        video_item.setAttribute('width', '100%');
        video_item.setAttribute('height', 'auto');
    } else {
        video_item.setAttribute('height', '100%');
        video_item.setAttribute('width', 'auto');
    }
}

监控窗口尺寸变化

1
2
3
window.onresize = function(){
	console.log('window resized')
}

检查当前运行设备是否是手机

1
2
3
4
5
6
7
8
9
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;

if (isMobile){
    console.log('mobile device')
}

参考资料



文章链接：
https://www.zywvvd.com/notes/coding/java-script/java-script-basic-tips/java-script-basic-tips/

“觉得不错的话，给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

Coding > Java_script
#Coding #Java_script
JavaScript -1- 基础教程与部分功能示例
https://www.zywvvd.com/notes/coding/java-script/java-script-basic-tips/java-script-basic-tips/
作者
Yiwei Zhang
发布于
2021年8月13日
许可协议