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

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>

http://www.xdnf.cn/news/2689.html

相关文章:

  • 「Mac畅玩AIGC与多模态05」部署篇03 - 在 Mac 上部署本地向量化模型(Embedding Models)
  • 在QGraphicsView中精确地以鼠标为锚缩放图片
  • 迈瑞医疗一季度业绩环比大幅改善 国内业务将从今年三季度迎来重大拐点
  • 用Java模拟打字:深入解析 java.awt.Robot 的键盘控制艺术
  • 【Robocorp实战指南】Python驱动的开源RPA框架
  • 【Vue3-Bug】中路由加载页面直接显示空白
  • 【面经分享】长鑫存储Java研发一面|40分钟速战速决
  • python_股票月数据趋势判断
  • HTML标记语言_@拉钩教育
  • leetcode0230. 二叉搜索树中第 K 小的元素-medium
  • C++?模板!!!
  • ai环境cuda cudnn conda torch整体迁移 wsl docker
  • 在使用Python的Selenium库打卡网页后,通过CDP命令获取所有cookies(包括Httponly和Secure的cookies)
  • 如何使用electron-forge开发上位机ui
  • 如何开展有组织的AI素养教育?
  • zynq 7010 PS 串口打印
  • 绘制板块层级图
  • 健康养生:开启品质生活的密钥
  • 【jceks】使用keytool和hadoop credential生成和解析jceks文件(无密码storepass)
  • 零基础搭建AI作曲工具:基于Magenta/TensorFlow的交互式音乐生成系统
  • 【计算机视觉】Bayer Pattern与Demosaic算法详解:从传感器原始数据到彩色图像
  • PostgreSQL无法查看表中数据问题排查
  • ARM32静态交叉编译并使用pidstat教程
  • Docker 获取 Python 镜像操作指南
  • 【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
  • 菱形继承和虚基表
  • go语言八股文(五)
  • 解决Ubuntu20.04重启出现显卡驱动异常的问题(操作记录)
  • k8s基本概念-YAML
  • git 修改用户名和邮箱