【JAVA WEB】JavaScipt-1

目录

JavaScipt是什么?

JavaScipt能做什么?

JavaScipt与HTML、CSS之间的关系

JavaScipt运行过程

JavaScipt的组成

JavaScipt的书写方式

1.行内式

2.内嵌式

3.外部式

语法概览

变量的使用

基本用法

动态类型

什么是强类型变量什么是弱类型变量?

什么是动态类型变量什么是静态类型变量?

基本数据类型

js中内置的几种类型

数字进制表示

特殊的数字值

string

用法

求长度

字符串拼接

[undefined 未定义数据类型](#undefined 未定义数据类型)

运算符


JavaScipt是什么?

  • 是世界上最流行的编程语言之一。
  • 是一个脚本语言,通过解释器运行。
  • 主要在客户端(浏览器)上运行,现在也可以基于node.js 在服务器上运行。

JavaScript最初只是为了完成简单的表单验证(验证数据合法性),结果后面不小心就火了,

当前JavaScript已经称为了一个通用的编程语言。

JavaScipt能做什么?

  • 网页开发(更复杂的特效和用户交互)
  • 网页游戏开发
  • 服务器开发(node.js)
  • 桌面程序开发(Electron,VSCode)就是这么来的
  • 手机app开发

JavaScipt与HTML、CSS之间的关系

  • HTML:网页的结果(骨)
  • CSS:网页的表现(皮)
  • JavaScript:网页的行为(魂)

JavaScipt运行过程

  • 编写的代码是保存在文件中的,也就是存储在硬盘(外存上).
  • 双击 .html 文件浏览器(应用程序)就会读取文件,把文件内容加载到内存中,数据流向:硬盘==>内存)
  • 浏览器会解析用户编写的代码,把代码翻译成二进制的,能让计算机识别的指令(解释器的工作)
  • 得到的二进制指令会被CPU加载并执行(数据流向:内存 => CPU)

浏览器分为渲染引擎 + JS引擎

  • 渲染引擎:解析 html+css,俗称"内核"
  • JS引擎:也就是JS解释器,典型的就是 Chrome 中内置的 V8

JS引擎逐行读取JS代码内容,然后解析成二进制指令,再执行

JavaScipt的组成

  • ECMAScript(简称ES):JavaScript语法
  • DOM:页面文档对象模型,对页面中的元素进行操作
  • BOM:浏览器对象模型,对浏览器窗口进行操作

JavaScipt的书写方式

1.行内式

直接嵌入到html元素内部

<input type="button" value="点我一下" οnclick="alert('haha')">

/*

注意,JS中字符串常量可以使用单引号表示,也可以使用双引号表示。

HTML中推荐使用双引号,JS中推荐使用单引号

*/

2.内嵌式

写到script标签

<script>

alert('haha');

</script>

3.外部式

写到单独的 .js文件中

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

hello.js中 : alert('haha');

/*

这种情况下script标签中间不能写代码,写了也不会执行,

适合代码多的情况

*/

语法概览

变量的使用

基本用法

创建变量(变量定义/变量声明/变量初始化)

var name = ' zhangsan';

var age=20; //或者 let age=20

// let 比 var出现的晚,意味着避免了var这块定义变量的时候的一些缺陷,如果使用let定义变量,此时变量声明周期,作用域,基本和JAVA类似的

/*

var是JS中的关键字,表示这是一个变量,初始化的值如果是字符串,就要使用单引号或者双引号引起来。

JS中定义变量不需要指定类型

*/

动态类型

什么是强类型变量什么是弱类型变量?

强类型变量意味着不同的类型之间变量进行赋值的时候,需要进行强制类型转换

弱类型变量在不同类型之间变量进行赋值的时候,可以直接赋值(js的变量为弱类型)

什么是动态类型变量什么是静态类型变量?

动态类型意味着代码在执行过程中,变量类型可以随时发生变化

静态类型意味着变量定义的时候是什么类型。在运行过程中就是什么类型

基本数据类型

js中内置的几种类型

  • number:数字、不区分整数和小数
  • boolean:true、false
  • string:字符串类型,单引号,双引号都可以
  • undefined:只有唯一的值。表示未定义的值
  • null:只有唯一的值,表示空值

数字进制表示

var a=07;//八进制整数,以0开头

var b=0xa;//十六进制整数,以0x开头

var c=0b10;//二进制整数,以0b开头

特殊的数字值

  • Infinity:无穷大,大于任何数字,表示数字已经超过了JS能表示的范围
  • -Infinity:负无穷大,小于任何数字,表示数字已经超过JS能表示的范围
  • NaN:表示当前的结果不是一个数字

string

用法

var a='asd';

var b="asd";

//如果字符串本来已经包含引号

var msg = "My name is '张三' ";

var msg='My name is "张三" ';

求长度

使用string的length属性即可

var a= ' hehe ';

console.log(a.length);

字符串拼接

使用 '+' 连接即可

undefined 未定义数据类型

如果一个变量没有被初始化过,结果就是undefined,undefined类型

var a;

//与字符串进行相加

console.log(a + "10") //undefined10

//与数字进行相加,结果为NaN

console.log(a + 10);

运算符

其他运算符用法与java差不多,这里介绍两个不一样的运算符

  • == 比较相等(会进行隐式类型转换) 比较的是数据的内容
  • === 比较相等(不会进行隐式类型转换)比较的是数据的内容+数据的类型
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构