JavaScript基础知识1(引入方式、注释、输入输出、变量、数组)

JavaScript基础知识1(引入方式、注释、输入输出、变量、数组)

    • javascript 引入方式
        • 内部方式
        • 外部形式
    • 注释和结束符
        • 单行注释
        • 多行注释
      • 结束符
    • 输入和输出
        • 输出
        • 输入
      • `alert('你好JS');`
      • `document.write('js我来了');`
      • `console.log('看看对不对');`
      • `prompt('输入您的姓名:');`
      • 综合示例
    • 变量
      • 声明
      • 赋值
      • 关键字
      • 变量名命名规则
    • 数组
      • 创建数组
      • 访问数组元素
      • 修改数组元素
      • 常用数组方法
      • 示例

javascript 引入方式

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,有两种方式:

内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式:通过 script 标签包裹 JavaScript 代码 --><script>alert('嗨,欢迎来传智播学习前端技术!')</script>
</body>
</html>
外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入

// demo.js
document.write(' 学习前端技术!')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!所以一般不写如下代码所示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉!!!!alert(666);  </script>
</body>
</html>

注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:

单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write('嗨,欢迎来传智播学习前端技术!');</script>
</body>
</html>
多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('嗨,欢迎来传智播学习前端技术!')</script>
</body>
</html>

注:编辑器中单行注释的快捷键为 ctrl + / 多行注释为shift+alt+a

结束符

在 JavaScript 中 ; 代表一段代码的结束,多数情况下可以省略 ; 使用回车(enter)替代。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 结束符</title>
</head>
<body><script> alert(1);alert(2);alert(1)alert(2)</script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

输入和输出

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入,然后再将输入的结果输出:

alert()document.wirte()

以数字为例,向 alert()document.write()输入任意数字,他都会以弹窗形式展示(输出)给用户。

输入

prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。
这几种 JavaScript 语法各自有不同的作用,分别用于不同的输入和输出场景。以下是详细的解释:

alert('你好JS');

作用:显示一个警告对话框,包含指定的消息和一个“确定”按钮。用户必须点击“确定”按钮才能关闭对话框并继续与页面交互。

示例

alert('你好JS');

效果:弹出一个对话框,显示消息“你好JS”。

document.write('js我来了');

作用:将指定的文本直接写入到 HTML 文档中。通常用于在页面加载时动态生成内容。

示例

document.write('js我来了');

效果:在页面上显示“js我来了”。

注意document.write 只有在页面加载时使用是安全的。如果在页面加载完成后再调用 document.write,它会清空整个文档的内容,并写入新的内容。因此,现代开发中很少使用 document.write

console.log('看看对不对');

作用:将指定的信息输出到浏览器的控制台中,主要用于调试和开发。

示例

console.log('看看对不对');

效果:在浏览器的开发者工具控制台中显示“看看对不对”。

prompt('输入您的姓名:');

作用:显示一个提示对话框,包含指定的消息和一个文本输入框。用户可以在输入框中输入数据,然后点击“确定”或“取消”按钮。该函数会返回用户输入的字符串。如果用户点击“取消”,则返回 null

示例

const name = prompt('输入您的姓名:');
console.log(`您输入的姓名是:${name}`);

效果:弹出一个对话框,提示用户输入姓名。输入内容后点击“确定”,用户输入的内容会被存储在变量 name 中,并输出到控制台。

综合示例

以下是一个综合示例,展示了如何使用这些语法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 示例</title>
</head>
<body><script>// 弹出警告对话框alert('你好JS');// 将文本写入到 HTML 文档中document.write('js我来了');// 在控制台输出信息console.log('看看对不对');// 显示提示对话框,并将用户输入的内容输出到控制台const name = prompt('输入您的姓名:');console.log(`您输入的姓名是:${name}`);</script>
</body>
</html>

这个示例中,当页面加载时:

  1. 弹出一个警告对话框,显示“你好JS”。
  2. 在页面上显示“js我来了”。
  3. 在控制台输出“看看对不对”。
  4. 弹出一个提示对话框,要求用户输入姓名,并将输入的姓名输出到控制台。

理解变量是计算机存储数据的“容器”,掌握变量的声明方式

变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!// 将用户输入的内容保存在 num 这个变量(容器)中num = prompt('请输入一数字!')// 通过 num 变量(容器)将用户输入的内容输出出来alert(num)document.write(num)
</script>

变量

理解变量是计算机存储数据的“容器”,掌握变量的声明方式

变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!// 将用户输入的内容保存在 num 这个变量(容器)中num = prompt('请输入一数字!')// 通过 num 变量(容器)将用户输入的内容输出出来alert(num)document.write(num)
</script>

