前端三刺客---JS(基础语法)

最新推荐文章于 2025-04-27 18:08:48 发布
最新推荐文章于 2025-04-27 18:08:48 发布
阅读量2k 收藏 7
点赞数 1
分类专栏： 前端 javaEE 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62476684/article/details/127155867
版权
本文详细介绍了JavaScript的基础知识，包括与HTML和CSS的关系、基本语法、数据类型、数组操作及函数使用等，适合初学者快速掌握。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

JS初识

JS为JavaScript, 是一种脚本语言, 通过解释器运行. 主要在浏览器中运行, 现在也可以基于 node.js 在服务器端运行. JS还可用于服务器开发和客户端开发.

JavaScript和HTML和CSS的关系

HTML: 网页的结构(骨)
CSS: 网页的表现(皮)
JavaScript: 网页的行为(魂)
1.HTML的代码相当于完成了框架, 类似骨架,
2.CSS代码就是在完成的HTML框架上, 进行一些装饰, 类似与皮
3.JavaScript代码就是使网页具有和浏览者交互的功能, 这就是灵魂所在.

JS和HTML和CSS都是运行在浏览器上的, 浏览器中内置了JS引擎
像Java就是运行在JVM上, C/C++是运行在操作系统上,

JavaScript代码运行过程

  1. 编写的代码是保存在文件中的
  2. 双击打开.html文件后, 浏览器就会读取文件, 并将文件内容加载到内存中(硬盘->内存)
  3. 浏览器此时解析用户编写的代码, 并将代码翻译成能被计算机理解的二进制代码
  4. 二进制代码被CPU加载执行
    在这里插入图片描述

JavaScript的组成

浏览器端运行的JS:

  1. ECMAScript : JavaScript语法
  2. DOM: 页面文档对象模型, 对页面中的元素进行操作
  3. BOM: 浏览器操作模型, 对浏览器窗口进行操作

JS的语法只能完成一些基本的逻辑, 想要完成复杂的交互任务, 就要使用到DOM API 和 BOM API.

JS

第一个Hello World

代码:

<body>
    <script>
      alert("hello world");
    </script>
</body>

JS中的字符串常量可以用单引号, 也可以用双引号.
效果:
在这里插入图片描述
alert即为在网页中弹出一个警示框

JavaScript的书写格式

  1. 行内式
    写入html元素内部
<body>
    <button onclick="alert('hahaha')">点我</button>
</body>

在这里插入图片描述
2. 内嵌式
写在script中
也就是上文中的 第一个程序 HelloWorld
3. 外部式
写在单独的JS文件中
html文件:

<script src="hello.js"></script>

JS文件:

alert("Hello")

JS的输入输出

输入 prompt

弹出一个输入框:

<body>
    <script>
        prompt("来者何人:");
    </script>
</body>

在这里插入图片描述

输出alert

弹出一个警示框, 类似上文中的HelloWorld程序

输出 console.log

在控制台打印一个日志

<body>
    <script>
        console.log("7777777");
    </script>
</body>

在这里插入图片描述
console是JS中的一个’对象’, 而console.log可以理解为 使用控制台对象的long方法.

JS基础语法

我们在此解释JavaScript语法和Java语法中不同的部分(什么?你问JavaScript和Java有什么关系? 什么关系都没有啊)

变量的使用

创建变量的时候, 可以使用JS中的var关键字和let关键字

<body>
    <script>
        let a = 10;
        var b = 20;
        var c = "haha";
        console.log(a);
        console.log(b);
        console.log(c);
    </script>
</body>

在这里插入图片描述

var和let皆可以创建不同类型的变量, 比如整形, 字符串都可以.

具体let和var的区别, 可以在点击此处进行查看let和var的区别.

理解动态类型

  1. JS的变量类型是在程序运行时确定的(运行到 = 时确定)
  2. 随着程序的运行, 变量的类型会发生变化
 <script>
        let a = 10;
        a = "haha"
 </script>

此处a的值就从10变为了"haha"

像C Java这样的语言时静态类型语言, 这样的语言的变量在创建时类型就已经确定了.

JS中的基本数据类型

number: 数字, 不区分整数和小数
boolean: true表示真, false表示假
string: 字符串类型
undefined: 只有唯一的值 undefined, 即为未定义的值
null: 只有唯一的值null, 表示空值.

number数字类型

JS中不区分整数和浮点是, 统一用number数字类型表示
特殊的数字值:
Infinity: 无穷大, 表示数字已经超过了JS能表示的范围
-Infinity: 负无穷大, 表示数字已经超过了JS能表示的范围
NAN: 表示当前的结果不是数字

