JavaWeb-JavaScript入门(一)
创始人
2024-05-24 12:51:36
0

目录

  • 认识JavaScript
    • 写一个简单的hello world
  • JS的几种书写形式
    • 内嵌式
    • 行内式
    • 外部式
    • JS和用户交互常用方式
  • JS的基础语法
    • 变量
    • 基本数据类型
      • NaN
      • 字符串类型
      • 布尔类型
      • undefined 未定义数据类型
      • null 空值类型
    • 运算符
  • JS中的条件语句
  • JS中的数组
    • 数组创建的三种方式
    • 打印数组
    • 获取数组元素
      • 迷操作

认识JavaScript

JavaScript是当下最流行的编程语言之一,虽然js主要是用于前端页面的开发,但是实际上,也可以进行服务器开发/客户端程序的开发~

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

有了js之后,所看到的网页,其实就是相当于一个web app(就和普通的客户端程序没啥区别)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

写一个简单的hello world

运行在浏览器中的js是离不开html的,通常需要嵌入到html中进行编写

	

在这里插入图片描述
script里面可以放很多种编程语言

js里面的语句后面不是必须的,可以写也可以不写。

// alert('hello world');

这是js的注释

JS的几种书写形式

内嵌式

把js写到 script 标签中,如上的hello world就是写在script标签中的。

行内式

把js写到 html 元素的内部


在这里插入图片描述
在JS中,表示字符串,可以使用单引号,也可以使用双引号

外部式

把js写到单独的.js文件中,在html里面通过 script 来引入
app.js文件

alert('hello app.js');

hellojs.html文件


在这里插入图片描述

JS和用户交互常用方式

刚才我们可以看到运行js结果都是一个弹窗的样式,那么能不能直接输出结果那种格式呢?答案是可以的!

console.log,这个是我们开发中,最常用的一种输出方式,会把日志给输出到控制台上,这里的控制台指的是浏览器自己的控制台。

	

在这里插入图片描述
同时,如果js代码中,出现一些错误,也会在控制台显示出来。

JS的基础语法

变量

定义一个变量

var 变量名 = 初始值;
	

js不区分整形和浮点型。

		var a = 10;a = 20;console.log(a);

在这里插入图片描述
在变量修改的时候,如果本来a是一个数字类型,在赋值的时候,可以给它赋一个数字类型,也可以赋一个字符串类型,也可以赋任意类型

		var a = 10;a = 'hello';console.log(a);

在这里插入图片描述
现在更倾向于使用let来代替var

var是旧版本(早期的设计),有很多地方,其实违背直觉
		{var a = 10;}console.log(a);

在这里插入图片描述
确实,还是 let 要比 var 更符合直觉一些~

基本数据类型

在这里插入图片描述

NaN

这是一个比较常见的操作, Not a Number

如果运算结果,得到的不是数字的值,就会出现NaN

console.log('hello' - 10);

在这里插入图片描述
若把减号换成+号就会出现字符串拼接的效果!

console.log("hello"+10);

在这里插入图片描述

字符串类型

这里的很多操作和Java是类似的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

求字符串长度:使用.length即可,注意和Java里面使用length()是不一样的,这里没有括号。

        let s1 = "hello";console.log(s1.length);

在这里插入图片描述

布尔类型

注意在js当中会把布尔类型当做0(false)和1(true)来处理。

        let a = true;console.log(a - 1);

在这里插入图片描述
总结

一个编程语言越支持隐式类型转换,则认为类型越弱;(C,JS,PHP等……)
反之,若一个编程语言越不支持隐式类似转换,则认为类型越强。(Java、Go、Python)

在这里插入图片描述

undefined 未定义数据类型

undefined这个类型,就只有这一个值

	let a;console.log(a);

在这里插入图片描述

null 空值类型

	let b = null;console.log(b);

在这里插入图片描述

运算符

基本上都和Java中一样!
在这里插入图片描述
JS中比较相等,有两种分割
在这里插入图片描述

		let a = 10;let b = '10';console.log(a == b);console.log(a === b);

在这里插入图片描述
在这里插入图片描述
JS不区分整数和小数:

  console.log(1/2);

在这里插入图片描述

JS中的条件语句

和Java中用法一样,此处就不讲了~

JS中的数组

数组创建的三种方式

        let array = new Array();let array1 = [];let array2 = [1,2,3,4];

注意js中的数组可以是不同的数据类型,比如:

        let array3 = [1,"hello",null,undefined];

那么在Java中是有不同类型的数组,但是在js中就只有一种数组。

打印数组

通过console.log即可打印数组。

获取数组元素

        let array2 = new Array();array2 = [1,2,3,4];array2[100] = 66;console.log(array2);

在这里插入图片描述
即数组长度变成了101,数组中的元素还是1,2,3,4,100,中间空了96个元素都是empty,即undefined。

迷操作

array[-1] = 10;

运行结果:我们发现我们给出数组下标-1的元素给赋值为10,在结果中类似于java中的map键值对的形式,这里可以理解为这个-1是属性,属性的值为10。

  array["dudu"] = 30;

运行结果:即这个dudu就是给这个array对象,新增了一个属性,属性的名字是dudu,属性的值是30。

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...