声明

声明(定义)变量有两部分构成:声明关键字、变量名(标识)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语// age 即变量的名称,也叫标识符let age</script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;

letvar 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量!!!

赋值

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语// age 即变量的名称,也叫标识符let age// 赋值,将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

关键字

JavaScript 使用专门的关键字 letvar 来声明(定义)变量,在使用时需要注意一些细节:

以下是使用 let 时的注意事项:

  1. 允许声明和赋值同时进行
  2. 不允许重复声明
  3. 允许同时声明多个变量并赋值
  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项:

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 letvar 区别不大,但是 let 相较 var 更严谨,因此推荐使用 let,后期会更进一步介绍二者间的区别。

变量名命名规则

关于变量的名称(标识符)有一系列的规则需要遵守:

  1. 只能是字母、数字、下划线、$,且不能能数字开头
  2. 字母区分大小写,如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词(关键字或保留字)不允许使用
  4. 尽量保证变量具有一定的语义,见字知义

注:所谓关键字是指 JavaScript 内部使用的词语,如 letvar,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确// let 1age = 18; // 错误,不可以数字开头let $age = 18 // 正确let Age = 24 // 正确,它与小写的 age 是不同的变量// let let = 18; // 错误,let 是关键字let int = 123 // 不推荐,int 是保留字</script>
</body>
</html>

JavaScript 中的数组是一种用于存储多个值的变量类型。数组是有序的集合,每个元素都有一个索引,从 0 开始。以下是 JavaScript 数组的基本概念、常用方法和示例。

数组

创建数组

  1. 使用数组字面量

    let fruits = ['Apple', 'Banana', 'Cherry'];
    
  2. 使用 Array 构造函数

    let fruits = new Array('Apple', 'Banana', 'Cherry');
    

访问数组元素

通过索引访问数组元素,索引从 0 开始:

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 输出 'Apple'
console.log(fruits[1]); // 输出 'Banana'
console.log(fruits[2]); // 输出 'Cherry'

修改数组元素

直接使用索引修改数组中的元素:

let fruits = ['Apple', 'Banana', 'Cherry'];
fruits[1] = 'Blueberry';
console.log(fruits); // 输出 ['Apple', 'Blueberry', 'Cherry']

常用数组方法

  1. push()pop()

    • push() 在数组末尾添加一个或多个元素。
    • pop() 从数组末尾删除一个元素。
    let fruits = ['Apple', 'Banana'];
    fruits.push('Cherry'); // ['Apple', 'Banana', 'Cherry']
    fruits.pop(); // ['Apple', 'Banana']
    
  2. unshift()shift()

    • unshift() 在数组开头添加一个或多个元素。
    • shift() 从数组开头删除一个元素。
    let fruits = ['Apple', 'Banana'];
    fruits.unshift('Mango'); // ['Mango', 'Apple', 'Banana']
    fruits.shift(); // ['Apple', 'Banana']
    
  3. concat()

    • 合并两个或多个数组,返回一个新数组。
    let fruits = ['Apple', 'Banana'];
    let moreFruits = ['Cherry', 'Date'];
    let allFruits = fruits.concat(moreFruits); // ['Apple', 'Banana', 'Cherry', 'Date']
    
  4. slice()

    • 从数组中提取部分元素,返回一个新数组。
    let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
    let someFruits = fruits.slice(1, 3); // ['Banana', 'Cherry']
    
  5. splice()

    • 添加、删除或替换数组中的元素。
    let fruits = ['Apple', 'Banana', 'Cherry'];
    fruits.splice(1, 1, 'Blueberry'); // ['Apple', 'Blueberry', 'Cherry']
    
  6. forEach()

    • 遍历数组中的每个元素。
    let fruits = ['Apple', 'Banana', 'Cherry'];
    fruits.forEach(function(fruit) {console.log(fruit);
    });
    // 输出:
    // Apple
    // Banana
    // Cherry
    
  7. map()

    • 创建一个新数组,数组中的每个元素是回调函数的返回值。
    let numbers = [1, 2, 3];
    let doubled = numbers.map(function(number) {return number * 2;
    });
    console.log(doubled); // [2, 4, 6]
    
  8. filter()

    • 创建一个新数组,数组中的每个元素是通过回调函数测试的所有元素。
    let numbers = [1, 2, 3, 4];
    let evens = numbers.filter(function(number) {return number % 2 === 0;
    });
    console.log(evens); // [2, 4]
    
  9. reduce()

    • 对数组中的每个元素执行一个累加器函数,最终为单一的输出值。
    let numbers = [1, 2, 3, 4];
    let sum = numbers.reduce(function(total, number) {return total + number;
    }, 0);
    console.log(sum); // 10
    

