当前位置: 首页 > news >正文

JavaScript-基础语法

前言:

一个网页由三个部分组成:

1.html:超文本标记语言,用于控制网页的结构(页面元素和内容)

2.css:级联样式表,用于控制网页布局,涉及对网页文字,背景,布局进行修饰

3.javaScript:是一门跨平台,面向对象的脚本语言,是用来控制网页行为,实现页面交互的语言

目录

一.js的引入方式

1.内部引入方式

2.外部引入方式

二.变量,常量

1.变量

2.常量

三.三种输出方式

1.alert()输出

2.console.log()输出

四.数据类型

五.函数

六.自定义对象

七.JSON


一.js的引入方式

1.内部引入方式

将js的代码定义在HTML页面中,javaScript代码必须位于<script></script>标签之间,js可以放在HTML页面的任何位置,通常放在bdoy标签底部(提高代码解析速度)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 内部引入,内部脚本 --><script>//内部脚本alert("hellow js");</script></body>
</html>

2.外部引入方式

将js代码定义在外部js文件中,然后引入HTML页面当中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 外部脚本 --><script src="js/demo.js">alert(JSON.stringify("hellow"));</script></body>
</html>

通过src属性将js文件导入HTML页面当中

二.变量,常量

1.变量

在javaScript语言当中,通过let关键字声明变量,由于javaScript是弱类型语言,变量可以存放不同类型的值

<script>let a = "a";let b = 10;let c = true;
</script>

2.常量

在javaScript语言当中,通过const关键字声明常量,需要注意的是常量一旦被赋值就不能改变

<script>const a = 10;
</script>

三.三种输出方式

alert():弹出框输出

console.log():输出到控制台

docment.write():输出到页面当中的body区域,不常用

1.alert()输出

<script>//let关键字声明变量(弱类型·语言,变量可以存放不同类型的值)let a;a = "hellow";alert(a);//弹出框输出
</script>

在网页中的显示效果:

2.console.log()输出

<script>//const关键字用来声明常量,一旦赋值不能改变const pi = 3.14;console.log(pi);//输出到控制台
</script>

输出到网页中的效果:

需要注意的是,现需要打开网页的检查,然后打开控制台才能查看

3.docment.write()输出

<script>let a = "hello";document.write(a);//输出到页面中的body区域,不常用</script>

在网页中的显示效果:

四.数据类型

javaScript中的数据类型分为基本数据类型和引用数据类型:

基本数据类型:

                            number(整数,小数,NaN)
                            boolean,null(代表对象为空 object),undefined(当声明的变量未初始化赋值,默认是undefined)
                            string(单引号,双引号,反引号都可以)

引用数据类型:对象(object)

这里需要注意的是:用反引号(Tab上面的那个键)括起来的字符串称为模版字符串

模版字符串可以简化字符串的拼接

使用typeof运算符可以获取数据的数据类型

eg:alert(typeof "hellow");

五.函数

函数:被用来设计执行特定任务的代码

定义函数的语法:通过function关键字进行定义,不需要定义返回值类型和参数类型(因为js是弱类型语言)

注意:在调用函数时,实参个数可以和形参个数不一样,但是不推荐

<script>function fun(a , b){return a + b;}alert(fun(1,2));
</script>

匿名函数:没有名称的函数

        1.函数表达式::eg:let add = function(a,b){ return a+b;}

        2.箭头表达式(可以省略function):eg:let add = (a,b) =>{ return a+b;}

函数定义后可以直接通过变量名调用

<script>//函数表达式let a = function (a , b){return a + b;}alert(a(1,2));//箭头表达式let b = (a , b)=>{return a - b;}alert(b(2,1));
</script>

六.自定义对象

1.通过let关键字声明,对象里面可以有变量和方法

2.this关键字代表当前对象

注意:在使用箭头函数定义方法时,this关键字并不指向当前对象,指向的时当前对象的父级

let user = {name:"tom",age:10,gender:'男',fun:function(){alert(this.name + 'hellow,world')}}

七.JSON

JSON:javaScript object Notation,javaScript对象标记法(js对象标记法书写的文本)),由于其语法简单,层次鲜明,现多用于作为数据载体,在网络中进行传输

JSON文本看起来虽然像自定义对象,但本质完全不一样,自定义对象是对象,json文本本质是字符串
前后端交互时传输时基本都是json载体
JSON.stringify()将js的对象转换为json格式字符串
JSON.pares()将json格式字符串转化为js的对象

注意:JSON中所有的key都要求""括起来

<script src="js/demo.js">let user = {name:"tom",age:10,gender:'男',fun:function(){alert(this.name + 'hellow,world')}}// 想要看见对象中的信息,需要转换为一个字符串alert(JSON.stringify(user));let jsonuser = '{"name":"to","age":10,"gender":"男"}';alert(JSON.parse(jsonuser).name);
</script>

相关文章:

  • [Spring] Seata详解
  • 数据要素如何驱动的新质IDC一体化运营体系发展?
  • 考研系列-计算机组成原理第七章、输入/输出系统
  • 项目上线流程梳理(Linux宝塔面板)
  • css网格布局Grid
  • 夜莺 v8.0.0-beta.10 部署
  • QT—布局管理器之BoxLayout篇
  • 解锁健康密码:养生的多维智慧
  • Python 正则表达式 re 包
  • 考研408-计算机组成原理冲刺考点(1-3章)
  • 使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构(基于 Qiankun)
  • BoxMOT:Yolov8+多目标跟踪方案_笔记1
  • 网络安全漏洞库科普手册
  • 实验研究 | 千眼狼高速摄像机驱动精密制造创新
  • 4G FS800DTU上传图像至巴法云
  • 发那科机器人(基本操作、坐标系、I/O通信)
  • STM32 ADC模数转换器
  • 雷池WAF的身份认证 - GitHub
  • DDoS 攻击如何防护?2025最新防御方案与实战指南
  • 利用 Google Earth Engine 探索江宁区 2010 - 2020 年 EVI 时空变化
  • A股三大股指小幅低收:电力股大幅调整,两市成交10221亿元
  • 证券时报:“好房子”标准即将全面落地,购房者有哪些新期待
  • 西班牙遭遇史上最严重停电,已进入国家紧急状态
  • “中国游”带火“中国购”,“即买即退”让外国游客购物更丝滑
  • 北上广深还是小城之春?“五一”想好去哪玩了吗
  • 在上海生活8年,13岁英国女孩把城市记忆写进歌里