前言❤️❤️hello hello这里是洋不写bug~欢迎大家点赞关注收藏这是学习JS的第一篇博客本篇文章中的知识都是JS入门基础知识比较多但是都很简单快来学习吧个人主页洋不写bug的博客所属专栏前端基础铁汁们对于前端的各种常用核心语法都可以在上面的前端专栏学习专栏正在持续更新中有问题可以写在评论区或者私信我哦~1JavaScript基础知识了解1什么是JavaScriptJavaScript是目前最流行的编程语言之一后面就称之为JS它是一个脚本语言主要是在客户端上去运行的。JavaScript在最初只是用于完成简单的表单验证也就是验证数据的合法性但是后来一不小心就火了JavaScript有很多的功能网页开发 (相比前面学的html有更复杂的特效和用户交互)网页游戏开发服务器开发电脑桌面程序开发手机 app 开发那对于大部分人来说学习JavaScript就是进行网页开发JavaScript跟CSS跟HTML之间是个什么样的关系呢html是网页的结构CSS是网页的表现JavaScript是网页的行为简单来说就是html用于写这个网页的框架和大体内容那么CSS用来调网页中内容的样式JavaScript加入更复杂的特效和用户交互。2JS运行JS是主要运行在浏览器上的浏览器中有两个引擎一个是渲染引擎渲染引擎就是用来解析 html CSS, 也就是我们平常说的 “内核”JS 引擎也就是 JS 解释器典型的就是 Chrome 中内置的 V8JS 引擎逐行读取 JS 代码内容然后解析成二进制指令再执行。3JS的组成JS具体是由三个部分组成的1.ECMAScript (简称 ES): JavaScript 语法我们要特别注意一点那就是ECMAScript 并不等同于JavaScript它指的是JS的语法部分我们只用JS语法只能实现一些简单的逻辑是远远达不到当前网页这么多样的功能的。2.DOM: 页面文档对象模型对页面中的元素进行操作例如这个微软浏览器的搜索框可以在搜索框中输入文字也可以删除文字进行搜索这就依赖了DOMDOM就是让我们对页面中的元素进行一些增删改查的操作3.BOM: 浏览器对象模型对浏览器窗口进行操作浏览器的左上角都有这些按钮刷新页面和退回到上一页这个的使用其实就要用到BOM模型2JS的书写1行内式行内式是将 JavaScript 代码直接嵌入到 HTML 元素的内部通过 HTML 元素的事件属性例如onclick来编写 JavaScript 逻辑这里创建个html文件在body里面写上一个按钮加上onclick属性就是点击按钮后会出现什么效果alert就是JS中的一个内置函数作用就是弹出一个包含指定内容的对话框。在JS中字符串用单引号和双引号括都可以推荐在html中使用双引号在JS中使用单引号代码和运行效果如下bodyinputtypebuttonvalue点我一下onclickalert(haha)/body2内嵌式直接写JS代码不像刚刚的行内式那样嵌入到元素内部那么浏览器就无法执行这段代码示例如下bodyalert(haha);/body为了让浏览器识别执行JS代码就需要把JS代码写到一个script标签中吗script 标签是 HTML 中用于嵌入或引入 JavaScript 代码的核心标签后续会经常用到内嵌式简单来说也就是把JS代码语句写在script标签中标记一下这是JS语句让浏览器执行代码和效果示例如下bodyscriptalert(haha);/script/body3外部式把JS代码写到外部.js文件中让浏览器去读取执行称之为外部式这里在原来放html代码的目录里再创建一个.js为后缀的文件在JS文件中写入alert用于弹出对话框在script这个标签中使用src属性读取这个js文件的位置代码和执行效果如下这种外部式写法非常适用于JS代码比较多的情况这样我们把JS代码写入到外部文件中然后读取即可3浏览器开发者工具台在浏览器中有个开发者工具台想看一段JS代码的效果的话直接在上面写就可以了不用写在什么script标签中因为这个工具台的作用就是让我们调试小段JS代码效果的已经标记好了右键点击检查点击控制台输入alert代码然后按回车JS代码就可以执行了具体步骤和过程见下图上面用的是微软浏览器那么谷歌浏览器工具台的位置就在这里4变量1变量的定义在JS中变量的定义跟Java中是有很大的不同的在定义变量时直接用var或者let是不需要写变量类型的示例如下bodyscriptvarnamemark;console.log(name);/script/body这里定义了一个字符串变量并且进行赋值下面的这个console是JS中的一个内置对象主要用于浏览器跟开发者工具台之间的一些交互调用这个对象的log方法这里方法的调用跟Java类似这个log方法的作用就是在工具台上打印出这个变量。当执行这段代码在网页中打开控制台就会发现name显示在了上面如下图也可以用let这次赋值个数字在工具台中看下bodyscriptletage20;console.log(age);/script/body那let还是var它们两个有啥区别呢建议铁汁们用let因为let比var的出现时间要晚相当于是var的升级版let改进了var的一些缺陷使用let来定义的变量作用域生命周期基本上跟Java是类似的。2强/弱类型在下面这段代码中a原来是数字型现在却可以把字符串赋给字符型数据并且还不报错JS本身用let定义变量就是通用的因此JS就是弱类型语言。bodyscriptletage20;agea;console.log(age);/script/body在CCJava中这样直接写肯定是不行的至少要进行个强制类型转换这些语言就是强语言类型3动态/静态类型在刚刚的代码上加个typeof方法typeof方法就是查看变量的数据类型这里在赋值完数字看一次赋值完字符串再看一次代码如下看运行结果会发现在代码11行的时候age的类型是number但是在13行这时候已经被字符串赋值了这时候就成了String类型像这种代码在执行过程中变量类型可以随时发生变化像JS这种语言我们就称为动态类型语言。在JavaC中变量定义的时候是什么类型在运行过程中就是什么类型是不能轻易改变的它们就是静态类型语言。4基本数据类型以下就是JS中的几种基本数据类型接下来会一个一个解析number: 数字。不区分整数和小数.boolean: true 真false 假.string: 字符串类型.undefined: 只有唯一的值 undefined. 表示未定义的值.null: 只有唯一的值 null. 表示空值.1number看下这段代码和工作台展示的结果bodyscriptleta10;letb3.1415926;console.log(typeof(a));console.log(typeof(b));/script/body看完会发现在JS中是不区分整数和浮点数的统一用数字类型number来表示表示各种进制的话就在前面加上特定的符号在JS中除了八进制其他是跟Java的表示相同的scriptleta10;//十进制直接写就可以letb0o7;//八进制在前面加上0oletc0xa;//十六进制以0x开头letd0b10;//二进制以0b开头/script在转化时有个小技巧那就是一个八进制数字对应三个二进制数字一个十六进制数字对应四个二进制数字还有几个特殊的数字类型Infinity: 无穷大大于任何数字。表示数字已经超过了 JS 能表示的范围.-Infinity: 负无穷大小于任何数字。表示数字已经超过了 JS 能表示的范围.NaN: 表示当前的结果不是一个数字.Not a Number看下下面这段代码scriptconsole.log(10/0);console.log(-10/0);console.log(hello world-1);/script那这里字符串减去一个数字JS会试图将“hello world”转为一个数字但是发现解析不成数字那转换结果就是NANNAN无论进行什么运算结果都是NAN。2booleanboolean表示真和假true为真false为假在C语言中布尔类型在可以参与运算把它们看作0和1C语言中的这种设定是不科学的因此在Java就没有这一设定在JS中boolean类型也可以当作数字进行运算代码示例如下scriptletatrue;console.log(typeof(a));aa1;console.log(typeof(a));/script3stringstring类型也很简单可以使用单引号也可以使用双引号甚至用单引号套双引号双引号套单引号都不会出错bodyscriptletahello JS;letbhello world;alert(a);alert(b);/script/body转义字符也是基本上跟Java用法是一样scriptletahello\n JS;alert(a);/script包括对长度的查询跟Java中也是一样的scriptletahello JS;alert(a.length)/script包括字符串的拼接规则也是跟Java一模一样这里写段代码简单演示一下bodyscriptletatrue;console.log(a);console.log(typeof(a));aa1;console.log(typeof(a));console.log(a);/script/body4undefined前面提到的JS数据类型跟C语言和Java中都类似但是这个undefined是JS中特有的意思就是未定义数据类型。当写了一个变量并且没有给它赋值时它就是未定义数据类型未定义数据类型跟其他数据类型进行运算会怎么样呢下面就写代码来试一下scriptleta;console.log(a);console.log(a10);console.log(a10);console.log(atrue);/script这里会发现undefined是可以跟字符串拼接的在跟数字运算时JS会试图将其转化为一个数字发现不行就转成NaNNaN无论进行什么运算结果都是NaN那为什么跟boolean类型运算结果也是NaN呢因为boolean类型在运算时会被转为number类型5nullnull表示当前的变量是一个空值这个空值跟前面刚刚讲的undefined有啥区别呢它们虽然表示的都是一种取值非法的情况但是侧重点跟用法都是不同的undefined是对变量没有定义而null表示当前的值为空。undefined跟number类型运算时结果是NaN而null表示当前值为空因此是可以跟数字类型进行计算的示例如下scriptletanull;console.log(a20);/script可能有的铁汁会说undefined无定义数据类型不就代表这个数据类型是空的吗我们可以这样理解null 是“有盒子但盒子里明确放了一个‘空’的标识”—— 变量已经被声明并且被主动赋值为 “空”比如 let box null相当于我们刻意把盒子清空并明确告诉它 “这里就是空的”undefined 更像 “有盒子但盒子里什么都没放”—— 变量已经被声明盒子存在但从未被赋值比如 let box;这不是主动清空而是 “自然未填充” 的状态。结语JS部分的知识是很简单的大部分东西跟CJAVA中的类似而且写代码的规则比较宽松铁汁们只要多写代码很快就能掌握以上就是今天的所有内容啦完结撒花