JavaScript的一些基础问题

已于 2022-03-14 20:48:51 修改
阅读量752 收藏 1
点赞数
分类专栏： # js 文章标签： javascript 前端 html
于 2022-02-24 11:34:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51045721/article/details/123108086
版权

文章目录

1.JavaScript是一种脚本语言

高级编程语言，，和python一样，不需要编译，解释型语言可以基于Node.js进行服务器编程

  • 最初是为了做表单验证的，后面用于，网页特效，服务端开发，桌面程序，app，控制硬件，游戏开发等等

  • html-css-JavaScript

  • 浏览器组成：渲染引擎，JS引擎，比如谷歌的v8，，，js执行语言是逐行解释的

  • JS组成：ECMAscript 、DOM 、BOM

2.写法

有三种，行内式、内嵌式、外部js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        // alert('hei')
    </script>
    <!-- 3.外部js写法 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1.行内式的js  直接写在元素的内部 -->
    <!-- <input type="button" value="唐伯虎" οnclick="alert('秋香')"> -->
</body>

</html>

在这里插入图片描述
在这里插入图片描述

3.输出语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 输入框
        prompt('请输入年龄')
        // alert 弹出警示框  弹出的 给用户看的 
        alert('计算的结果时：')
        // console 控制台输出 给程序员测试用的   f12
        console.log('只有程序员才能看到')
    </script>
</head>

<body>

</body>

</html>

4.变量

就是一个装东西的盒子，用于存放数据，在内存中开辟一片空间，变量是内存的空间

通过变量名获取数据，甚至可以修改数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //  1.声明了一个age 变量
        var age;

        // 2. 赋值  把值存入这个变量之中
        age = 18;

        // 3.输出结果
        console.log(age);

        // 4.变量的初始化  直接创建并使用
        var myname = '717';
        console.log(myname);
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述
变量案例-弹出用户名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.用户输入姓名 并存储到一个变量中
        var myname = prompt('请输入名字');
        // 2.输出这个输入的
        alert(myname);
    </script>
</head>

<body>

</body>

</html>

变量的语法扩展

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.更新变量
        // var myname = 'hxb'
        // console.log(myname);
        // myname = 'wdn'
        // // 输出
        // console.log(myname)

        // 2.声明多个变量
        // var age = '19',
        //     address = '717',
        //     sex = '2';

        // 3.声明变量的特殊情况
        // 3.1 只声明不赋值，结果是  undefined,程序也不知道存放的是啥
        // var sex;
        // console.log(sex);

        // 3.2 不声明不赋值，直接使用会导致某个代码报错
        // 3.3 不声明直接赋值使用  这是可以的，但是就容易变成全局变量
        qq = 110;
        console.log(qq);

    </script>

</head>

<body>

</body>

</html>

变量的命名规范

和标识符一样，第一个位置不能是数字，驼峰式的命名

可以由字母 下划线_ $ 符开头

严格区分大小写

不能是关键字，保留字name ，如var for while if 等等

变量名必须有意义

驼峰式的命名，如 myFirstName

案例-交换两个变量的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js 是编程语言，有很强的逻辑性：实现这个思路 先怎么做，后怎么做
        // 1. 需要一个临时变量
        // 2. 把apple1 给我们的临时变量temp
        // 再把apple2 里的给apple1
        // 再把临时变量里的内容给apple2

        var temp;//声明临时变量
        var apple1 = '11';
        var apple2 = '22';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;

        console.log(apple1);
        console.log(apple2);
    </script>
</head>

<body>

</body>

</html>

5.变量的数据类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // int num = 10;   java
        // var num; //这里的num不能够确定他的数据类型

        var num = 10;  //num 属于数字型
        // js 的变量数据类型只有在程序运行的过程中，根据等号右边的值 才能确定


        // js 是动态语言，变量的数据类型是可以变化的
        var x = 10;  //整型
        x = 'pinl'; //字符串
    </script>
</head>

<body>

</body>

</html>

数据类型的分类：简单的，复杂的

