当前位置：网站首页>JS入门到精通完整版
JS入门到精通完整版
2022-08-10 14:31:00 【陈使劲敲代码】
前言
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
从今天开始就和大家一起分享JavaScript的基础知识，如果您有疑问可以在评论区留言或者私信我，感谢观看！
目录
提示：以下是文章正文内容，下面案例可供参考
一、JavaScript是什么？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 。
1.主要的功能：
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程
2.语言的组成：
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（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>
<!-- js代码需要编写在scrpit标签内 -->
<script>
// 控制浏览器弹出警告框
alert("这是我的第一行js代码!");
// 让计算机在页面输出内容
document.write("Hello World!!!");
// 向控制台输出内容
console.log("你猜猜我在哪呢!!!");
// alert("这是一个弹窗！！");
// document.write("这是一个文本内容！！");
// console.log("这是控制台输出内容");
</script>
</head>
<body>
</body>
</html>运行效果（示例）：
2.js基础——js编写的位置
js有三种编写位置的方式
第一种：直接在标签内部使用
第二种：在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标签引入
写到外部文件中可以在不同页面同时使用，也可以利用浏览器缓存机制
推荐使用
-->
<!--
script标签一旦引入外部文件了，就不能在此标签内写代码了，即使编写也不会被编译
如果需要则可以在创建一个新的script标签用于编写内部代码
-->
<script src="./js/scrpit.js"></script>
<!--
可以将代码编写到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.JS中每一条语句中以;结尾
* 3.JS中会自动忽略多个空格和换行，可以对代码进行格式化
*
*/
// Alert("该语法不会被执行");
</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>
/*
* 字面量：都是不可变的值
* 比如： 1 2 3 4...
* 字面量可以直接使用，但我们一般不会直接使用字面量
*
* 变量：变量可以用来保存字面量，而且变量可以任意改变
* 变量可以更加方便使用,在开发中都是使用变量保存一个字面量
* 而很少直接用字面量
* 可以通过变量对字面量描述
* 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中所有可以由我们自主命名的都可以称为标识符
例如：变量名、函数名、属性名都属于标识符
命名要符合一下规则：
1.标识符中可以含义字母、数字、_、$
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中字符串需要使用引号引起来
使用双引号和单引号都可以，但是不要混着用
*/
/*
在字符串中我们可以使用\作为转义字符
当表示特殊符号时使用\转义
\" 表示"
\' 表示'
\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
js中最小的正值
Number.MIN _VALUE
Infinity表示正无穷
-Infinity表示负无穷
NaN 是一个特殊的数字
使用typeof检查一个NaN也会返回一个number
*/
// 数值 123
var a = 123;
// 字符串 123
var b = "123";
/*
可以使用typeof来检查变量的数据类型
语法：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);
// 使用js整数的运算基本是可以实现准确
var num = 2 + 4 ;
console.log(num); //6
// 如果使用js进行浮点元素，可能得到一个不精确的结果
var cc = 0.1 + 0.2 ;
console.log(cc); //0.30000000000000004
/*
Boolean 布尔值
布尔值只有两个，主要作为逻辑判断
true 真
false 假
*/
var bool = true;
console.log(bool); //true
console.log(typeof bool); //boolean
/*
Null类型的值只有一个 就是null
null这个值专门用来表示空对象
使用typeof检查null时，返回一个object
*/
var nul = null;
console.log(nul); //null
console.log(typeof nul); //object
/*
Undefined类型的值只有一个 就是Undefined
当声明一个变量时，但是不给其变量赋值，它的值就是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>
/*
强制类型转换
将一个数据类型转换为其他数据类型
类型转换主要是：将其他的数据类型。转换为
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>总结
如果您有疑问可以在评论区留言或者私信我，感谢观看！
边栏推荐
猜你喜欢
随机推荐
学习MySQL 临时表
产品使用说明书小程序开发制作说明
malloc 函数详解
How does vue clear the tab switching cache problem?
锂电池技术
【MinIO】Using tools
antd组件中a-modal设置固定高度,内容滚动显示
Flask框架——基于Celery的后台任务
Error: Rule can only have one resource source (provided resource and test + include + exclude)
字节终面：CPU 是如何读写内存的？
ICML 2022 | 基于随机注意力机制的可解释可泛化图学习
awk的简单使用
司空见惯 - 股市狠狠下跌后，何時能反弹？
Existing in the rain of PFAS chemical poses a threat to the safety of drinking water
解读STEAM教育中的表现性评价
一种能让大型数据聚类快2000倍的方法，真不戳
AWS 安全基础知识
高薪程序员＆面试题精讲系列135之你对分布式是怎么理解的？CAP理论你知道吗？
如何完成新媒体产品策划？
普林斯顿微积分读本05第四章--求解多项式的极限问题