初始JavaScript详解【精选】

2023-12-22 22:00:00

Hi i,m JinXiang

? 前言 ?


本篇文章主要介绍初始JavaScript以及部分理论知识


🍉欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言


目录

?什么是JavaScript?

?JavaScript的使用

JS的组成

JavaScript的作用

HTML、CSS、JS 的关系(HTML--标记语言、CSS--描述类语言、JS-脚本语言)

三种方式使用JavaScript(行内、内部、外部)

JS中变量的使用(三种)

JS中的变量类型

一、变量类型的概述

二、变量类型的使用

三、变量类型总结

JS中字符串的使用

一、字符串使用概述

二、字符串使用方法

三、字符串使用总结

JS中数组的使用

一、数组使用概述

二、数组的使用方法

三、数组使用总结:


什么是JavaScript?

JavaScript是一种高级的脚本编程语言,通常用于网页开发。它是一门动态类型、面向对象的语言,通过在浏览器中解释运行,实现对网页中元素的交互、动态效果和数据处理等功能。

JavaScript最初被设计用于在网页上添加简单的交互效果,例如表单验证、图片切换等。但随着技术的发展和语言的更新,JavaScript逐渐发展成为一门功能丰富的编程语言,可以用于开发复杂的前端和后端应用。

JavaScript具有以下特点:

  • - 弱类型:变量可以动态改变类型。
  • - 客户端执行:在浏览器中解释执行,由客户端完成。
  • - 事件驱动:通过监听和响应事件来实现交互。
  • - 跨平台:能在各种设备上的浏览器中运行。

JavaScript与HTML和CSS结合使用,通过操作文档对象模型(DOM)实现动态页面效果。同时,JavaScript也可在服务器端运行,通过Node.js等环境实现后端开发。

总而言之,JavaScript是一门功能强大的脚本编程语言,用于开发网页上的交互效果和动态功能,并且可以在多个平台上运行。

JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(script是脚本的意思),脚本语言:不需要编译,运行过程中由js解释器,也可以基于node.js技术进行服务器端编程。

JavaScript的使用

JS的组成

ECMASctipt:JavaScript语法

DOM:页面文档对象模型

BOM:浏览器对象模型

JavaScript的作用

1、表单动态校验(密码强度检测)(JS产生的最初目的)

2、网页特效

3、服务端开发(Node.js)

4、桌面程序(Electron)

5、App(Cordova)

6、控制硬件-物联网(Ruff) 7、游戏开发

