JavaScript（一）

已于 2022-12-27 16:08:22 修改
阅读量323 收藏 1
点赞数
文章标签： javascript 前端 开发语言
于 2022-12-03 20:52:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ruuuuvh/article/details/128119260
版权

JavaScript（一）

1、JS的HelloWorld

  • 控制浏览器弹出一个警告框
<!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 type="text/javascript">
        alert("hello")
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

  • document.write（）可以向body中输出一个内容
<script type="text/javascript">
    document.write("原为一盏灯，引你入凡尘")
    </script>

在这里插入图片描述

  • 向控制台输出一个内容
<script type="text/javascript">
    console.log("wwwwwww你猜")
    </script>

在这里插入图片描述
注：JS代码 从上到下，一行一行地执行

2、JS编写位置

  • <button>可以将JS代码编写到标签的onclick属性中

在这里插入图片描述

<body>
    <button onclick="alert('66666')">点我一下</button>
</body>

在这里插入图片描述
当我们点击按钮时，JS代码才会执行

  • 可以将JS代码写在超链接的herf属性中，这样当点击超链接时，会执行JS代码。
  • 可以将JS代码编写到外部JS文件中，然后通过script标签引入
  • 写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐
<script type="text/javascript" src="js/1.js"></script>

注：script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略。如果需要则可以再创建一个新的script标签用于编写内部代码。

<script type="text/javascript" src="js/1.js"></script>
    <script type="text/javascript">
        alert("我是内部的JS代码");
    </script>

alert("我是外部的JS代码");

3、JS基本语法

JS注释：多行注释，注释中的内容不会被执行，但是可以在源代码中查看。
多行注释：/* */

<script type="text/javascript">
        /*
        注释
        */
    </script>

单行注释：//

<script type="text/javascript">
        //
    </script>
  • JS中严格区分大小写
  • JS中每一行语句都以分号；结尾（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候，系统会加错分号）
  • JS中会忽略多个空格和换行，即利用空格和换行对代码进行格式化

4、字面量和变量

字面量：不可改变的量 （可直接使用）
变量：可以用来保存字面量，且值可任意改变
声明变量：在js使用var关键字来声明一个变量 var a;
为变量赋值：a=123;
同时进行声明和赋值：var b=789；

5、标识符

在所有JS中所有可以自主命名的都可以称为标识符
例：变量名，函数名，属性名

需遵守如下规定：

（1）标识符中可以包含字母、数字、_、$
（2）不能以数字开头
（3）不能是ES中关键字或保留字
在这里插入图片描述
在这里插入图片描述
（4）一般都采用驼峰命名法（首字母小写，每个单词开头字母大写，其余字母小写）

helloworld→helloWorld
xxxyyyzzz→xxxYyyZzz

JS底层保存标识符时实际上采用的Unicode编码
所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

6、字符串

数据类型指的是字面量的类型。
JS中一共有六种数据类型

String 字符串（基本数据类型）
Number 数值（基本数据类型）
Boolean 布尔值（基本数据类型）
Null 空值（基本数据类型）
undefined 未定义（基本数据类型）
Object 对象（引用数据类型）

  • String 字符串

在JS中字符串需要用引号引起来var str="hello";
注：单双引号均可，不能混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

在字符串中我们可以使用\作为转义字符，当使用一些特殊符号时可以用\转义
\“ 表示”
\‘ 表示’
\n 表示换行
在这里插入图片描述
\t 制表符
\\ 表示斜杠
输出字面量 字符串str：alert("str");
输出变量 str：alert(str);

  • Number 数值

用来表示整型和浮点数
可以利用typeof运算符检查一个变量的类型

<script type="text/javascript">
        var a = 666;
        var b = "666";
        // console.log(typeof a);
        console.log(typeof b);
    </script>

注：Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity

最大值：Number.Max_VALUE
最小值：Number.Min_VALUE
0以上的最小值：5e-324
正无穷：Infinity
负无穷：-Infinity
注：特殊数字NaN，表示Not A Number

  • Boolean 布尔值

用于做逻辑判断

true
false

<script type="text/javascript">
        var bool = false;
        console.log(typeof bool);
    </script>
  • Null 空值

只有一个值的数据类型，这个特殊的值是 null
从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object

  • Undefined 未定义

只有一个值的数据类型，这个特殊的值是 undefined
声明一个变量，但不是给变量赋值时，它的值就是undefined
使用typeof对没有初始化和没有声明的变量，会返回undefined

7、强制类型转换

将其它的数据类型转换为String、Number、Boolean

  • 转换为String类型

（1）调用被转换数据类型的toString( )方法
该方法不会影响到原变量，它会将转换的结果返回
注：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错

