JavaScript编写方式

JavaScript是一种脚本语言，用于为网页添加交互性和动态功能。它可以直接嵌入到HTML中，并通过浏览器解释执行。下面是一些常见的JavaScript编写方式和相应的代码示例：

内联方式

在HTML文件中直接嵌入JavaScript代码，使用`<script>`标签将代码包裹起来。这种方式适用于简单的脚本。

<!DOCTYPE html>

<html>

<head>

    <title>内联方式</title>

</head>

<body>

    <h1>JavaScript内联方式</h1>

    <script>

        // JavaScript代码

        alert("Hello, World!");

    </script>

</body>

</html>

内部文件方式

将JavaScript代码保存在一个独立的.js文件中，然后在HTML文件中使用`<script>`标签引入该文件。这种方式适用于较复杂的脚本，可以提高代码的可维护性和重用性。

<!DOCTYPE html>

<html>

<head>

    <title>内部文件方式</title>

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

</head>

<body>

    <h1>JavaScript内部文件方式</h1>

</body>

</html>

script.js文件中的代码：

// JavaScript代码

alert("Hello, World!");

外部文件方式

将JavaScript代码保存在一个独立的.js文件中，并通过`<script>`标签的src属性引入该文件。这种方式适用于大型项目，可以提高代码的可维护性和加载速度。

<!DOCTYPE html>

<html>

<head>

    <title>外部文件方式</title>

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

</head>

<body>

    <h1>JavaScript外部文件方式</h1>

</body>

</html>

script.js文件中的代码：

// JavaScript代码

alert("Hello, World!");

事件处理方式

通过给HTML元素添加事件处理函数，实现对用户操作的响应。可以使用`<script>`标签内联编写事件处理函数，也可以在外部文件中定义函数并通过`<script>`标签引入。

<!DOCTYPE html>

<html>

<head>

    <title>事件处理方式</title>

    <script>

        function showMessage() {

            alert("Button clicked!");

        }

    </script>

</head>

<body>

    <h1>JavaScript事件处理方式</h1>

    <button onclick="showMessage()">Click me</button>

</body>

</html>

以上是一些常见的JavaScript编写方式和相应的代码示例。根据具体的需求和项目规模，选择适合的方式来编写JavaScript代码。

JavaScript的变量

变量定义

在JavaScript中，变量是用来存储数据的容器。在使用变量之前，需要先定义它。

JavaScript中的变量定义有三种方式：使用var关键字、使用let关键字和使用const关键字。

使用var关键字

var关键字是JavaScript中最早引入的定义变量的方式。使用var关键字定义的变量是函数作用域的，即只在当前函数内部有效。如果在函数内部使用var关键字定义的变量没有使用var关键字声明，则该变量会成为全局变量。

示例：

   function example() {

     var x = 10; // 在函数内部定义变量x

     console.log(x); // 输出10

   }

   example();

   console.log(x); // 报错，x未定义

使用let关键字

let关键字是ES6引入的定义变量的方式。使用let关键字定义的变量是块级作用域的，即只在当前代码块内部有效。使用let关键字定义的变量不能被重复定义。

示例：

   function example() {

     let x = 10; // 在函数内部定义变量x

     console.log(x); // 输出10

   }

   example();

   console.log(x); // 报错，x未定义

使用const关键字

const关键字也是ES6引入的定义变量的方式。使用const关键字定义的变量也是块级作用域的，且必须在定义时进行初始化，并且不能被重新赋值。

示例：

   function example() {

     const x = 10; // 在函数内部定义常量x

     console.log(x); // 输出10

   }

   example();

   x = 20; // 报错，常量x不能被重新赋值

总结：

JavaScript中的变量定义可以使用var、let和const关键字。var关键字定义的变量是函数作用域的，let和const关键字定义的变量是块级作用域的。const关键字定义的变量是常量，不能被重新赋值。

定义规范

JavaScript变量定义规范主要包括变量命名规则和变量声明方式。下面是详细介绍以及正确和错误的例子：

变量命名规则：

- 变量名只能包含字母、数字、下划线(_)和美元符号($)，不能以数字开头。

- 变量名区分大小写。

- 变量名不能使用JavaScript的保留字（如if、for、while等）。

- 变量名应该具有描述性，能够清晰表达变量的用途。

