初识JavaScript之—变量,数据类型,运算符,语句(1~34)

111 阅读8分钟

首先书写格式

<script></script>

1.hello

alert("")相对浏览器显示(初打开页面的对话框设置),一个弹出小窗口

prompt("")相对于浏览器显示,一个弹出输入框(默认取消或者不输入都可以关掉),(不可以关掉可以用do while做)

document.write()文档对象类型,相对于页面(操作页面)

TIP:document.write(n)默认是把符合的都显示,但是默认横向全部排列;如果想到头折行,需要加一个空字符串(n+“ ”),引号中要加空格;而如果想每个元素都换行,可以这样写(“<br”)

而如果想自己控制到几个要换行,需要再借助第三方,就是要再引入一个变量eg.count

联想截图_20231029093524.png 注意:count的if写在大if里面,不要写在外面

console.log("")

Tip.加双引号是字符用,不加才是函数变量

给开发者做调试用的,输出到控制台(在检查里)

2.书写位置

  1. 行内式(不建议)

联想截图_20231023221908.png

  1. 内嵌式(在html的script内写,head或者body)
  2. 外链式(.js)

<script src=""></script>

3.JS的注释与规范

  1. 注释//(单行)/* */(多行),或者快捷键
  2. js不用加分号

4.变量

指在程序中保存数据的一个容器

var 变量名=值

eg.

image.png

5.变量命名规则与规范

image.png

6.数据类型(基于变量)

联想截图_20231031221019.png 1.基本类型

  • Number(不加引号)

(数字(整数),浮点数(小数),科学计数法(2e3=2x10三次方),十六进制,八进制,二进制,NaN)

  • Sring字符串(双引号)

  • Boolean:true 1 false 0

  • Undefined NaN(声明了但是未赋值,未定义,未来可以定任意值)

  • Null 0(提前定义,未来用来存对象值)

  • Symbol

2.复杂类型

7.数据类型检测

var a="aaa"   
  console.log(typeof aaa)
 //或者
  console.log(typeof (a+100))//可用于计算

结果一定是字符串,string类型(控制台上显示形式)

8.数据类型———字符串转成数值number

即把string型转换为number型

方法1

如果是小数,number可以保存小数部分,有字母会变成NaN

var a="100"
var b=Number(a)
//______________________
var a="123abc"
var b=Number(a) //NaN

方法2

取整,不保留小数,有字母时不会变成NaN

var a="123abc"
var b=parseInt(a)  //123
//parseInt意为解析为int类型,所以如果a是小数,会自动舍掉小数部分

方法3

保留小数,有字母不变成NaN(较常用)

var a="123.56abc"
var b=parseFloat(a)  //123.56

而这种数字加字母的转换有什么用

eg.其实还是比较广泛的,比如你在提取一个宽高例如123px时就可以利用这个把数值提取到

方法4

(除加号,减号或者其他都可以)

//_______________正确写法例如
var a="100"
var b=a-0 //100
//________________错误写法
var a="100"
var b=a+0 //1000

9.数据类型——其他数据类型转换为字符串

三个方法

=后写 image.png 拼接的话,如果不想改变数值,""里就不要写东西

10.数据类型——其他数据类型转换为布尔

image.png 或者可以用: !!来转换成布尔值 ———————————————————————————————————————————

一.运算符

1.数学运算符

2. 赋值运算符

1.=

eg.交换两个数

var m=5
var n=6

var c //借助一个空容器
c=m
m=n
n=c
//6 5

2 .+= -= *= /= %=

eg. number=number+1等价于number+=1

3.比较运算符

联想截图_20231025153319.png

联想截图_20231025154056.png

4.逻辑运算符

&& 优先级高于 ||

联想截图_20231025154500.png

联想截图_20231025155057.png

特殊点:

第一个条件满足才会执行第二个(&& ||)短路用法

5.自增自减运算符

联想截图_20231025161214.png

6.三目运算符

联想截图_20231025163915.png 建议最多两个三目,多的话建议用if ———————————————————————————————————————————————

二.if条件分支结构

if (括号里是一个代码,运算) 联想截图_20231025165210.png if else image.png

if else.....if

其中if else可以写多个 联想截图_20231025170017.png if else if....else

.最后一个直接写else,意思是前面不行直接走它 image.png ———————————————————————————————————————————————

三.switch条件分支结构

(括号里只能是变量名)

看变量是否匹配下面的值,适用于判断变量 具体等于某个值

联想截图_20231025173812.png 示例1

联想截图_20231028101149.png

示例2

联想截图_20231028112857.png

示例3

联想截图_20231028114618.png

四.循环分支语句-while

联想截图_20231028184301.png 如果没有自身改变,那么就会一直循环不停了(死循环)

五.do while循环

联想截图_20231028191013.png 用do while可以做弹出框取消或者不输入就不能关闭的设置

联想截图_20231028192843.png

逻辑:

首先上面do部分,会弹出一个输入框,如果你点取消则返不回值,那么你这条就为假,那么下面的感叹号!一加,那么你这条就又为真了,那么又会执行循环这个输入框。

所以最后呈现出的效果就是,如果你不输入东西,他就不能关闭的效果

TIP: 循环可以和条件组合一起用,灵活点

联想截图_20231028193831.png 当你输入的东西为真时,才往页面显示输出(更严谨)

六.for循环

联想截图_20231029091323.png执行到条件判断,然后进行自身改变

for循环里可以套ifelse这样的条件判断语句

七.循环控制语句——break,continue

break 联想截图_20231029094019.png continue(重点:本次) 联想截图_20231029095341.png TIP: if分支中若只有一句,可不写大括号,直接再小括号后写你要执行的语句eg.continue