在js 中 八进制前面加0，十六进制前面加0x；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;//数字型
        var PI = 3.14; //数字型
        // 1.八进制 0 ~ 7 程序里数字前面加 0 ，表示八进制；
        var num1 = 010;
        console.log(num1); //010  八进制，转换为二进制就是 9

        var num2 = 012;
        console.log(num2);

        // 2.十六进制 0~9 a~f  #ffffff  数字前面加 0x  表示十六进制
        var num3 = 0x9;//输出9
        console.log(num3);

        var num4 = 0xa; //输出10
        console.log(num4);

        //3.数字型的最大值
        console.log(Number.MAX_VALUE);

        //4.数字型的最小值
        console.log(Number.MIN_VALUE);

        //5.无穷大
        console.log(Number.MIN_VALUE * 2);  //Infinity  无穷大

        //6.无穷小
        console.log(-Number.MIN_VALUE * 2);  //-Infinity 无穷小

        //7.非数字
        console.log('pink' - 100);  //NaN
    </script>
</head>

<body>

</body>

</html>

数字型范围：

alter(Number.MAX_VALUE);
alter(Number.MIN_VALUE);

isNaN()—判断是否为数字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //isNaN() 这个方法用来判断非数字，并且返回一个值 如果是hi数字就返回的是 false 如果不是数字就返回 true
        console.log(isNaN(12));//false
    </script>
</head>
 
<body>
</body>
</html>

字符串型——单引号，双引号

嵌套原则：外双内单，外单内双

字符串换行：\n
空格：\b
缩进：\t

字符串长度以及拼接

length

字符串拼接——数值相加，字符相连

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.检测获取字符串的长度 length
        var str = 'my name is 11'
        console.log(str.length);//  13

        //2.字符串的拼接 +   主要有字符串和其他类型相拼接 最终的结果是 字符串
        console.log('hxb' + 'wdn'); //字符串的hxb wdn
        console.log('hxb' + 22);//hxb22
        console.log('hxb' + true);//hxbtrue
        console.log(12 + 12);//24
        console.log('12' + 12);//1212
    </script>
</head>

<body>

</body>

</html>

练习–显示年龄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //弹出输入框 prompt 让用户输入年龄（用户输入）
        //把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
        //使用alert 语句弹出警示框（输出结果）
        var age = prompt('请输入年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>
</head>

<body>

</body>

</html>

布尔型：true 1，false 0

获取变量的数据类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        console.log(typeof num);//number

        var str = 'qw';
        console.log(typeof str);//string

        var flag = true;
        console.log(typeof flag);//bollean

        var vari = undefined
        console.log(typeof vari);//undefined

        var timer = null;
        console.log(typeof timer);//object

        // prompt 取过来的值是 字符型

    </script>
</head>

<body>

</body>

</html>

数据类型的转换

  • 转换为字符串
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1. 把数字型转换为字符串型 变量.tostring()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);

        //2.利用 String(变量)
        console.log(String(num));

        //3.利用 + 拼接字符串的方法实现转换效果  隐式转换--常用
        console.log(num + '');
    </script>
</head>

<body>

</body>

</html>

转换为数字型
在这里插入图片描述
前两种方法常用些

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = prompt('请输入你的年龄：')
        // 1.parseInt(变量)  可以把字符型转换为整型，但是取到的是整数
        console.log(parseInt(age));
        console.log(parseInt('3.14'));// 取整 3
        console.log(parseInt('120px'));//120
        console.log(parseInt('re34px'));//NaN

        //2.parseFloat(变量) 可以把字符型转换为整型，得到的是 浮点数
        console.log(parseFloat(age));
        console.log(parseFloat('3.14'));//  3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('re34px'));//NaN

        //3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));

        //4. 利用算数运算 - * / 隐式转换
        console.log('12' - 0);//12
        console.log('123' - '12');//111
    </script>
</head>

<body>

</body>

</html>

类型转换案例–计算年龄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //弹出一个输入框prompt,让用户输入出生年份（用户输入）
        //把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是今年的年龄(程序内部处理)
        //弹出警示框alert(),把计算的结果输出 (输出结果)

        var age = prompt("请输入你的出身年份")
        var str = '您的年龄是' + Number(2022 - age);

        // 简化
        var aa = 2018 - age;

        //alert(str);
        alert(aa);
    </script>
</head>

<body>

</body>

</html>

转换为布尔型——Boolean()函数

代表空、否定的词语会被转换为false

变量的小练习–

alert实现输出多个变量并换行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.分别提示输入姓名 年龄 性别
        //2.输出结果
        //注意 alert的参数只有一个，要弹出多个，需要下面这样做
        var mingzi = prompt('您的姓名是：');

        var age = prompt('您的年龄是');

        var sex = prompt('您的性别是：');

        var str = '您的姓名是：' + mingzi + '\n' + '您的年龄是:' + age + '\n' + '您的性别是：' + sex;
        alert(str);

    </script>
</head>

<body>