string字符串类型

  1. 字符串类型可以通过单引号确定, 也可以用双引号确定
  2. 如果字符串中本来就含有引号, 我们可以运用转义字符, 也可以单双引号交替使用.
<body>
    <script>
        var a = "wo shi \"diyishuai\"";
        var b = "wo shi 'diyishaui'";
        var c = 'wo shi "diyishuai"';
        console.log(a);
        console.log(b);
        console.log(c);
    </script>

在这里插入图片描述
3. 求字符串长度
通过length来求字符串的长度

<body>
    <script>
        var a = "wo shi \"diyishuai\"";
        console.log(a.length);
    </script>
</body>

在这里插入图片描述
4. 字符串的拼接
通过+来拼接字符串

<body>
    <script>
        var a = "hahaha";
        console.log(a + "lelele");
    </script>
</body>

在这里插入图片描述

布尔类型

布尔类型中的 true表示真, false表示假
在 true 和 false参与运算时, true表示1, false表示0.

<body>
    <script>
        console.log(true + 1);
        console.log(false + 1);
    </script>
</body>

在这里插入图片描述

未定义数据类型 undefined

  1. 如果一个变量没有被初始化果, 那么这个变量的值就是undefined
<body>
    <script>
        var a;
        console.log(a);
    </script>
</body>

在这里插入图片描述
2. undefined可以与字符串拼接

 <body>
    <script>
        var a;
        console.log(a + "haha");
    </script>
 </body>

在这里插入图片描述
3. undefined和数字运算时, 输出NaN

<body>
    <script>
        var a;
        console.log(a + 10);
    </script>
</body>

在这里插入图片描述

空值类型 null

null表示当前类型是一个空值

<body>
    <script>
        var a = null;
        console.log(a + 10);
        console.log(a +  "haha")
    </script>
</body>

在这里插入图片描述
注意:
null表示当前的值为空(有内存位置但没有值)
undefined表示当前的变量为定义(即连内存位置都没有)

运算符

JavaScript的运算符和Java的运算符区别不大, 此处说一些不同的部分

常见运算符

常见的 / 运算符会直接算到浮点数部分

<body>
    <script>
        var a = 10;
        console.log(a / 20);
    </script>
</body>

在这里插入图片描述

比较运算符

JS中比较相等的运算符有 == 和 =, 比较不相等的运算符有 != 和 !,

  1. == 和 != : 只是比较两个变量的值, 而不比较两个变量的数据类型. 如果此时两个变量可以通过隐式转换为相同的值, 那么输出为 true
  2. === 和 !==: 不仅仅比较两个变量的值, 还要比较两个变量的数据类型. 如果此时两个变量的数据类型不同, 那么直接输出false, 如果两个变量的数据类型相同, 才继续比较变量的值.
<body>
    <script>
        var a = 10;
        var b = '10';
        console.log(a == b);
        console.log(a === b);
    </script>
 </body>

在这里插入图片描述

数组

使用new关键字创建数组

<body>
    <script>
        var arr = new Array();
    </script>
</body>

字面量方式创建数组

<body>
    <script>
        var arr = [1,2,3,4];
    </script>
 </body>

JS中的数组中, 可以存放不同类型的值,

<body>
    <script>
        var arr = [1,2.5,"haha",null,undefined];
    </script>
</body>

打印数组

<body>
    <script>
        var arr = [1,2.5,"haha",null,undefined];
        console.log(arr);
    </script>
</body>

在这里插入图片描述

获取元素

JS中数组的下标也是从0开始的

<body>
    <script>
        var arr = [1,2,3,4,5];
        console.log(arr[0]);
        console.log(arr[1]);
    </script>
</body>

在这里插入图片描述
JS数组中如果获取非法下标的元素, 会打印undefined

<body>
    <script>
        var arr = [1,2,3,4,5];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[5]);
    </script>
</body>

在这里插入图片描述
在非法下标出也可以直接设置元素

<body>
    <script>
        var arr = [1,2,3,4,5];
        arr[100] = 0;
        console.log(arr);
    </script>
 </body>

在这里插入图片描述
中间就会设置为空元素
设置还有更离谱的:

<body>
    <script>
        var arr = [1,2,3,4,5];
        arr[-1] = 10;
        console.log(arr);
    </script>
</body>

在这里插入图片描述
由此可见数组不仅可以为数组, 还可以当作map使用, 更进一步说, 数组可以作为一个对象, 而下标为对象的一个元素, 数组中下标的值为对象的元素的值

