javaScript学习（一）基本语法快速过关

爱笑的蓝孩子～

已于 2023-07-12 22:25:44 修改

阅读量74

点赞数 1

分类专栏：前端学习文章标签： javascript 学习开发语言前端

于 2023-07-11 20:16:50 首次发布

本文链接：https://blog.csdn.net/qq_67931344/article/details/131659184

版权

前端学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这是第一篇关于javaScript学习的博客，主要是快速把基本语法过一遍，包括引入方法，常用的语句，控制语句，以及比较不一样的数组。希望能对大家有所帮助~

一.初识

1.javascript的作用

JavaScript是一种广泛应用于网页开发的脚本语言，具有简单易学和灵活高效的特点。
能够使网页内容实现动态更新、用户交互和数据处理等功能，为用户提供更加流畅、生动和个性化的网页浏览体验

简单来说：就是让用户有更好的交互体验，点击有弹窗，数据读处理等。

2.引入方式

作为老牌的三件套，html，css，javascript中的头牌，它很重要，同样也是基于html的框架之上。创建html文件，在上面进行操作即可。

嵌入式
嵌入式：是用一个标签包裹着javascript的代码，如下。

<script type="text/javascript">
       javascript的内嵌式引入
</script>

外链式
和css的引入方式一样，将JavaScript的代码放在一个js为扩展名的文件，引用即可。
示例代码：

<script src="js文件路径"></script>

行内式
在html的标签中，写出效果,如点击有弹窗效果。

<input type='button' onclick='alert('hello')'; vlaue='test'>

其中最常用的，当然还是内嵌式，引入jar包时，会用到外链式。

二.基本语法

1.常用输出语句

alert（）
实现弹窗效果,一般用来警示效果或提示。

alert("弹窗成功！");

效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/6017bc595ae54762bd29da0fb1077357.png

console.log
用于在浏览器控制台上输出内容，一般用来测试，按F12或检查进入开发者模式查看。

console.log("hello！");

效果图：
在这里插入图片描述

document.write()
文档英文：document
所以它指的是在html页面文档输出内容。

document.write("hello！");

效果图：
在这里插入图片描述

prompt（）
弹出输入框，还有确认和取消按钮。

prompt("输入任意数字！");

效果图：
在这里插入图片描述

2.运算

和很多语言一样，可以使用四则运算，字符串拼接，比较大小，具体分类如下。

+，-，* ，/ ：加减乘除
%：取余
+：可以用于字符串拼接
==：判断值是否相等

算术运算符
字符串运算符
赋值运算符
比较运算符
逻辑运算
位运算
运算符优先级

3.变量的声明

javascript中的变量数据类型和许多语言一样，有各种数据类型，这里就不一一介绍了。

语言特殊之处，所有数据类型都可以用var来声明。

var i=99;
var o=99.1;
var w="哈哈哈";

typeof可以判断输入的值是什么类型。

var i=99;
console.log(typeof i);

输出结果为：number

转换数据类型：
如parseInt（）–转换为数值型，parseFloat（）…

var num1='99';
var num2='1';
console.log(parseInt(num1)+parseInt(num2));

一开始的两个变量都是字符串，转换为数值型int再相加计算,输出100。

声明变量，不仅可以用var，还可以使用let，const，同样也是不考虑数据类型的。
主要区别如下：
（1）var 声明：var 是在早期的 JavaScript 中用于声明变量的关键字，一直通用的。
（2）let 声明：它具有块级作用域，意味着变量在声明的块（通常是由花括号 {} 包围的代码段）内可见。
（3）const 声明：声明常量的。

var i=1;
const height=100;   //设置高度为100cm，为常量
{let i=10;}         //这里只是简单介绍

三.控制语句

1.if-else语句

各个编程语言中的老熟人了，想必都有所了解。
格式示例如下：

var age=19;
if（age>18）       
{console.log("已成年了")}
 else
 {console.log("未成年")}

输出：已成年了

2.switch语句

switch选择语句，和case搭配使用。

case来匹配对应值，break用来跳出选择语句。
default用来输出如果都没有case匹配成功输出的值，可以理解为托底。
格式以示例形式编写如下：

var sc=98;
switch(sc/10){
case 10 : console.log("完美")； break；
case 9 : console.log("优秀")； break；
case 8 : console.log("良好")； break；
default：console.log("差")；
}

3.while循环语句

while语句
格式如下：

var i=1;
while(i<=10){      //如果i小于等于10，就一直执行循环体内容
i++;            //循环体
}
console.log(i);

最后输出：10

do-while语句
和while的区别就是，不管是否符合循环条件，先执行一次再进行语句的判断。

do{
循环体语句；
}while（循环条件）；

4.for循环

for循环是最常用的循环，将第一个while循环改写。

for(var i=1;i<=10;i++){
 console.log(i);
}

输出：从1一次输出到10。