正确的例子：

   var age;

   var firstName;

   var _count;

   var $price;

   var myVariable;

反例：

   var 1age; // 以数字开头

   var first-name; // 包含连字符

   var if; // 使用了保留字

变量声明方式：

- 使用var关键字声明变量，可以在任何地方声明变量，但最好在函数的顶部声明。

- 变量声明后可以选择初始化变量的值，也可以在之后的代码中赋值。

- 变量声明后，可以通过赋值操作改变变量的值。

- 变量应该尽可能地被赋予初始值，以避免未定义的行为。如果变量不需要初始值，可以将其赋值为null。

正确的例子：

   var age = 25;

   var firstName = "John";

   var lastName;

   lastName = "Doe";

反例：

   age = 25; // 没有使用var关键字声明变量

   var firstName; firstName = "John"; // 分开声明和赋值

总结：遵循JavaScript变量定义规范可以提高代码的可读性和可维护性。合理命名变量并正确声明和赋值变量可以避免潜在的错误和混淆。

变量赋值

在JavaScript中，变量赋值是将一个值赋给一个变量的过程。JavaScript中的变量赋值可以使用等号（=）进行。

以下是几个变量赋值的案例：

1. 基本的变量赋值：

let name = "John";

在这个例子中，将字符串"John"赋值给变量name。

2. 数字变量赋值：

let age = 25;

在这个例子中，将数字25赋值给变量age。

3. 对象变量赋值：

let person = {

  name: "John",

  age: 25

};

在这个例子中，将一个包含name和age属性的对象赋值给变量person。

4. 数组变量赋值：

let numbers = [1, 2, 3, 4, 5];

在这个例子中，将一个包含数字的数组赋值给变量numbers。

5. 函数变量赋值：

function sayHello() {

  console.log("Hello!");

}

let greeting = sayHello;

在这个例子中，将一个函数赋值给变量greeting。

6. 变量之间的赋值：

let x = 5;

let y = x;

在这个例子中，将变量x的值（5）赋值给变量y。

需要注意的是，JavaScript中的变量赋值是通过值传递的方式进行的。这意味着当将一个变量赋值给另一个变量时，实际上是将原始变量的值复制到新变量中，而不是将它们指向同一个内存地址。因此，对新变量的修改不会影响原始变量。

JavaScript的数据类型

JavaScript具有多种数据类型，包括原始类型和引用类型。以下是对每种类型的详细介绍以及相应的代码示例：

原始类型

- 数字（Number）：表示数值，可以是整数或浮点数。

let num = 10;

     console.log(typeof num);  // 输出 "number"

- 字符串（String）：表示文本数据，由字符组成。

let str = "Hello, World!";

     console.log(typeof str);  // 输出 "string"

- 布尔值（Boolean）：表示真（true）或假（false）的值。

let isTrue = true;

     console.log(typeof isTrue);  // 输出 "boolean"

- 空值（Null）：表示一个空值。

let nullValue = null;

     console.log(typeof nullValue);  // 输出 "object"，这是 JavaScript 的一个历史遗留问题

- 未定义（Undefined）：表示一个未赋值的变量。

let undefinedValue;

     console.log(typeof undefinedValue);  // 输出 "undefined"

- 符号（Symbol）：表示唯一的标识符。

let sym = Symbol("description");

     console.log(typeof sym);  // 输出 "symbol"

引用类型

- 对象（Object）：表示一个复杂的数据结构，可以包含多个键值对。

let person = {

       name: "John",

       age: 30,

       city: "New York"

     };

     console.log(typeof person);  // 输出 "object"

- 数组（Array）：表示一个有序的集合，可以存储多个值。

let numbers = [1, 2, 3, 4, 5];

     console.log(typeof numbers);  // 输出 "object"

- 函数（Function）：表示可重复使用的代码块。

function greet(name) {

       console.log("Hello, " + name + "!");

     }

     console.log(typeof greet);  // 输出 "function"

这些是 JavaScript 中常见的数据类型及其相应的代码示例。

typeof操作符

JavaScript的typeof是一个用于判断变量类型的操作符。它返回一个字符串，表示给定变量的数据类型。

typeof的用法如下：

typeof variable

其中，variable是要检查类型的变量。

typeof返回的结果有以下几种可能：