获取数组的长度

<body>
    <script>
        var arr = [1,2,3,4,5];
        console.log(arr.length);
    </script>
</body>

在这里插入图片描述

在数组中插入元素

运用push方法往数组中插入元素

<body>
    <script>
        var arr = [1,2,3,4,5];
        arr.push(7);
        console.log(arr.length);
    </script>
</body>

在这里插入图片描述

删除数组中的元素

通过splice方法来替换数组中的元素(替换也可以为删除)
第一个形参为下标的开始, 第二个形参为删除的元素个数.

<body>
    <script>
        var arr = [1,2,3,4,5];
        arr.splice(2,2);
        console.log(arr);
    </script>
</body>

在这里插入图片描述

<body>
    <script>
        var arr = [1,2,3,4,5];
        arr.splice(2,2,111,222);
        console.log(arr);
    </script>
</body>

在这里插入图片描述

函数

你可以称为函数, 也可以称为方法

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
  函数体
  return 返回值;
}
// 函数调用
函数名(实参列表)      // 不考虑返回值
返回值 = 函数名(实参列表)  // 考虑返回值

无参数类型:

<body>
    <script>
        function ha() {
            console.log("hahaha");
        }

        ha();
        ha();
        ha();
    </script>
  </body>

在这里插入图片描述
有参数类型:

<body>
    <script>
        function add(x,y) {
            console.log(x+y);
        }

       add(10,20);
       add("haha","hehe");
    </script>
</body>

在这里插入图片描述

参数的个数

  1. 如果实参个数比形参个数多, 则多出的参数不参与函数运算
  2. 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined
<body>
    <script>
        function add(x,y,z) {
            console.log(x+y+z);
        }

       add(10,20);
       add(10,20,30);
       add(10,20,30,40);
    </script>
</body>

在这里插入图片描述

匿名函数

<body>
    <script>
        let f = function() {
            console.log("haha");
        }
        f();
    </script>
</body>

在这里插入图片描述

对象

js对象中的每个属性和方法,其实都是通过“键值对” 这样的方式来表达的.{} 表示这是一个对象。

  1. 键值对之间,采用逗号进行分割。
  2. 键和值之间,采用冒号进行分割。
  3. 后续就可以通过 对象名 . 来访问.
    创建对象:
<body>
    <script>
      var student = {
        name: "蔡徐坤",
        height: 175,
        weight: 170,
        sayHello: function () {
          console.log("hello");
        },
      };

      console.log(student.name);
    </script>
  </body>

在这里插入图片描述