注意，写循环语句，一定要写跳出循环的条件，不然就是死循环

5.题目练习

要求：输出从1到100的素（质）数的个数，并输出所有素数。
思考：素数和1取余为0，别的都不为0，从2开始遍历到该数字前一位，便可判断该数字是不是素数了。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var num=2;        //从2开始检验是否为素数
  var max=100;      //设置最大值
  var count=0;      //初始化素数的个数
for (num;num<=max;num++){
    var p = true;                         //指针，默认是素数
      for (var i=2;i<=num-2;i++) {
          if (num % i == 0) {            //检验是否素数
              p = false;                 //该数字判断不是素数
          }
      }
          if (p){                  //如果该数字是字数则进入这条语句
               count++;            //素数的个数依次增加
              document.write(num+"  ")
          }
  }
document.write('<br>1到100的素数有:'+count+'个');
</script>
</body>
</html>

输出：
在这里插入图片描述

四.数组（重点）

前面的知识点在其他语言中或多或少都有所涉及。
但是下面的知识点就体现了javaScript语言自身的特点了，从数组往后，每一章知识点都很重要，需要彻底掌握才行。

1.初始数组

数组是储存一系列值的变量集合，各元素之间用’,'隔开，下标索引从1开始。和别的语言不同，这里的元素可以是任意数据类型，如数值型，字符串类型，数组，甚至是对象。

2.创建数组

第一种方法：Array对象来创建数组
通过new关键字实现，代码示例如下：

  //元素值为字符型
  var area=new Array('beijing','shanghai','sz');
 //元素值为数值型
  var area=new Array(1,22,31,422,221);
   //元素值为混合型
  var area=new Array('beijing','shanghai',22，null);
    //空数组
  var area=new Array();

第二种方法：使用[]来创建数组
直接将new Array（）替换成[]即可，示例代码如下：

var weather=['wind','fine'];

3.数组的基本操作

length:获取数组的长度，这里需要的是这里不仅可以获取还可以修改长度。如果修改后长度比原来短，截取原数组前面部分；反之，将原数组扩容。
arr[i]:获取索引为i对应数组中的元素值。
数组的添加，修改，删除
示例代码如下：

//首先，创建一个数组
var arr=[1,2,3,5,'java之父余胜军']；
//修改元素
arr[2]=55;
//添加元素
arr[5]=99;
//删除元素
delete arr[1];

注意：这里的删除只是把元素删除了，它的下标和位置还是占存储空间的，只是数值变成了未定义了。新的数组为：

数组的遍历，for循环。
示例代码如下：

//这里选择在界面上输出，也可以选择在控制台上输出
   for (var i=0;i<arr.length;i++){
     document.write(arr[i]+"  ");
   }

4.二维数组

二维数组，有一个个一维数组组成，和一维的建立方式区别不大，同样是两种创建方式。
代码如下所示:

//空的二维数组
var arr1=new Array(new Array,new Array);
//有元素了
var arr11=new Array(new Array（1,12，"小明"）,new Array（2,12，"小红"）);
//方式2：[]
var arr2=[[1,3],[2,4]];

5.数组常用方法

push（）：添加元素到数组尾部，并返回数组新的长度。
pop（）：从数组尾部移除一个元素，并返回元素。
includes（）：判断数组中是否含有该元素，有true，没有false。
indexOf（）：返回给定值在数组中的索引。（从左到右第一个）
toString（）：将数组以字符串的形式输出。
sort（）：给指定数组排序
reverse（）：将数组顺序颠倒
concat（）：连接两个数组，合并成一个新的数组。

6.伪数组

js中有一个伪数组：argument，它一般可以看做是一个抽象的数组，未确定好的，一般用在函数中，后面会提到。
arguments表示传参列表，它和实参列表相对应

示例：

function test(x){
            console.log(arguments);  //arguments=[1,2,3]
        }
        test(1,2,3)

在这里插入图片描述

第一篇的javaScript的学习就此结束了，但更重要的学习才刚刚开始。但还是要恭喜一下，开始的基础部分终于结束啦。撒花✿✿ヽ(°▽°)ノ✿。

爱笑的蓝孩子～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
javaScript学习（一）基本语法快速过关

这是第一篇关于javaScript学习的博客，主要是快速把基本语法过一遍，包括引入方法，常用的语句，控制语句，以及比较不一样的数组。希望能对大家有所帮助~
复制链接

扫一扫

专栏目录

javaScript学习 （一）基本语法快速过关

javaScript的基本语法

一.初识

1.javascript的作用

2.引入方式

二.基本语法

1.常用输出语句

2.运算

3.变量的声明

三.控制语句

1.if-else语句

2.switch语句

3.while循环语句

4.for循环

5.题目练习

四.数组（重点）

1.初始数组

2.创建数组

3.数组的基本操作

4.二维数组

5.数组常用方法

6.伪数组

javaScript学习（一）基本语法快速过关