示例

以下是一个综合示例,展示了如何使用数组及其方法:

let fruits = ['Apple', 'Banana', 'Cherry'];// 添加元素
fruits.push('Date'); // ['Apple', 'Banana', 'Cherry', 'Date']
console.log(fruits);// 删除元素
fruits.pop(); // ['Apple', 'Banana', 'Cherry']
console.log(fruits);// 修改元素
fruits[1] = 'Blueberry'; // ['Apple', 'Blueberry', 'Cherry']
console.log(fruits);// 遍历元素
fruits.forEach(function(fruit) {console.log(fruit);
});// 创建新数组
let doubled = fruits.map(function(fruit) {return fruit + ' Pie';
});
console.log(doubled); // ['Apple Pie', 'Blueberry Pie', 'Cherry Pie']// 过滤数组
let filtered = fruits.filter(function(fruit) {return fruit.startsWith('B');
});
console.log(filtered); // ['Blueberry']// 归约数组
let concatenated = fruits.reduce(function(acc, fruit) {return acc + ' ' + fruit;
}, 'Fruits:');
console.log(concatenated); // 'Fruits: Apple Blueberry Cherry'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cxgrid列内容居中

笑掉大牙&#xff0c;需要这个功能了&#xff0c;找遍了全网&#xff0c;没有一个可用的成功案例&#xff0c;唯一可用的就是表中添加字段&#xff0c;然后选择properties然后选择对齐方式&#xff0c;根本不实用&#xff0c;因为列都是动态生成的&#xff0c;不可能提前做好所…

【开源】渔具租赁系统 JAVA+Vue.js+SpringBoot+MySQL

目录 一、项目介绍 1.1渔具档案模块 1.2渔具租赁模块 1.3渔具归还模块 1.4在线留言模块 二、项目截图 三、核心代码 一、项目介绍 Vue.jsSpringBoot前后端分离新手入门项目《渔具租赁系统》&#xff0c;包括渔具档案模块、渔具租赁模块、渔具归还模块、在线留言模块和部…

当新媒体运营开始说真话,这些道理你真的懂么?沈阳新媒体运营培训

运营新人&#xff0c;尤其是刚毕业、啥都不会的大学生&#xff0c;一定要认清的现实就是&#xff1a;虽然新媒体运营这个岗位门槛比较低&#xff0c;薪资也比较香&#xff0c;但绝不是养老型的工作。 平时大家还是很忙的&#xff0c;所以一定要摒弃学生思维&#xff0c;千万别…

【数据分析】打造完美数据分析环境:Python开发环境搭建全攻略

打造完美数据分析环境&#xff1a;Python开发环境搭建全攻略 在数据分析的世界中&#xff0c;搭建一个稳定且高效的Python开发环境是至关重要的。本文将介绍三种主要的环境搭建方式&#xff1a;使用pip、Anaconda和Miniconda。 1. 使用pip从清华镜像安装Python包 pip是Pytho…

02--nginx代理缓存

前言&#xff1a;比较常用的用法反向代理&#xff0c;和缓存的一些操作&#xff0c;用虚拟环境复刻出来&#xff0c;里面参数不用详细记录&#xff0c;用作复习&#xff0c;使用时直接查找即可。环境搭建过程参考前一篇文章nginx基础。 1、基础环境 IP角色作用192.168.189.143…

编译安装gcc-11及可能遇到的bug

