JS

最新推荐文章于 2023-07-03 18:43:24 发布

hy洛洛洛川

最新推荐文章于 2023-07-03 18:43:24 发布

阅读量199

点赞数

分类专栏：软件文章标签： JS

本文链接：https://blog.csdn.net/weixin_45621695/article/details/101069043

版权

软件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JavaScript初步学习

CSS：行内样式、嵌入样式、外部样式

JavaScript的书写位置

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入

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

注意点

引用外部js文件的script标签中不可以写JavaScript代码

变量

什么是变量

什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
为什么要使用变量

使用变量可以方便的获取或·者修改内存中的数据

如何使用变量

var声明变量

var age;

变量的赋值

var age;
age = 18;

同时声明多个变量

var age, name, sex;
age = 10;
name = 'zs';

同时声明多个变量并赋值

var age = 10, name = 'zs';

变量在内存中的存储

var age = 18;

变量的命名规则和规范

规则-必须遵守的，不遵守会报错
- 由字母，数字，下划线，$符号组成，不能以数字开头
- 不能是关键字和保留字
- 区分大小写
规范：不遵守不报错
- 变量名一定要有意义
- 驼峰命名法，userName，首字母小写，后面单词的首字母大写

案例

交换两个变量的值
不使用临时变量，交换两个数值变量的值

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类

数值字面量：数值的固定值的表示法

110 1024 60.5

进制

十进制
	var num = 10;
十六进制
	var num = 0xA;   10 11B 12C 13D 14E 15F  A-F
八进制
	var num = 011 9

浮点数
- 浮点数的精度问题
数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

数值判断

String类型

‘abc’ “abc”

字符串字面量

‘今天天气真好’
转义符
字符串长度

length属性用来获取字符串的长度
字符串拼接

字符串拼接使用 + 连接

1.两边只要有一个=是字符串，+就实现拼接功能

2.都是数字，就是算数功能

Boolean类型

Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

typeof

注释

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'him';

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

数据类型转换

转换成字符串类型

toString()
String()

存在的意义是，有的属性没有toString方法，这个使用String（）
拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()
parseInt()
parseFloat()
+，-0等运算

转换成布尔类型

Boolean()

算术运算符

+ - * / %

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值的比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到低
	1.()
	2.一元运算符 ++ -- !
	3.算数运算符  先* /  %后 + -
	4.关系运算符 > < >=...
	5.相等运算符    ==  !== === !=
	6.逻辑运算符     先&&   再||
	7.赋值运算符

// 练习1：
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
			
// 练习2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

循环结构：重复做一件事情

分支结构

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

// 结果是什么？
var a = !!'123';

循环结构

在javascript中，循环语句有三种，while、do…while、for循环。

while语句

基本语法：

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

hy洛洛洛川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS

JavaScript初步学习CSS：行内样式、嵌入样式、外部样式JavaScript的书写位置写在行内<input type="button" value="按钮" onclick="alert('Hello World')" />写在script标签中<head> <script> alert('Hello World!');...
复制链接

扫一扫