当前位置：网站首页>JS entry to proficient full version
JS entry to proficient full version
2022-08-10 14:54:00 【Chen worked hard to type the code】
前言
JavaScript（简称“JS”） 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.it is developed asWeb页面的脚本语言而出名,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式.
Share it with you starting todayJavaScript的基础知识,If you have any questions, you can leave a message in the comment area or private message me,感谢观看！
目录
提示：The following is the text of the article,下面案例可供参考
一、JavaScript是什么？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言 .
1.主要的功能：
嵌入动态文本于HTML页面.
对浏览器事件做出响应.
读写HTML元素.
在数据被提交到服务器之前验证数据.
检测访客的浏览器信息.控制cookies,包括创建和修改等.
基于Node.js技术进行服务器端编程
2.语言的组成：
ECMAScript,The syntax and basics of the language are described对象.
文档对象模型（DOM）,描述处理网页内容的方法和接口.
浏览器对象模型（BOM）,描述与浏览器进行交互的方法和接口.
二、JS基础内容
1.js基础——hello world
代码如下（示例）：
<!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>
<!-- jsThe code needs to be written in scrpit标签内 -->
<script>
// Controls the browser to pop up an alert box
alert("这是我的第一行js代码!");
// Let the computer output the content on the page
document.write("Hello World!!!");
// 向控制台输出内容
console.log("Guess where I am!!!");
// alert("这是一个弹窗！！");
// document.write("This is a textual content！！");
// console.log("This is the console output");
</script>
</head>
<body>
</body>
</html>运行效果（示例）：
2.js基础——js编写的位置
jsThere are three ways to write a location
第一种：Used directly inside the tag
第二种：在script标签内使用
第三种：在外部js文件中编写,通过script标签引入（推荐使用）
代码如下（示例）：
<!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>js编写位置</title>
<!--
可以将js代码编写到外部js文件中,然后通过script标签引入
Writing to an external file can be used on different pages at the same time,You can also take advantage of browser caching mechanisms
推荐使用
-->
<!--
scriptOnce the tag is imported into the external file,You cannot write code inside this tag,It will not be compiled even if written
如果需要则可以在创建一个新的script标签用于编写内部代码
-->
<script src="./js/scrpit.js"></script>
<!--
Code can be written to script标签内
<script>
alert("我是script标签内的js代码")
</script>
-->
</head>
<body>
<!--
可以将js代码写在标签的onclick属性中
当我们点击按钮时,js代码才会执行
-->
<button onclick="alert('讨厌,你点我干嘛！！！')">点我一下</button>
<!--
可以将js代码写在超链接的href属性中,当点击超链接时,会执行js代码
-->
<a href="javascript:alert('让你点你就点')">你也点我一下</a>
<a href="javascript:">你也点我一下</a>
</body>
</html>运行效果（示例）：
3.js基础——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>js基本语法</title>
<script>
/*
多行注释
JS注释
多行注释：注释中的内容不会被执行,但可以在源代码中查看
*/
// 单行注释
// alert("hello");
/*
* 1.JS严格区分大小写
* 2.JSIn each statement in ;结尾
* 3.JS中会自动忽略多个空格和换行,Code can be formatted
*
*/
// Alert("The syntax will not be executed");
</script>
</head>
<body>
</body>
</html>4.js基础——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></title>
<script>
/*
* 字面量：are immutable values
* 比如： 1 2 3 4...
* 字面量可以直接使用,但我们一般不会直接使用字面量
*
* 变量：变量可以用来保存字面量,而且变量可以任意改变
* Variables can be more convenient to use,In development, variables are used to store a literal
* And rarely use literals directly
* Literals can be described by variables
* x=123546
*/
// alert(123456)
// 声明变量
// 在js中使用var关键字声明一个变量
var a;
// 为变量赋值
a = 123;
a = 456;
console.log(a);
// 声明和赋值同时进行
var b = 789 ;
console.log(b);
var age = 80;
console.log(age);
</script>
</head>
<body>
</body>
</html>5.js基础——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></title>
<script>
/*
标识符：
在js中所有可以由我们自主命名的都可以称为标识符
例如：变量名、函数名、属性名都属于标识符
The naming must conform to the following rules：
1.Identifiers can contain letters、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字和保留字
4.标识符一般采用驼峰命名法
--首字母小写,每个单词的首字母大写,其余小写
*/
var a1_$ = 123;
// var 22a1_$ = 123;(不能以数字开头)
// var var = 123;(var是关键字)
var helloWorld;
</script>
</head>
<body>
</body>
</html>6.js基础——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></title>
<script>
/*
数据类型指的是字面量的类型
在js中一共有8大基本数据类型
String 字符串
Number 数值
Boolean 布尔
Null 空值
Undefined 未定义
Object 对象
Array 数组
Function 函数
其中String、Number、Boolean、Null、Undefined 为基本数据类型
Object、Array、Function为引用数据类型
*/
/*
String字符串
在js中字符串需要使用引号引起来
使用双引号和单引号都可以,但是不要混着用
*/
/*
在字符串中我们可以使用\作为转义字符
Used when expressing special symbols\转义
\" 表示"
\' 表示'
\n 表示换行
\t 表示制表符
\\ 表示\
*/
var str = "hello";
var str1 = "我说：\"今天是周二!\"";
console.log(str1); // 我说："今天是周二!"
// 输出字面量 字符串str
console.log(str); // hello
// 输出变量str
console.log("str"); // str
/*
Number数值
在js中所有的数值都是Number类型
包括整数、小数（浮点数）
js中可以表示的最大值
Number.MAX_VALUE
jsThe smallest positive value in
Number.MIN _VALUE
Infinity表示正无穷
-Infinity表示负无穷
NaN 是一个特殊的数字
使用typeof检查一个NaN也会返回一个number
*/
// 数值 123
var a = 123;
// 字符串 123
var b = "123";
/*
可以使用typeofto check the data type of the variable
语法：typeof 变量
当检查字符串时 会返回string
检查数值时 会返回 number
*/
console.log(typeof a); //number
console.log(a); // 123
console.log(b); // 123
console.log(typeof b); // string
max = Number.MAX_VALUE;
console.log(max);
// 使用jsInteger operations are basically accurate
var num = 2 + 4 ;
console.log(num); //6
// 如果使用js进行浮点元素,可能得到一个不精确的结果
var cc = 0.1 + 0.2 ;
console.log(cc); //0.30000000000000004
/*
Boolean 布尔值
布尔值只有两个,Mainly as a logical judgment
true 真
false 假
*/
var bool = true;
console.log(bool); //true
console.log(typeof bool); //boolean
/*
Null类型的值只有一个 就是null
nullThis value is used exclusively to represent empty objects
使用typeof检查null时,返回一个object
*/
var nul = null;
console.log(nul); //null
console.log(typeof nul); //object
/*
Undefined类型的值只有一个 就是Undefined
当声明一个变量时,But do not assign values to its variables,它的值就是Undefined
*/
var und;
console.log(und); //undefined
console.log(typeof und); //undefined
</script>
</head>
<body>
</body>
</html>7.js基础——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></title>
<script>
/*
强制类型转换
Converts one data type to another
Type conversion is mostly：将其他的数据类型.转换为
string 、 number 、boolean
**/
/*
将其他类型转为string
方式一：
调用被转换数据类型的toString()方法
该方法不会影响到原变量,会将转换的结果返回
null和undefined这两个值没有toString方法
方式二：
调用String()函数,并将被转换的数据作为参数传递给函数
对于number和boolean实际上就是调用的toString()方法
但是对于null和undefined,不会调用toString()
它会将null转为"null"
它会将undefined转为"undefined"
*/
var a = 123;
// 调a的toString()的方法
// a = a.toString()
// 调用String()函数
a = null;
a = undefined;
a = String(a)
console.log(a);
console.log(typeof a);
</script>
</head>
<body>
</body>
</html>总结
If you have any questions, you can leave a message in the comment area or private message me,感谢观看！
边栏推荐
- 池化技术有多牛？来，告诉你阿里的Druid为啥如此牛逼！
- Steam教育在新时代中综合学习论
- Boss raises salary!Look at my WPF Loading!!!
- 基于inotify实现落盘文件的跨进程实时读写交互
- 程序员=加班？？——掌握时间才能掌握人生
- 1004 (tree array + offline operation + discretization)
- leetcode 739. Daily Temperatures Daily Temperatures (Moderate)
- 宝塔面板开放Redis给指定外网机器
- 【MindSpore易点通机器人-02】设计与技术选型
- Flask框架——MongoEngine使用MongoDB数据库
猜你喜欢
![[Semantic Segmentation] DeepLab Series](/img/3d/f06c04522db40ad17f7f725613a035.png)
随机推荐
【Gazebo入门教程】第三讲 SDF文件的静/动态编程建模
基于ArcGIS水文分析、HEC-RAS模拟技术在洪水危险性及风险评估
How is the monthly salary table stored in the database?Ask for a design idea
注意力模型---Attention Model
Mysql语句分析、存储引擎、索引优化等详情
Understanding_Data_Types_in_Go
Lack of comparators, op amps come to the rescue!(Op amp is recorded as a comparator circuit)
SWIG教程《一》
王学岗————直播推流(软便)03x264集成与camera推流
容器化 | 在 S3 实现定时备份
机器学习总结（一）
“蔚来杯“2022牛客暑期多校训练营7
MySQL - storage engine for databases
面试面到了一个腾讯30k出来的，有见识到何为精通MySQL调优
websocket实现实时变化图表内容
从全球价值链视角看，京东云数智供应链对未来经济有何影响？
pm2之静态文件服务
MQTT服务器搭建
laravel throws the error to Dingding
串口服务器调试助手使用教程,串口调试助手使用教程【操作方式】