归纳整理JavaScript基础之语法

javascriptjavascript 2023-08-29 05:28:05 1195
摘要： 本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于基础语法的相关问题，JavaScript是互联网上最流行的脚本语言，下面就一起来看一下，希望对大家有帮助。【相关推荐：javascript视频教程、web前端】介绍JavaS...

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于基础语法的相关问题，JavaScript是互联网上最流行的脚本语言，下面就一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、web前端】

介绍

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript特点

  • JavaScript 是一门脚本语言。
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份名称描述1997ECMAScript 1第一个版本1998ECMAScript 2版本变更1999ECMAScript 3添加正则表达式
添加 try/catch ECMAScript 4没有发布2009ECMAScript 5添加 "strict mode"，严格模式
添加 JSON 支持2011ECMAScript 5.1版本变更2015ECMAScript 6添加类和模块2016ECMAScript 7增加指数运算符 (**)
增加 Array.prototype.includes

用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

实例1：head中的script函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head标签中script</title>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "这是我的函数";
        }
    </script>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">一段话</p>
<button type="button" onclick="myFunction()">这是函数</button>
</body>
</html>

实例2：body中的script函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body中的script</title>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">我的函数</p>
<button type="button" onclick="myFunction()">点击一下</button>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "这是我的函数"
    }
</script>
</body>
</html>

JavaScript也可以放在外部供调用，注意外部拓展名为.js。

实例3：外部调用JavaScript

外部调用.js

function myFunction() {
    document.getElementById('demo').innerHTML = "这是我的函数"
}

调用外部script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用外部script</title>
</head>
<body>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script src="外部脚本.js"></script>
</body>
</html>

输出

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

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

实例1：aler()弹窗输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert输出</title>
</head>
<body>
<h1>alert输出</h1>
<script>
    window.alert(5 + 6)
</script>
</body>
</html>

实例2：document.write()输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document.write输出</title>
</head>
<body>
<h1>document.write输出</h1>
<script>
    document.write(Date());
    document.write("Hello,Web!");
</script>
</body>
</html>

实例3：写到HTMl文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到HTMl文档</title>
</head>
<body>
<h1>写到HTMl文档</h1>
<script>
    function myFunction() {
        document.write("函数输出");
    }
</script>
<button onclick="myFunction()">点击这里</button>
</body>
</html>

实例4：使用 console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用console.log()写入到浏览器的控制台</title>
</head>
<body>
<h1>console.log()写入到浏览器的控制台</h1>
<script >
    a = 5;
    b = 6;
    c = a + b;
    console.log(c)
</script>
</body>
</html>

语法介绍

JavaScript 是一个脚本语言，它是一个轻量级，但功能强大的编程语言。

字面量

在编程语言中，一般固定值称为字面量。

  • 数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)。如3.14，5.88等。
  • 字符串（String）字面量：”可以使用单引号或双引号。如"Hello"，"Web"等
  • 表达式字面量：用于计算的固定值。3 + 2.2,3.14 * 2等。
  • 数组（Array：字面量：定义一个数组。如[1,2,3,4,5,6]。
  • 对象（Object：字面量：定义一个对象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
  • 函数（Function）字面量：定义一个函数。如function myFunction(a, b) { return a * b;}。

注意，在JavaScript中，语句需要加结束符“；”。

JavaScrip变量

在编程语言中，变量用于存储数据值。JavaScript 使用关键字var来定义变量， 使用等号来为变量赋值，变量之间可以相互操作：

var y = false                                     // 布尔值
var length = 16;                                  // 数字
var points = x * 10;                              // 数字计算
var lastName = "Johnson";                         // 字符串
var cars = ["Saab", "Volvo", "BMW"];              // 数组
var person = {firstName:"John", lastName:"Doe"};  // 对象字典

JavaScript函数

为了能够重复引用相同的功能，减少代码的书写和维护的方便，JavaScript提供函数功能，由关键字function引导：

function myFunc(a, b) {
    return a + b; // 返回a+b结果
}

JavaScript特点

相对其它语言，JavaScript具有下列特点：

  • JavaScript对大小写敏感。
  • JavaScript使用Unicode字符集。
  • JavaScript推荐使用驼峰命名法定义变量，命名避免关键字。
  • JavaScript属于弱类型语言，定义变量都是var关键字。
JavaScript关键字（按字母序）abstractelseinstanceofsuperbooleanenumintswitchbreakexportinterfacesynchronizedbyteextendsletthiscasefalselongthrowcatchfinalnativethrowscharfinallynewtransientclassfloatnulltrueconstforpackagetrycontinuefunctionprivatetypeofdebuggergotoprotectedvardefaultifpublicvoiddeleteimplementsreturnvolatiledoimportshortwhiledoubleinstaticwith

JavaScript注释（与Java相同）

// 这是代码：单句注释，在编辑器一般是ctrl + L键。

/* 这是代码 */：多行注释，在编辑器一般是ctrl + shift + L键。

语句

JavaScript语句向浏览器发出的命令，告诉浏览器该做什么。下面的JavaScript语句向id="demo"的 HTML元素输出文本"Hello World!" ：

document.getElementById("demo").innerHTML = "Hello World!";

与Python不同的是，JavaScript代码块都是在大括号中的，这点像极了Java。

Java标识符

常见JavaScript标识符语句描述break用于跳出循环。catch语句块，在 try 语句块执行出错时执行 catch 语句块。continue跳过循环中的一个迭代。do ... while执行一个语句块，在条件语句为 true 时继续执行该语句块。for在条件语句为 true 时，可以将代码块执行指定的次数。for ... in用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。function定义一个函数if ... else用于基于不同的条件来执行不同的动作。return退出函数switch用于基于不同的条件来执行不同的动作。throw抛出（生成）错误 。try实现错误处理，与 catch 一同使用。var声明一个变量。while当条件语句为 true 时，执行语句块。

大部分语言能够自动补全空格，我们建议在运算符两边加上空格，这样清晰美观，但是要注意在HTML中空格的是要留意用法的，切勿混谈。在JavaScript中，下面两句话是一样的：

var a = 10;
var b=10;

与Python相似，JavaScript也是脚本语言，属于解释型。

对象

定义对象

任何事物都是对象，具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。

在JavaScript中，对象就是是属性变量的容器，类似Python中的字典，Java中的哈希映射，其中定义了对象的属性。

var people = {
    firstName: "Mike",
    lastName: "Smith",
    age: "18",
    address: "Beijing",
    job: "Student"
};

标签：