JavaScript学习笔记

    技术2022-07-10  149

    JavaScript 是 Web 的编程语言。

    JavaScript web 开发人员必须学习的 3 门语言中的一门:

    HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为

    基本用法

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

    <script> 标签可以放在 <body> 、<head>标签中,也可以外部引用:

    //head标签引用 <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </head> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">尝试一下</button> </body> </html> //body标签引用 <!DOCTYPE html> <html> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </body> </html> //外部标签引用 <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>

    输出

    JavaScript 可以通过不同的方式来输出数据:

    使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。

    alert

    <!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html>

    write

    出于测试目的,您可以将JavaScript直接写在HTML 文档中:

    <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>

    innerHTML

    使用 document.getElementById(id) 方法访问某个 HTML 元素。

    <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>

    批注,该方法会直接替换原内容。

    log

    浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单,信息会显示在控制台中。

    <!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>

    语法

    数据类型

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。

    容器。

    动态类型

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

    var x; // x 为 undefined var x = 5; // 现在 x 为数字 var x = "John"; // 现在 x 为字符串

    数组

    var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"];

    赋值

    JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

    var x, length //此时是未定义值 undefined x = 5; length = 6; var lastname="Doe", age=30, job="carpenter";

    注释

    // 单行注释 /* 多行注释 多行注释 */

    函数

    function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果 }

    实例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试实例</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">点我</button> </body> </html>

    对象

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。

    //定义对象 var person = { //创建属性 firstName: "John", lastName : "Doe", id : 5566, //创建方法 fullName : function() { return this.firstName + " " + this.lastName; } }; //访问属性及方法 person.lastName; name = person.fullName();

    事件

    常见的HTML事件

    onchange HTML 元素改变onclick 用户点击 HTML 元素onmouseover 用户在一个HTML元素上移动鼠标onmouseout 用户从一个HTML元素上移开鼠标onkeydown 用户按下键盘按键onload 浏览器已完成页面的加载

    字符串

    var carname = "Volvo XC60"; var sln = txt.length;

    其他参考:https://www.runoob.com/js/js-strings.html

    遍历

    for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } var person={fname:"John",lname:"Doe",age:25}; for (x in person) // x 为属性名 { txt=txt + person[x]; }

    变量提升

    js允许先赋值后定义。。

    x = 5; // 变量 x 设置为 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x var x; // 声明 x

    严格模式

    JavaScript 严格模式(strict mode)即在严格的条件下运行。 严格模式下不允许使用未声明的变量。

    "use strict"; x = 3.14; // 报错 (x 未定义)

    表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html>
    Processed: 0.015, SQL: 9