HTML、CSS、JS 的关系(HTML--标记语言、CSS--描述类语言、JS-脚本语言

  • HTML 决定网页结构和内容(决定看到什么),相当于人的身体

  • CSS决定网页呈现给用户的模样(决定是否好看),相当于给人穿衣服

  • JS 实现业务逻辑和页面控制(决定功能),相当于人的各种动作

三种方式使用JavaScript(行内、内部、外部)

1、行内方式:将JS代码直接嵌入到HTML文件中,在HTML的<script>标签内编写JavaScript代码。这种方式适用于简单的脚本和少量的交互效果。

行内方式代码示例:

<html>
<head>
  <title>行内方式</title>
</head>
<body>
  <h1>行内方式示例</h1>
  <script>
    alert("Hello, World!");
  </script>
</body>
</html>

2、内部文件方式:将JS代码编写在独立的.js文件中,通过&lt;script>标签引入到HTML文件中。这种方式适用于复杂的JavaScript代码和多个页面共用的脚本。

内部文件方式代码示例:

<html>
<head>
  <title>内部文件方式</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>内部文件方式示例</h1>
</body>
</html>

3、外部文件方式:将JS代码编写在独立的.js文件中,并通过&lt;script>标签引入到HTML文件中。这种方式适用于模块化开发和代码复用。

外部文件方式代码示例:

<html>
<head>
  <title>外部文件方式</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>外部文件方式示例</h1>
  <button onclick="greet()">点击我</button>
</body>
</html>

以上是JavaScript的三种常见使用方式,根据代码的复杂度和需要的功能,选择合适的方式来书写JavaScript代码。

JS中变量的使用(三种)

使用 var 关键字可以在全局范围内或函数内部声明变量。这种方式声明的变量可以被重新赋值。

1、先声明后赋值

//1、先声明后赋值
var name;
name='张三';

2、声明赋值

//2、声明赋值
var name = '王五';
alert(name)

3、不声明直接赋值

//3、不声明直接赋值
name = '李四';
alert(name)
</script>

JS中的变量类型

一、变量类型的概述

在JavaScript中,变量可以存储不同类型的值,包括以下几种常见的变量类型:

二、变量类型的使用

1、字符串 (String): 用来表示文本

var name = "John";
var message = 'Hello World';

2、数字 (Number): 用来表示数值,包括整数和浮点数

var age = 18;
var price = 9.99;

3、布尔值 (Boolean): 只有两个值true和false,用来表示真假

var isTrue = true;
var isFalse = false;

4、对象 (Object): 用来表示复杂的数据结构,可以包含多个属性和方法。

var person = {
  name: "John",
  age: 18,
  gender: "male"
};

?5、数组 (Array): 用来表示有序的列表,可以包含多个元素。

var fruits = ["apple", "banana", "orange"];

6、未定义 (Undefined): 表示一个未定义的值。

var undefinedValue;

除了以上常见的变量类型,JavaScript还有一些其他的特殊类型,如函数、日期等。在使用变量之前,需要先声明变量并赋予初始值。JavaScript是一种动态类型语言,变量的类型可以根据赋予的值自动推断,也可以随时修改变量的类型。

三、变量类型总结
变量类型类型描述
String字符串 (String): 用来表示文本
Number数字 (Number): 用来表示数值,包括整数和浮点数
Boolean布尔值 (Boolean): 只有两个值true和false,用来表示真假
Object对象 (Object): 用来表示复杂的数据结构,可以包含多个属性和方法。
Array数组 (Array): 用来表示有序的列表,可以包含多个元素
Undefined未定义 (Undefined): 表示一个未定义的值。

JS中字符串的使用

一、字符串使用概述

JS中的字符串是一种用于表示文本的数据类型,可以存储和操作一系列字符。

创建字符串的方式有两种,一种是使用单引号或双引号将文本包裹起来:

var str1 = 'Hello';
var str2 = "World";

另一种是使用字符串构造函数来创建字符串:

var str3 = new String("Hello World");
二、字符串使用方法

1、字符串可以使用索引来访问其中的字符,索引从0开始计数:

console.log(str1[0]); // 输出H
console.log(str2[1]); // 输出o

2、获取字符串长度:字符串的长度可以使用length属性获取:

console.log(str3.length); // 输出11

3、拼接元素:可以使用+运算符将多个字符串拼接起来:

var message = str1 + ' ' + str2;
console.log(message); // 输出Hello World

4、获取指定位置的字符:可以使用charAt()方法获取指定索引位置的字符:

console.log(str3.charAt(6)); // 输出W

5、截取字符串【开始,结尾】:可以使用substring()方法从字符串中提取子字符串:

console.log(str3.substring(6, 11)); // 输出World

6、获取字符的位置:可以使用indexOf()方法查找指定字符或子字符串在字符串中第一次出现的位置:

console.log(str3.indexOf('o')); // 输出4
console.log(str3.indexOf('llo')); // 输出2

7、分割字符(分割后的字符为数组类型)

//分割字符串
 ? ?var list = str.split(' ');
 ? ?document.write("<br>"+list[0]+"---"+list[3])

总结来说,JS中的字符串是一种不可变的数据类型,可以使用索引和一些方法来访问和操作其中的字符和子字符串。

三、字符串使用总结
字符串使用方法描述
字符串.length获取字符串长度:字符串的长度可以使用length属性获取
字符串元素+字符串元素拼接元素:可以使用+运算符将多个字符串拼接起来
charAt(下标)获取指定位置的字符:可以使用charAt()方法获取指定索引位置的字符
substring(开始,结尾)截取字符串【开始,结尾】:可以使用substring()方法从字符串中提取子字符串, 包含开头 不包含结尾
indexOf(“指定字符”)获取字符的位置:可以使用indexOf()方法查找指定字符或子字符串在字符串中第一次出现的位置
split(“指定字符进行分割”)分割字符(分割后的字符为数组类型)

JS中数组的使用

一、数组使用概述

JS中的数组是一种特殊的数据结构,可以存储多个值,并且可以通过索引来访问和修改这些值。

创建数组的方式有两种,一种是使用数组字面量,用方括号包裹元素,并且用逗号分隔每个元素:

var arr = [1, 2, 3, 4, 5];

另一种是使用Array构造函数,可以传入任意数量的参数来创建数组:

var arr = new Array(1, 2, 3, 4, 5);

可以使用索引来访问数组中的元素,索引从0开始计数:

console.log(arr[0]); // 输出1
console.log(arr[2]); // 输出3
二、数组的使用方法

1、修改数组元素:可以通过索引来修改数组中的元素:

arr[0] = 10;
console.log(arr); // 输出[10, 2, 3, 4, 5]

2、获取数组长度:可以通过length属性获取数组的长度:

console.log(arr.length); // 输出5

3、在末尾添加一个或多个元素:可以使用push()方法向数组末尾添加一个或多个元素:

arr.push(6);
console.log(arr); // 输出[10, 2, 3, 4, 5, 6]

4、删除最后一个元素:可以使用pop()方法删除并返回数组的最后一个元素:

var lastElement = arr.pop();
console.log(lastElement); // 输出6
console.log(arr); // 输出[10, 2, 3, 4, 5]

总结来说,JS中的数组是一种有序的数据集合,可以通过索引来访问和修改其中的元素,还可以使用一些方法来操作数组。

三、数组使用总结:
数组元素使用描述
数组[下标]=需要修改的元素修改数组元素:通过索引来修改数组中的元素
数组.length获取数组长度:通过length属性获取数组的长度
数组.push()在末尾添加一个或多个元素:使用push()方法向数组末尾添加一个或多个元素
数组.pop()删除最后一个元素:使用pop()方法删除并返回数组的最后一个元素

总结不易,希望宝宝们不要吝啬亲爱的👍哟(^U^)ノ~YO!如有问题,欢迎评论区批评指正😁

文章来源:https://blog.csdn.net/Jin_Xiang123/article/details/135160072
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。