Vue基础--Vue从入门到工作
布白的博客
04-23 224
Vue基础 与传统网页的比较 传统网页开发步骤： 通过ajax去请求服务器中的内容 当数据获取到本地以后，根据数据生成对应的网页结构，形成我们最终看到的网页。 通过事件的设置来监听用户对元素的操作，以监听用户操作而导致的数据变化 当元素发生变化时，我们需要将用户操作导致的结果发送给服务器，告知服务器客户端进行了那些处理 根据用户操作更新结构 缺点： DOM操作频繁，代码繁杂 DOM操作与逻辑代码混合，可维护差 不同功能区域书写在一起，可维护性低 模块之间的依赖关系复杂（怎么理解） Vue.js简介
【web前端基础day01】HTML基础部分
qq_61971608的博客
01-13 223
HTML标签部分
javaweb--HTML
xinzhisuox的博客
11-08 201
HTML---超文本标记语言CSS ----层叠样式表，用于控制页面的样式（表现）补充：像我们平时基于Windows当中的记事本这一类工具所编写的这一类文本都称为普通文本，即只能记录文字信息XML：XML也是一种标记语言，由标签构成的语言，XML是可扩充的标记标记语言，即在XML中我们可以自定义标签，解析时，只需要按照我们自己定义的规则去解析这些标签的内容就可以。但是HTML中的标签都是预先定义好的，因为HTML的代码最终是不需要我们解析，而是在浏览器中进行的，由浏览器负责解析HTML代码。
web前端开发之CSS
hu0708的博客
06-30 2907
css
web前端开发之HTML
hu0708的博客
06-07 3221
web前端开发
WebGL: BabylonJS开发教程
YunWisdom
03-24 1740
当第一个三角形在像素屏幕上亮起时，人类便开启了一场永不满足的视觉革命。如今，你的浏览器标签页里正沉睡着一个未被点燃的宇宙——只需几行JavaScript代码，就能让星辰诞生、让机械运转、让魔法在指尖流转。《WebGL: BabylonJS开发教程》不是又一本枯燥的API手册，而是一把铸造三维世界的数字刻刀，带您从"画方块"的学徒，成长为能构建元宇宙的造物主。
KnockoutJS-模板绑定
weixin_30508241的博客
10-13 115
　　对于knockoutJS来讲，模板绑定和Mapping插件绑定是十分重要的功能，虽然模板绑定在我工作中用的及其少，但模板绑定的重要性不可忽视，在其他前端框架中，如Angular、Vue等等，模板存在的意义十分重要，Mapping插件使得我们能够脱离手工绑定，及其方便我们快速绑定达到预期效果。 　　KnockoutJS模板绑定更多用法：https://knockoutjs.com/docume...
web前端开发之HTML笔录
陈二狗的博客
04-30 613
web前端开发之HTML笔录，详细介绍了HTML的结构和书写规范，闲时翻来复习一下，让你的web前端学习轻松快乐
原生JS学习 DOM （案例）
m0_64191440的博客
09-05 846
JavaScript 中将网页文档中的标签进行解释后，得到标签对应的节点对象，包含节点属性：nodeType，不同的节点属性值不同。1：这是一个标签对象2：这是一个属性对象3：这是一个文本对象.JavaScript 语法中通过节点数（ DOM树 ）
微信小程序uniapp雪糕刺客单页源码解析
Vue.js是目前非常流行的前端JavaScript框架之一，主要用于构建用户界面和单页应用程序。Vue.js采用组件化模式，使得开发者能够使用小型、独立和可复用的组件构建大型应用。Vue.js的双向数据绑定和声明式的渲染方式使...
jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站
MDR_0820的博客
11-02 605
jQurey 的概念 jqurey 是一个快速简洁的JavaScript库 设计的总之能是 写更少的代码 做更多的事情 j 就是JavaScript 、Qurey 查询 意思就是查询js 把js 中的dom操作做了封装 我们可以快速的查询使用里面的功能 jQurey 封装了JavaScript常用的功能代码 优化了dom 的操作事件处理 动画设计和Ajax 交互 jQurey 的入口函数 1 等着页面 DOM 加载完毕再去执行js代码 $(document).ready(functio
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
专注于dreamweaver网页设计制作
08-14 543
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
Vue后端必学
weixin_45450412的博客
10-14 1331
VUE 基本语法 模板语法 插值 <template> <div id="app"> <div> <h3>模板语法</h3> <p>{{ msg }}</p> </div> </div> </template> <script> export default { name: 'App', data(){ re
基于vue框架的电信用户业务管理系统的设计与实现8ly70（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
h2345678的博客
04-25 757
可以控制字体、颜色、间距、布局等视觉表现。[6]师明,曾丹.基于Vue.js和Spring Boot的校招日记系统[J].工业控制计算机,2020,33(01):95-97.[7]胡雅丽.基于Vue.js的“微商城”前端开发设计与实现[J].电子技术与软件工程,2020(20):34-35.[3]张智强，孙福兆，余健等.mysql课程设计案例精编[J].清华大学出版社,2019(8):67-234。[8]李广宏.vue.js前端应用技术分析[J].中国新通信,2019,21(20):115.
vxe-table封装表头
i_am_a_div的博客
04-24 424
vxe-table封装表头
vue项目前后端分离设计
爱分享的程序员
04-25 1450
在Vue前端架构中，通过分层结构和模块化设计实现高效的前后端分离，需要系统性规划各层职责、接口管理和数据流控制。以下是结合业界最佳实践的完整方案：
Redis | Redis单机、主从复制、哨兵与集群模式多维度详细对比
Andya_net的博客
04-26 924
Redis 提供了多种部署模式，每种模式都有其独特的技术原理和适用场景。单机模式适合开发测试，主从复制模式适合读扩展，哨兵模式适合高可用性，而集群模式适合大规模生产环境。选择合适的部署模式需要根据具体的应用需求、数据量和性能要求来决定。
在vue项目中实现svn日志打印
小白的博客
04-24 332
将 svn_log.xml 转换为 Markdown 文件生成 SVN 日志的 XML 文件。组合命令，先执行 svn-log，再执行 convert-log，实现一键生成日志。项目工程 类似于git的conventional-changelog。在项目根目录创建convert-svn-log.js。
vue响应式原理——vue2和vue3的响应式实现区别
最新发布
2301_77523019的博客
04-27 305
vue响应式原理——vue2和vue3的响应式实现区别
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值