var a = 666;
var a = a.toString();
console.log(typeof a)
console.log(a);

（2）调用String()函数，并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString( )方法
注：对于null和undefined则会直接调用对应类型

var a = 666;
var a = String(a);
console.log(typeof a)
console.log(a);
  • 转换为Number

（1）使用Number()函数

var a = "123";
var a = Number(a);
console.log(typeof a)
console.log(a);

字符串→数字
①纯数字的字符串,则直接将其转换为数字
②字符串中有非数字的内容,则转换为NaN
③字符串是一个空串或者是一个全是空格的字符串,则转换为0

布尔值→数字
①true 转成1
②false 转成0

Null→数字 0

Undefined→数字 NaN

（2）针对字符串，parseInt() 把一个字符串转换为一个整数

var a = "666px";
var a = parseInt(a);
console.log(typeof a)
console.log(a);

（3）parseFloat() 把一个字符串转换为一个浮点数

var a = "666.99px";
var a = parseFloat(a);
console.log(typeof a)
console.log(a);

其他进制的数字：
在JS中如果需要表示16进制的数字，需以0x开头
表示8进制的数字，需以0开头
表示2进制的数字，需以0b开头

<script type="text/javascript">
        var a = "070";
        var a = parseInt(a,10);
        console.log(typeof a)
        console.log(a);
    </script>

如"070"字符串，可能会当成八进制或十进制解析
可在parseInt()中传递一个第二个参数，来指定数字的进制

  • 转换为Boolean类型

数字→布尔

除了0和NaN，其余的都是true

字符串→布尔

除了空串，其余的都是true

8、运算符

通过运算符可以对一个或多个值进行运算并获取运算结果

  • 算数运算符（可进行隐式转换）

在这里插入图片描述
注：任何的值和字符串做加法运算，会先转换为字符串，然后拼串

无论是a++ 还是++a，都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量新值（自增后的值）
自减同理

  • 一元运算符

对于非Number类型的值
它会先转换为Number，然后再运算
可以对一个其他的数据类型使用+，将其转换为number
原理与Number()函数一样

<script type="text/javascript">
        a = true;
        var a = 2;
        a = +a;
        console.log(a);
        console.log(typeof a);
    </script>
  • 关系运算符

逻辑语句中使用，以测定变量或值是否相等
在这里插入图片描述

①任何值和NaN作任何比较结果都是false
②如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而是分别比较字符串中字符的Unicode编码 。
③比较字符编码是一位一位比较 如果两位一样，则比较下一位，所以借用它来对英文字符进行排序。
④比较中文时没有意义 如果比较的两个字符串类型的数字，可能会超出预期的效果。
必须进行转型

  • 赋值运算符

用于给 JavaScript 变量赋值
在这里插入图片描述

  • 逻辑运算符

用于测定变量或值之间的逻辑
在这里插入图片描述

<script type="text/javascript">
        var result = 3 && 6;
        console.log("result="+result);
    </script>

<script type="text/javascript">
        var result = NaN && true;
        console.log("result="+result);
    </script>
  • 相等运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false
== 来做相等运算
当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较

注：NaN不和任何值相等，包括它本身（可以通过isNaN()函数来判断一个值是否是NaN）

!= 来做不相等运算
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

=== 来做全等运算
用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

!== 来做不全等运算
用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

  • 条件运算符

语法：条件表达式?语句1:语句2;

执行流程：

①首先对表达式进行求值
②判断

如果该值为true，则执行语句1，并返回执行结果

如果为false，则执行语句2，并返回执行结果

如果条件的表达式的求值结果是一个非布尔值 会将其转换为布尔值然后再运算

