2021-09-20

1. script标签的使用

<!--嵌入的方式-->
<script>
js代码
</script>
<!-- 外部js文件引入的方式 -->
<script src="js文件路径"></script>
<!--标签内部-->
<!--事件属性-->
<div onclick="alert('坦坦然')">div标签</div>
<!--a 标签的特殊用法-->
<a href="javascript:alert('aaaa')">百度</a>

输出语句 

<script>
文档输出 显示在浏览器上边
document.write('文档输出')
控制台输出 常用于代码调试
console.log('控制台输出')
弹框
alert('普通弹框')
confirm('确认弹框')
prompt('请输入一个数字','25') // 自带输入框的弹框
</script>

 2.1变量

1. 概 念： 计算机中用来存储数据的

2. 变量的创建

语法: var 变量名称 = 值

变量的命名规范 包含数字(0-9)、字母(a-zA-Z)、下划线(_)、美元符号($)

不能用数字开头

不能使用系统关键字、保留字

变量名称有意义

驼峰命名法 首字母小写，其余单词首字母大写

3. 变量的扩展

a. 初始化赋值 创建变量的时候 赋值

<script>
var age=12
</script>

b.变量的值更新

<script>
var age = 20 // 初始值
age = 22 // age变量的值发生了变化
var age1=23
age = age1 // age 结果：23 将age1变量的值赋给了age变量
</script>

2.2数据类型 

1. php中的数据类型：boolean(布尔)、int(整型)、float(浮点型)、string(字符串)、array(数组)、 object(对象)、NULL(空)、resource(资源)

2. Java中的数据类型：boolean(布尔)、int(整型)、float(浮点型)、string(字符串)、array(数组)、 object(对象)、NULL(空)、long、short、double、char、byte

3. JavaScript中的数据类型 boolean(布尔)、string(字符串)、number(数字)、object(对象)、undefined(未定义)、

null(空) 布尔数据类型中只有true和false两个值 字符串使用引号(单引号和双引号)引起来 数字包括整数和浮点数、

NaN 注意:当非数字字符串参与算术运算(+ 除外)的时候，得出的结果是NaN

获取变量的数据类型

<script>
var str3= '15'
// 获取变量的数据类型
console.log(typeof(str3)) // 结果：string
console.log(typeof(NaN)) // 结果:number
</script>

2.3 运算符

2.3.1算术运算符

+

-

*

/

%

2.3.2比较运算符

<
>
<=
>=
== 等于 只比较值 值相等返回真，不等返回假
!= 不等于
=== 恒等于(全等于) 比较值和数据类型 值和类型都相同时 返回真 否则返回假
!== 恒不等于(全不等于)

2.3.5 递增递减运算符

++ 每次加1 -- 每次减1

<script>
var num1=12
var res = ++num1 + --num1 - num1-- + num1++ // num1 结果：? res 结
果：?
</script>

3.1 流程控制

3.1.1 分支(选择)结构

1. 单分支 语法： if(条件){条件为真的时候，执行}

<script>
if(false){
console.log('this is true');
}
</script>

2.双分支

语法： if(条件){条件为真的时候，执行}else{条件为假，执行的代码块}

<script>
if(5<2 || 4>3){
// 条件为真执行
console.log('this is ok');
}else{
// 条件为假执行
console.log('this is no ok');
}
</script>

3.多分支

a. if ...else if ...结构
语法：if(条件1){
条件1 为真 执行代码块
}else if(条件2){
条件2 为真 执行代码块
}...else{
以上条件都不满足时，执行的代码块
}
 b. switch ...case 结构
语法： switch(表达式){
case 值1:执行的代码1;break;
case 值2:执行的代码2;break;
...
default:以上值匹配不成功的时候，执行的代码
}

4.循环结构

当有一段相同或相似的代码，需要重复执行n次的时候,会使用到循环结构

1. for循环 语法：for(var 计数变量=初始值;循环条件;递增或者递减){ 循环体; }

<script>
// 输出1-100
for(var i=1;i<=100;i++){
// 循环体
document.write(i+'<br>')
}
</script>

2. while循环 语法： 计数变量 while(循环条件){ 循环体 递增递减 }

3. do...while循环 语法： 计数变量 do{ 循环体 递增递减 }while(循环条件)

3.2函数

函数:一段有名字的代码块

作用： 实现代码复用和提高开发效率

特性:函数不能自动执行，需要调用

语法:function 函数名称([形参]){ 实现特定功能的代码块 }

函数调用:函数名([实参])

<script>
function printInfo(name,sex,age){
document.write('我叫'+name+',是个'+sex+'的，今年'+age+'岁了<br>')
}
printInfo('李四','男',21)
</script>

注意：形参的个数和实参的个数要保持一致 判断给定的年份是否是一个闰年，如果是闰年返回true，不是返回false

<script>
function isRunNian(year){
if((year%4==0 && year%100!=0) || year%400==0){
return true;
}else{
return false;
}
}
</script

返回值: return 作用: 给函数本身设置一个值，终止后续代码执行 注意: 一个函数只能有一个返回值

4.数组

概念:数组是一组数据的集合，可以存储任意类型的数据

4.1数组的创建

1. 通过对象的方式创建 new

// 1. 通过对象的方式 new
var arr = new Array()

2. 字面量创建 [] 是字面量的含义

var arr1 = ['张三',true,21]

4.2 数组单个元素的访问

通过数组元素的键名(下标)，来获取数组的中的某一个值

语法： 数组名[键名]

// 访问arr1数组中的 张三
console.log(arr1[0])

修改数组的元素值

数组名[键名] = 修改后的值

// 将张三修改为李四
arr1[0] = '李四'
console.log(arr1);

4.3 数组的遍历

挨个访问数组中的每一个元素

// 数组的遍历
for(var i=0;i<arr1.length;i++){
console.log(arr1[i]);
}