"undefined"：如果变量未定义或未声明。
"boolean"：如果变量是布尔值。
"number"：如果变量是数字。
"string"：如果变量是字符串。
"object"：如果变量是对象（包括数组、函数、null等）。
"function"：如果变量是函数。
"symbol"：如果变量是符号。

类型转换

JavaScript中的类型转换是指将一个数据类型转换为另一个数据类型。JavaScript中有两种类型转换：隐式类型转换和显式类型转换。

隐式类型转换

隐式类型转换是在运行时自动发生的，不需要显式地调用转换函数。以下是一些常见的隐式类型转换案例：

- 字符串和数字之间的转换：

var num = 10;

var str = "20";

var result = num + str; // 结果为字符串"1020"

在这个例子中，JavaScript将数字10隐式转换为字符串，然后将字符串"20"与之拼接。

- 布尔值和其他类型之间的转换：

var bool = true;

var num = 1;

var result = bool + num; // 结果为数字2

在这个例子中，JavaScript将布尔值true隐式转换为数字1，然后将数字1与另一个数字相加。

- 对象和原始值之间的转换：

var obj = {name: "John"};

var str = "My name is " + obj; // 结果为"My name is [object Object]"

在这个例子中，JavaScript将对象obj隐式转换为字符串，使用默认的toString()方法将对象转换为字符串。

显式类型转换

显式类型转换是通过调用转换函数来实现的，可以将一个数据类型转换为另一个数据类型。以下是一些常见的显式类型转换案例：

- 字符串转换为数字：

var str = "10";

var num = parseInt(str); // 结果为数字10

在这个例子中，使用parseInt()函数将字符串转换为数字。

- 数字转换为字符串：

var num = 10;

var str = num.toString(); // 结果为字符串"10"

在这个例子中，使用toString()方法将数字转换为字符串。

- 布尔值转换为数字：

var bool = true;

var num = Number(bool); // 结果为数字1

在这个例子中，使用Number()函数将布尔值转换为数字。

总结：
JavaScript中的类型转换是非常灵活的，可以根据需要进行隐式或显式转换。隐式类型转换在某些情况下可以简化代码，但也可能导致意外的结果。因此，在进行类型转换时，应该注意数据类型的兼容性和转换的结果。

JavaScript转义字符

JavaScript转义字符是一种特殊的字符序列，用于表示一些特殊字符或者在字符串中插入一些不可见的字符。以下是一些常见的JavaScript转义字符：

1. 反斜杠（\）：用于转义下一个字符，使其具有特殊的含义。例如，\n表示换行，\t表示制表符。

console.log("Hello\nWorld"); // 输出：Hello

                             //        World

console.log("Hello\tWorld"); // 输出：Hello    World

2. 单引号（'）和双引号（"）：用于在字符串中插入引号。

console.log('He said, "Hello!"'); // 输出：He said, "Hello!"

console.log("She said, 'Hi!'");   // 输出：She said, 'Hi!'

3. 反斜杠加引号（\'和\"）：用于在字符串中插入相同类型的引号。

console.log('He said, \'Hello!\''); // 输出：He said, 'Hello!'

console.log("She said, \"Hi!\"");   // 输出：She said, "Hi!"

4. 反斜杠加u和四个十六进制数字（\uXXXX）：用于表示Unicode字符。

console.log("\u0048\u0065\u006C\u006C\u006F"); // 输出：Hello

5. 反斜杠加八进制数字（\XXX）：用于表示八进制字符。

console.log("\101\102\103"); // 输出：ABC

6. 反斜杠加特殊字符（\b、\f、\r、\v）：用于表示退格、换页、回车和垂直制表符。

console.log("Hello\bWorld"); // 输出：HellWorld

console.log("Hello\fWorld"); // 输出：Hello

                              //        World

console.log("Hello\rWorld"); // 输出：World

console.log("Hello\vWorld"); // 输出：Hello

                              //        World

这些是一些常见的JavaScript转义字符，可以根据需要在字符串中使用它们来表示特殊字符或者插入不可见的字符。

JavaScript的运算符

JavaScript中的运算符用于执行各种操作，例如算术运算、比较运算、逻辑运算等。下面是一些常见的JavaScript运算符及其用法：

算术运算符

- 加法运算符（+）：用于将两个值相加。

   let a = 5;

   let b = 3;

   let result = a + b; // 8