编译安装脚本 GCC_VERSION11.1.0 PACKAGE_DIR/path/to/gcc/source/code GCC_DIR$PACKAGE_DIR/gcc-$GCC_VERSION GCC_INSTALL_DIR/path/to/install/gccmkdir -p $GCC_INSTALL_DIR cd $GCC_INSTALL_DIR rm -rf * cd $PACKAGE_DIR rm -rf gcc-$GCC_VERSION if [ ! -f "gcc-$…

freertos初体验 - 在stm32上移植

1. 说明 freertos内核 非常精简&#xff0c;代码量也很少&#xff0c;官方也针对主流的编译器和内核准备好了移植文件&#xff0c;所以 freertos 的移植是非常简单的&#xff0c;很多工具&#xff08;例如CubeMX&#xff09;点点鼠标就可以生成一个 freertos 的工程&#xff0…

ubuntu18.04安装pycharm2024.1.2后,创建快捷方式图标

Ubuntu 18.04 安装 PyCharm并创建快捷方式_untuntu018.04 pycharm怎么创建快捷方式-CSDN博客

探秘Spring Bean之单例奥秘:源码深析与高级应用

1. 引言 在Spring框架中&#xff0c;Bean的作用域是控制Bean实例创建和管理的重要概念。深入理解Bean的作用域&#xff0c;尤其是单例作用域&#xff08;Singleton&#xff09;&#xff0c;对于优化系统性能、提升线程安全性以及管理资源等方面具有至关重要的作用。本文将围绕…

AquaCrop农业水资源管理,模拟作物生长过程中水分的需求与消耗

AquaCrop是由世界粮食及农业组织&#xff08;FAO&#xff09;开发的一个先进模型&#xff0c;旨在研究和优化农作物的水分生产效率。这个模型在全球范围内被广泛应用于农业水管理&#xff0c;特别是在制定农作物灌溉计划和应对水资源限制方面显示出其强大的实用性。AquaCrop 不…

VR导航的实现原理、技术优势和应用场景

VR导航通过虚拟现实技术提供沉浸式环境&#xff0c;结合室内定位技术实现精准导航。目前&#xff0c;VR导航已在多个领域展现出其独特的价值和潜力&#xff0c;预示着智能导航系统的未来发展。 一、实现原理 VR导航技术依托于虚拟现实(VR)和室内定位系统。VR技术利用计算机模…

Python考试复习---day5

1.打印商品名 ainput().split() print("商品列表&#xff1a;") for i,name in enumerate(a):print("{}\t{}".format(i,name))enumerate----枚举--利用它可以同时获得索引和值 enumerate多用于在for循环中得到计数 例如&#xff1a; list1 ["这&qu…

算法刷题笔记 数组元素的目标和(C++实现)

文章目录 题目描述解题思路实现代码 题目描述 给定两个升序排序的有序数组A和B&#xff0c;以及一个目标值x。数组下标从0开始。请你求出满足A[i]B[j]x的数对 (i,j)。数据保证有唯一解。 输入格式 第一行包含三个整数n,m,x分别表示A的长度&#xff0c;B的长度以及目标值x。第…

Netty SSL双向验证

Netty SSL双向验证 1. 环境说明2. 生成证书2.1. 创建根证书 密钥证书2.2. 生成请求证书密钥2.3. 生成csr请求证书2.4. ca证书对server.csr、client.csr签发生成x509证书2.5. 请求证书PKCS#8编码2.6. 输出文件 3. Java代码3.1. Server端3.2. Client端3.3. 证书存放 4. 运行效果4…

Java 高级语法

语法&#xff1a;Arrays.asList(值1&#xff0c;值2&#xff0c;....) 作用&#xff1a;它可以把一个数组或者多个参数转换成一个 List 集合 代码演示&#xff1a; //创建一个List类型的集合&#xff0c;其值为Integer类型&#xff0c;集合包含1,2,3三个数值 List<Intege…

消费者组到底是什么?no.15

Kafka的消费者组。 消费者组&#xff0c;即Consumer Group&#xff0c;应该算是Kafka比较有亮点的设计了。那么何谓Consumer Group呢&#xff1f;用一句话概括就是&#xff1a;Consumer Group是Kafka提供的可扩展且具有容错性的消费者机制。既然是一个组&#xff0c;那么组内必…

JavaScript 贪心算法(Greedy Algo)

贪婪是一种算法范式&#xff0c;它逐步构建解决方案&#xff0c;始终选择提供最明显和直接收益的下一个部分。贪婪算法用于解决优化问题。 如果问题具有以下属性&#xff0c;则可以使用贪心法解决优化问题&#xff1a; 每一步&#xff0c;我们都可以做出当前看来最好的选择&…

python项目中的日志定义

python日志定义&#xff0c;包含配置文件&#xff0c;和日志实例创建方法 一、日志创建方法&#xff0c;创建一个loger实例 import loggingdef get_logger(name):# 创建一个loggerlogger logging.getLogger(name)# 设置日志级别logger.setLevel(logging.INFO)# 创建一个日志…

elasticsearch有什么用

Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;它被广泛用于构建实时的、可扩展的搜索和分析应用程序。以下是Elasticsearch的主要用途和功能&#xff1a;12 全文搜索&#xff1a;Elasticsearch提供强大的全文搜索功能&#xff0c;可以处理大量的文本数据&…

开源模型应用落地-知识巩固-如何正确搭建生产级AI服务(一)

一、前言 将大语言模型集成至vllm,能够显著实现推理加速,让模型在处理任务时更加高效快捷,极大地提升了响应速度,减少用户等待时间。具体而言,一方面它能大幅提高吞吐量,vLLM 借助 PagedAttention巧妙地对attention中缓存的张量进行高效管理,从而达成比 HuggingFace Tra…