Ruuuuvh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript一段创建层的代码
10-30
javascript一段创建层的代码
JavaScript的基本使用以及输出hello world，很简单
weixin_47556601的博客
02-08 5362
大家好，今天来给大家分享一下 JavaScript的基本使用以及输出hello world 我们使用的工具： IDEA 接下来看源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> alert("hellp,world"); </sc
js学习笔记2——js的HelloWorld
weixin_45034895的博客
06-23 195
js学习笔记2——js的HelloWorldjs代码需要编写到script标签中控制浏览器提出一个警告框让计算机在页面中输出一个内容向控制台输出一个内容三个放一块 js代码需要编写到script标签中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
JavaScript——Hello World
蜕变之道
11-22 7391
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> alert("Hello World!"); var vAlert={}; vA
JavaScript输出Hello,World的10种方式！
全栈空间
03-01 3015
JavaScript不愧是最强大的编程语言，和ChatGPT讨论后发现，至少有10种方法能够输出“hello world”，按运行环境分为浏览器环境和nodejs，按空间分为控制台、标题栏、地址栏、网页、桌面、弹窗，按介质分为文本、语音等，每种方法都有其独特的用途和实现方式。连一个hello world都能玩出花来！console.log("Hello, World!");document.wri...
js-----helloworld
weixin_51847874的博客
01-21 544
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /* * 1、前端三层 * HTML 结构层 写网页结构内容 身体 *
eloquentJS:Eloquent Javascript 一书的不同练习集
06-04
这是我学习语言的过程中 Eloquent Javascript 一书不同章节的练习集。
eloquentjs-exercises:Eloquent JavaScript 一书的练习
06-09
Eloquent Javascript 章节练习我对每章 Eloquent JS 练习的回答的 repo，包括评论。 Eloquent Javascript 是一本免费的在线书籍： :
javascript第一课
10-31
javascript第一课
JS_TASKS:编程JavaScript一月至三月
03-22
JS_TASKS 编程JavaScript一月至三月
JavaScript系列笔记——javascript之helloworld
weixin_43354214的博客
12-11 602
一、在哪里写Javascript代码 1、在内部文件中写 在html文档中标签中添加 <!DOCTYPE html> <html> <head> <title>Document</title> **<script> alert('hello world!'); </script&...
39｜源码解读：V8执行JS代码的全过程
sucaiwa的博客
03-05 1598
这节课我们先通过编译源码的方式搭建了 V8 的环境，又通过 V8 项目中的 hello_world 项目一步步学习了 V8 执行 JS代码的过程，最后，我们又从宏观角度了解了 V8 执行 JS 代码的全过程。这节课的要点，你可以结合后面的导图看一下。在这个过程中，我们通过 V8 项目的关键代码和数据结构深入的了解了 V8 这个项目。在学习一个开源巨石项目的过程中，我们要掌握一定的学习方式，切不可以在初学习的阶段就过度自底而上地纠结于各种代码细节。
javascript 之hello world (基础)
最新发布
diaobusi的博客
07-23 738
在上一篇博客中简单的介绍了什么是js，还有什么是js的框架，在今天的学习中，我们将学习JavaScript的基本语法，包括JavaScript的基本用法、变量声明、常量声明，以及它的输入输出语句等基础。
JavaScript(JS)源码集锦
cnds123的专栏
11-07 3802
JavaScript(JS)源码集锦：实现点击图片在两张图片之间来回进行切换；制作倒计时
js---常用的源码
最爱松露巧克力
04-19 1522
1.函数柯里化 函数柯里化的是一个为多参函数实现递归降解的方式。其实现的核心是: 要思考如何缓存每一次传入的参数传入的参数和目标函数的入参做比较这里通过闭包的方式缓存参数，实现如下： 使用方式如下： 函数柯里化仅仅只是上面求和的这种运用吗？？ 这个问题，有必要去一下。其实利用函数柯里化这种思想，我们可以更好的实现函数的封装。 就比如有监听某一事件那么就会有移除该事件的操作，那么就可以利用柯里化的思想去封装代码了。 或者说一个输入 A 有唯一并且对应的输出 B，那么从更大的角度去思想这样
分享88个JavaScript源码，总有一款适合您
zy0412326的专栏
01-14 4072
js
JS的HelloWorld [JavaScript][web前端]
m0_57001006的博客
05-12 460
JS(JavaScript)的HelloWorld <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS的HelloWorld</title> <script type="text/javascript"> // 控制浏览器弹出一个警告框 , 提示:"哥,你太帅了!" alert("哥,你太帅了!"); //让浏览器在页面
JS的入门helloworld
YuTinH的博客
05-24 1027
js的三种输出形式，先背下来 alert警告框 console.log 控制台 doucument.write 向body输出内容 记住一点，js中代码是按行顺序执行的，且一行后加分号; js的编写位置： <script type="text/javascript" src=""></script> src是引入的外部js文件，相对路径。（类似css） js的语法： 注意js的注释和css是一样的，都是//或/**/ JS字面量和变量： 在js中使用var来声明变...
手写JavaScript函数式编程和异步编程底层代码
qq_37464878的博客
12-16 827
1.call实现 Function.prototype.$call = function(context, ...args) { // 调用者检查 if(typeof this !== "function") throw new TypeError("必须使用函数调用$call方法") // 上下文检查 context = context || globalThis context = context instanceof Object ? cont
JavaScript 一种脚本语言详细解释
04-24
JavaScript 是一种脚本语言，最初是为了在 web 页面中添加交互功能而设计的。它可以在 web 浏览器中运行，并且也可以与服务器进行通信。JavaScript 是一种动态、基于对象的语言，语法类似于 C 语言。它可以用来添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值