- 减法运算符（-）：用于将一个值减去另一个值。

   let a = 5;

   let b = 3;

   let result = a - b; // 2

- 乘法运算符（*）：用于将两个值相乘。

   let a = 5;

   let b = 3;

   let result = a * b; // 15

- 除法运算符（/）：用于将一个值除以另一个值。

   let a = 6;

   let b = 3;

   let result = a / b; // 2

- 取余运算符（%）：用于返回两个数相除的余数。

   let a = 7;

   let b = 3;

   let result = a % b; // 1

比较运算符

- 相等运算符（==）：用于比较两个值是否相等。

   let a = 5;

   let b = 3;

   let result = a == b; // false

- 不相等运算符（!=）：用于比较两个值是否不相等。

   let a = 5;

   let b = 3;

   let result = a != b; // true

- 大于运算符（>）：用于判断一个值是否大于另一个值。

   let a = 5;

   let b = 3;

   let result = a > b; // true

- 小于运算符（<）：用于判断一个值是否小于另一个值。

   let a = 5;

   let b = 3;

   let result = a < b; // false

- 大于等于运算符（>=）：用于判断一个值是否大于或等于另一个值。

   let a = 5;

   let b = 3;

   let result = a >= b; // true

- 小于等于运算符（<=）：用于判断一个值是否小于或等于另一个值。

   let a = 5;

   let b = 3;

   let result = a <= b; // false

逻辑运算符

- 逻辑与运算符（&&）：用于判断两个条件是否同时为真。

   let a = 5;

   let b = 3;

   let result = (a > 0) && (b > 0); // true

- 逻辑或运算符（||）：用于判断两个条件是否至少有一个为真。

   let a = 5;

   let b = 3;

   let result = (a > 0) || (b > 0); // true

- 逻辑非运算符（!）：用于取反一个条件的值。

   let a = 5;

   let result = !(a > 0); // false

赋值运算符

- 等号运算符（=）：用于将一个值赋给一个变量。

   let a = 5;

- 加等于运算符（+=）：用于将一个值加到变量上，并将结果赋给该变量。

   let a = 5;

   a += 3; // a的值变为8

- 减等于运算符（-=）：用于将一个值从变量中减去，并将结果赋给该变量。

   let a = 5;

   a -= 3; // a的值变为2

- 乘等于运算符（*=）：用于将一个值乘以变量，并将结果赋给该变量。

   let a = 5;

   a *= 3; // a的值变为15

- 除等于运算符（/=）：用于将变量的值除以一个值，并将结果赋给该变量。

   let a = 6;

   a /= 3; // a的值变为2

- 取余等于运算符（%=）：用于将变量的值除以一个值的余数，并将结果赋给该变量。

   let a = 7;

   a %= 3; // a的值变为1

位运算符

当涉及到处理二进制数据时，位运算符是非常有用的。下面是一些常见的JavaScript位运算符及其用法：

1. 按位与运算符（&）：对两个操作数的每个位执行逻辑与操作。

let a = 5; // 二进制表示为 0101

let b = 3; // 二进制表示为 0011

let result = a & b; // 二进制结果为 0001，即十进制的 1

2. 按位或运算符（|）：对两个操作数的每个位执行逻辑或操作。

let a = 5; // 二进制表示为 0101

let b = 3; // 二进制表示为 0011

let result = a | b; // 二进制结果为 0111，即十进制的 7

3. 按位异或运算符（^）：对两个操作数的每个位执行逻辑异或操作。

let a = 5; // 二进制表示为 0101

let b = 3; // 二进制表示为 0011

let result = a ^ b; // 二进制结果为 0110，即十进制的 6

4. 按位非运算符（~）：对操作数的每个位执行逻辑非操作，即取反。

let a = 5; // 二进制表示为 0101

let result = ~a; // 二进制结果为 1010，即十进制的 -6

5. 左移运算符（<<）：将操作数的位向左移动指定的位数。

let a = 5; // 二进制表示为 0101

let result = a << 2; // 二进制结果为 010100，即十进制的 20

6. 右移运算符（>>）：将操作数的位向右移动指定的位数，符号位不变。

let a = 5; // 二进制表示为 0101

let result = a >> 1; // 二进制结果为 0010，即十进制的 2

7. 无符号右移运算符（>>>）：将操作数的位向右移动指定的位数，符号位也向右移动。

