JS入门简述

最新推荐文章于 2024-10-11 17:39:47 发布

m0_45275473

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量169

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_45275473/article/details/117670351

版权

一、JS编写位置

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

二、变量声明与数据类型

1. 使用var声明变量
使用 var 可声明全局或函数级别作用域的变量，声明语法存在以下几种方式。
方式一：var 变量名;
方式二：var 变量名1,变量名2,…,变量名n;
方式三：var 变量名1 ＝值1,变量名2 = 值2,…,变量名n ＝值n;

1) 使用 var 可以一次声明一个变量，也可以一次声明多个变量，不同变量之间使用逗号隔开。例如：
1.var name; //一次声明一个变量
2.var name,age,gender; //一次声明多个变量

2) 声明变量时可以不初始化（即赋初值），此时其值默认为 undefined；也可以在声明变量的同时初始化变量。例如：
1.var name = "张三"; //声明的同时初始化变量
2.var name = "张三",age = 20,gender; //在一条声明中初始化部分变量
3.var name = "张三",age=20,gender = ’女’; //在一条声明中初始化全部变量

3) 变量的具体数据类型根据所赋的值的数据类型来确定，例如：
1.var message = "hello";//值为字符串类型，所以message变量的类型为字符串类型
2.var message = 123; //值为数字类型，所以message变量的类型为数字类型
3.Var message = true;//值为布尔类型，所以message变量的类型为布尔类型

4) 在实际应用中，常常直接将循环变量的声明作为循环语法的一部分。例如：
1.for(var i=0;i<10;i+=){…}。
2.使用let声明变量
使用 let 可以声明块级别作用域的变量，声明的格式和 var 声明变量的格式一样存在 3 种方式，如下所示：
方式一：let 变量名;
方式二：let 变量名1,变量名2,…,变量名n;
方式三：let 变量名1＝值1,变量名2=值2,…,变量名n＝值n;

使用 let 声明变量的语法说明和 var 声明变量的完全相同，在此不再赘述。使用 let 声明变量的示例如下：
纯文本复制
1.let age;
2.let age = 32,name = "Tom";
3.使用const声明变量
使用 var 和 let 声明的变量在脚本代码的运行过程中，值可以改变。如果希望变量的值在脚本代码的整个运行过程中保持不变，需要使用 const 来声明，声明格式如下：
const 变量名 = 值;
需要特别注意的是：使用 const 声明变量时，必须给变量赋初值，且该值在整个代码的运行过程中不能被修改。另外，变量也不能重复多次声明。这些要求任何一点没满足都会报错。

使用 const 声明变量的示例如下：
1.const pi = 3.1415;
4.3种变量声明方式的区别
1) 变量初始化要求不同：var 和 let 声明变量时可以不需要初始化，没有初始化的变量的值为“undefined”，在代码的运行过程中变量的值可以被修改。const 声明变量时必须初始化，并且在代码的整个运行过程中不能修改初始化值，否则运行时会报错。例如：
1.var gv1;
2.let lv1;
3.const pi;
4.console.log("gb1=" + gv1);
5.console.log("lv1=" + lv1);
JS数据类型：基础概念
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

请注意：JS的数据类型有8种。
在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。

谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。
JS数据类型：JS 的数据类型有几种？
8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。
JS数据类型：Object 中包含了哪几种类型？
其中包含了Data、function、Array等。这三种是常规用的。
JS数据类型：JS的基本类型和引用类型有哪些呢？
基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
引用类型：object。里面包含的 function、Array、Date。
JS数据类型：JS 中 typeof 输出分别是什么？
{ } 、[ ] 输出 object。
    console.log( ) 输出 function。
    注意一点：NaN 是 Number 中的一种，非Number
String   字符串
Number 数据类型
Boolean 布尔型
Undefined 没有初始化、定义的值
Null Object 不存在的对象
NaN Number Number 中的特殊数值
Object Function

三、运算符

算数运算符
运算符   描述   例子   x 运算结果   y 运算结果   在线实例
+   加法   x=y+2   7   5
-   减法   x=y-2   3   5
*   乘法   x=y*2   10   5
/   除法   x=y/2   2.5   5
%   取模（余数）   x=y%2   1   5
++   自增   x=++y   6   6
       x=y++   5   6
--   自减   x=--y   4   4
       x=y--   5   4
赋值运算符
算符   例子   等同于   运算结果   在线实例
=   x=y        x=5   实例 »
+=   x+=y   x=x+y   x=15
-=   x-=y   x=x-y   x=5
*=   x*=y   x=x*y   x=50
/=   x/=y   x=x/y   x=2
%=   x%=y   x=x%y   x=0
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。
实例
如需把两个或多个字符串变量连接起来，请使用 + 运算符：
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt3 运算结果如下:
What a verynice day
对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
实例
x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:
10
55
Hello5
JavaScript 比较运算符
运算符   描述
==   等于
===   等值等型
!=   不相等
!==   不等值或不等型
>   大于
<   小于
>=   大于或等于
<=   小于或等于
?   三元运算符
JavaScript 逻辑运算符
运算符   描述
&&   逻辑与
||   逻辑或
!   逻辑非
注释：JS 比较这一章中完整描述了逻辑运算符。
JavaScript 位运算符
位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
运算符   描述   例子   等同于   结果   十进制
&   与   5 & 1   0101 & 0001   0001   1
|   或   5 | 1   0101 | 0001   0101   5
~   非   ~ 5   ~0101   1010   10
^   异或   5 ^ 1   0101 ^ 0001   0100   4
<<   零填充左位移   5 << 1   0101 << 1   1010   10
>>   有符号右位移   5 >> 1   0101 >> 1   0010   2
>>>   零填充右位移   5 >>> 1   0101 >>> 1   0010   2

四、JS if语句与Switch语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句
只有当指定条件为 true 时，该语句才会执行代码。
语法
if (condition)
{
    当条件为 true 时执行的代码
}
请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
实例
当时间小于 20:00 时，生成问候 "Good day"：
if (time<20) { x="Good day"; }
<px 的结果是：
Good day
if...else 语句
请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
if...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。
语法
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和条件 2 都不为 true 时执行的代码
}
请使用 switch 语句来选择要执行的多个代码块之一。
语法
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; ddefault: 与 case 1 和 case 2 不同时执行的代码 }
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
使用 default 关键词来规定匹配不存在时做的事情。

五、JS for循环与while循环

for - 循环代码块一定的次数
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
实例
for (var i=0; i<5; i++) { x=x + "该数字为 " + i + "<br>"; }
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）：