</body>

</html>

运算符

注意进行计算的时候避免使用浮点数

不要直接比较两个数的值

判断是否能够被整除—取余

Dn_wh
关注
专栏目录
js基础问题
liuliuliu_666的博客
07-27 180
1、 promise里面如果直接return了？ 链接上来： https://juejin.im/post/5e58c618e51d4526ed66b5cf Promise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log) .then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。 第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了穿透，将resolve(
javascript教案 JavaScript基础
03-27
javascript教案 JavaScript基础 【实例简介】javascript教案 javascript学习指导，语法基础的指导及编写格式和方法的说明 第一章 概述 4 1．1 JavaScript的由来 4 1．2 什么是JavaScript 4 1．3 JavaScript的特点...
JS基础问题
weixin_41086056的博客
04-23 524
类型判断 判断JS中数据类型的几种方法: typeof、instanceof、constructor、prototype、比较运算符等; 1、JS基本类型的语法比较 {} == {} 比较结果为false [1] == [1] 比较结果为false null == null 比较结果为true undefined == null 比较结果为true undefined === null 比较结果为...
10个非常基础的 Javascript 问题
最新发布
2401_86367399的博客
09-09 1124
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
JavaScript常见基础问题汇总
Hito的博客
06-19 356
javascript中not defined、undefined、null以及NaN的区别 not defined：使用未定义的变量运算，程序会报错；undefined：变量未赋值（没有被初始化）或对象成员不存在；null：空对象（常用来表示函数企图返回一个不存在的对象），undefined是派生自null，所以有undefined==null；NaN：Not a Number，当运算无法返回正
javascript基础问题整理(持续更新)
qq_27368993的博客
07-25 798
文章目录1.Number运算操作2.空位数组行为差异3.Object和Map的选择对比内存占用插入性能查找速度删除性能4.weakMap特性 1.Number运算操作 Javascript浮点值采用得是IEEE-754双精度标准模型。因此是占用8个字节的内存空间,因为设计精度问题,所以不能测试特定的浮点值,比如:0.1+0.2 != 0.3。具体的计算流程和原因可以参考这篇Number类型详解博客 。js高程第四版有说存储整形值比浮点值的内存空间减少一半,但javascript数值只有Number类型,并且
javascript基础练习，一些有趣的小游戏
10-18
javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，...
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
基于Javascript编程基础知识基于Javascript编程基础知识基于Java基于Javascript编程基础知识.zip
05-08
基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程...
JS基础--问题记录
weixin_30763397的博客
03-12 80
1. {}var a={};{}是一个空的对象，是 new Object();的简写。2.判断元素是存在 //jQuery 对象中元素的个数。当前匹配的元素个数。 size 将返回相同的值。 if ($("#resultDiv").length > 0) { 　　　$("#resultDiv").remove(); } 3.jquery里面如何跳出each循环 retur...
javascript中常见的基础问题（问题及答案）
BiBbo的博客
09-22 378
1、边框有哪些线 实线：solid 虚线：dashed 双实线：double 2、设置背景颜色为白色透明度为0.2，兼容五大浏览器的写法 background-color:white;opcity:0.2;或background-color:while 0.2; 3、表格合并行和列 合并行：colspen 合并列：rowspen 4、设置圆角，左上角为10px，右上角为0px，左下角为5px border-radius:10px 0px 0px 5px 5、写出4中伪类元素 ...
Javascript基础常见问题汇总
qq_15041931的博客
04-04 658
JavaScript中如何检测一个变量是一个String类型？请写出函数实现 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 请用js去除字符串空格？ 方法一：使用replace正则匹配的方法 去除所有空格: str = str.replace(/\s*/g,""); 去除两头空格: ...
一些简单js基础问题记录（长期更新）
ITT13021的博客
10-27 306
[1] == [1] // output: false在js中，[]是对象，当两个对象进行比较时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。 2. undefined == null // output: true undefined === null // output: false在js中 undefin
Javascript基础.xmind
07-31
JavaScript基础三天总结
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
【JavaScript】JS基础问题总结大全，简单学习JS，看这个系列就够了！（一）
旅城的博客
11-26 335
JS基础问题总结大全（一）一、JS的数据类型二、原始值和引用值类型及区别三、判断变量的类型四、数据类型的转换 一、JS的数据类型 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。 基本类型 JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、Stri
五个JavaScript基础问题
wjxbj的博客
10-25 74
下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。         这个问题的诀窍是，这里有两个变量声明，但 a 使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值