let a = -5; // 二进制表示为 11111111111111111111111111111011

let result = a >>> 1; // 二进制结果为 01111111111111111111111111111101，即十进制的 2147483645

【技术积累】JavaScript中的基础语法【二】的更多相关文章

Swift 中的基础语法(二)
1.Swift 中的函数 /// 函数的定义 /// /// - Parameters: /// - x: 形参 /// - y: 形参 /// - Returns: 返回值 func sum(x: ...
JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
Python 基础语法(二)
Python 基础语法(二) --------------------------------------------接 Python 基础语法(一) ------------------------ ...
web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
JavaScript中的基础测试题
Java ...
JSP开发中的基础语法
JSP 语法 JSP开发中的基础语法. 脚本程序脚本程序可以包含任意量的Java语句.变量.方法或表达式,只要它们在脚本语言中是有效的. 脚本程序的语法格式: <% 代码片段 %> 或者 ...
4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
JavaScript学习笔记-基础语法、类型、变量
基础语法.类型.变量非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...
JavaScript脚本语言基础（二）
导读: JavaScript条件语句 JavaScript循环语句 JavaScript网页中错误捕获 JavaScript的Break和Continue命令 JavaScript的转义字符 1.Ja ...
了解javascript中的事件（二）
本文目录如下: 零.寒暄一.事件的分类二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例二.事件代理三.事件代理思想的用处四.总结零.寒暄这篇博客本该出现在两个月以 ...

随机推荐

环形链表_相交链表_多数元素（java语言）
环形链表力扣141题问题: 思路:创建hashset,把链表的每个节点放到集合中,在放入的过程中检查这个节点是否已经存在,存在则证明存在环. 代码实现: public class Solution ...
count(*) count(1) count(字段)效率问题
COUNT(字段名)和COUNT(*)的查询结果有什么不同? COUNT(1)和COUNT(*)之间的效率哪个更高? 你知道答案吗?很多人都认为COUNT(1)比COUNT(*)效率高,真的是这样吗? ...
cocos2d-x场景间参数传递
1>使用全局变量这个就不详细说明了. 2>切换时传递 2.1>在secondScene.h 中加入成员变量,如 int sceneNum; 并在 ...
面试最常问的数组转树，树转数组 c++ web框架paozhu实现
刚毕业同学,找工作常被问二维数组转树,树转二维数组需要支持无限层级实现,如果你了解这个语言那么实现起来还要一番思考 c++ web框架 paozhu使用需要实现数据库表数据到前台菜单实现,就是这 ...
devops｜中小公司效率为王，没必要度量
之前写过一篇文章<devops|中小公司不要做研发效能度量>,主要是从基础设施方向考虑,因为很多条件都不具备,贸然高投入去做研发效能度量可能达不到我们的预期效果,给出的建议是先做好当下打好 ...
JavaFx 实现水平滚动文本(跑马灯效果)
原文地址: JavaFx 实现水平滚动文本(跑马灯效果) - Stars-One的杂货小窝本文是以TornadoFx框架进行编写,各位使用JavaFx可以参考代码已经封装在common-contr ...
数据分析01-(numpy概述及使用)
数据分析-01 数据分析 numpy numpy概述 numpy`历史` numpy的核心:多维数组 numpy基础 ndarray数组内存中的ndarray对象 ndarray数组对象的特点 nd ...
[双目视差] 立体校正源码分析(opencv)
文章目录 [双目视差] 立体校正源码分析(opencv) 一.源码解析二.源码中的方法 [双目视差] 立体校正源码分析(opencv) 一.源码解析立体校正:把实际中非共面行对准的两幅图像,校正成 ...
响应式的 switchboard：让又大又慢的Vue/AIpine 页面爆快
我的提示: AIpine 是一个js 库,官网口号是 "一个新的轻量极javascript框架",其实我之前也没接触过,翻译这篇文章时才注意到官方地址: [AIpine.js]h ...
#Powerbi 季度时间进度计算
上一篇我们学习了月度时间进度的计算方法,今天我们学习季度时间进度的测算. 思路:找出目前共计消耗了多少天(季度),目前日期所在的季度共有多少天,两者相除即是季度的时间进度首先列出DAX函数: 本 ...

【技术积累】JavaScript中的基础语法【二】