JavaScript笔记

一、基本语法

JavaScript（以下简称JS）是一种脚本语言，可用于创建动态网页，为页面增加交互性。JS可以嵌入到HTML代码中，也可以保存成独立的.js文件并在HTML中引用。以下我们来介绍一些JS的基本语法。


// 输出
console.log("Hello World!");

// 变量
var x = 5;
var y = 6;
var z = x + y;

// 条件语句
if (z > 10) {
   document.write("z 大于 10");
} else {
   document.write("z 小于 10");
}

// 循环语句
for (var i = 0; i < 5; i++) {
   document.write(i);
}

1. 输出：使用console.log()函数可以输出内容到浏览器的控制台中。

2. 变量：使用var关键字声明变量，=表示赋值操作，+表示加法操作。其中z的值为11。

3. 条件语句：使用if和else来进行条件判断，文档中使用document.write()函数将内容输出到页面中。当z>10时，输出“z 大于 10”，否则输出“z 小于 10”。

4. 循环语句：使用for循环，i代表循环次数，i从0开始，每次增加1，直到i<5。

二、函数和对象

函数和对象是JS中的两个重要概念，函数可以重复调用进行代码复用，而对象可以理解为一个容器，用来存储和访问数据。以下我们来介绍JS的函数和对象。


// 函数
function myFunction(p1, p2) {
   return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);

// 对象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";

1. 函数：使用function关键字声明函数，p1和p2为传入参数，return用于返回计算结果。其中使用document.getElementById()方法获取页面中的元素，innerHTML用于改变元素的文本内容为函数执行的结果。

2. 对象：使用{}来声明一个对象，对象中包含多个键值对，每个键值对用冒号分隔。获取对象中的值可以使用person.firstName或person[“firstName”]两种方式。

三、事件

事件是与网页上的元素相关联的动作，如用户鼠标移动、按下键盘等，在JS中可以通过事件来实现页面的互动和响应。以下我们来介绍JS的事件。


function changeText() {
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
}

使用onload属性给网页中的元素赋上事件，当元素加载完成后，对应的函数将会被自动调用。

使用onclick属性给按钮赋上事件，当按钮被点击后，对应的函数将会被自动调用。

四、数组和字符串

数组和字符串是JS中常用的数据类型，数组用于存储一系列数据，而字符串用于存储一段字符序列。以下我们来介绍JS的数组和字符串。


// 数组
var cars = ["Saab", "Volvo", "BMW"];
alert(cars[0]);  // Saab

// 字符串
var str = "Hello World!";
alert(str.length);  // 12
alert(str.indexOf("World"));  // 6

1. 数组：使用[]来声明一个数组，多个元素之间用逗号分隔。使用数组名[index]的方式来访问数组元素，注意，数组的第一个元素的下标为0。

2. 字符串：使用””或”来声明一个字符串。使用.length属性可以获得字符串的长度，使用.indexOf()方法可以获得指定字符或字符序列在字符串中的位置，如果没有则返回-1。

五、AJAX

AJAX（Asynchronous JavaScript and XML）是一种基于JavaScript和XML的异步数据传输技术，可以通过后台与服务器进行数据传输，不需要刷新整个页面即可更新部分内容。以下我们来介绍JS的AJAX。


// AJAX
function loadXMLDoc() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("demo").innerHTML = this.responseText;
      }
   };
   xhttp.open("GET", "ajax_info.txt", true);
   xhttp.send();
}

使用XMLHttpRequest对象来创建AJAX请求，通过xhttp.onreadystatechange属性绑定异步响应函数，当AJAX请求状态发生改变时，将自动调用该函数。通过xhttp.open()和xhttp.send()分别设置AJAX请求的URL和请求方式。

六、jQuery

jQuery是一种快速、简洁的JavaScript库，适用于跨浏览器的HTML文档遍历和操作，事件处理，动画和AJAX等方面。以下我们来介绍JS的jQuery库。


// jQuery
$(document).ready(function(){
   $("button").click(function(){
      $("p").text("Hello world!");
   });
});

使用$(selector).action()语句选择页面中的元素并进行操作。例如，以上代码中当按钮被点击时，将使用jQuery库中的.text()方法来修改一或多个段落的文本内容为“Hello world!”。

原创文章，作者：UZPSG，如若转载，请注明出处：https://www.506064.com/n/333632.html