JavaScript简介、使用方式、变量与数据类型、运算符、流程控制语句、函数的定义与调用、js内置对象、innerHTML/innerText 与网页时钟
一、JavaScript是什么？
1.概念：
javascript是一种解释型脚本语言，内置支持类型；
它的解释器被称为javascript引擎，作为浏览器的一部分（即浏览器j s引擎）
2.语言特点
动态性、弱类型、基于原型继承
3.作用
用于给HTML网页增加动态功能
4.javascript组成
ECMAscript语法
文档对象模型-DOM（Document Object Model)
浏览器对象模型-BOM（Browser Object Model)
5.由来与应用场景
以注册网页为例：
注册网页通常需要输入用户名、密码、确认密码、邮箱等信息后点击注册按钮
1.早期网页注册流程
步骤：
1）用户在浏览器的register.html页面输入基本信息，点击注册按钮，发送请求给web应用服务器
2）web服务器接收前台用户的参数（用户基本信息）
调用dao（数据访问对象）Data Access Object,查询用户是否存在，如存在，不能注册，不存在可以注册
3）反馈查询结果给浏览器
弊端：1994年网络带宽只有10kb左右，大量客户同时访问服务端时，需要等很长时间才能收到服务端反馈，用户体验差
每个用户的信息都是直接提交给服务器校验（校验用户信息是否已存在，用户是否输入格式错误信息等），服务器压力大
2.Netscape（网景公司）研发了livascript脚本语言，将其植入到领航者浏览器中
步骤
1）用户在浏览器的register.html页面输入基本信息，ls引擎会在前端先通过正则表达式校验（用户信息格式是否正确），所有信息格式全部正确，点击注册按钮才能发送请求给web 服务器
2）web服务器接收前台用户参数，调用dao并反馈查询结果给浏览器
优点：用户信息先在浏览器前端校验，解决了服务器压力过大问题
前端通过正则表达式校验会反馈即时信息，提升了用户体验
3.1995年Netscape与sun公司合作，livescript改名为javascript（收费）
4.为了应对市场变化，微软公司也推出了jscript脚本语言，植入了IE浏览器中，而且免费
5.javascript和jscript都是ECMAscript的实现，为了互用性，ECMA(欧洲计算机制造商协会）创建了ECMA-262标准，来统一基础语法。
ECMA全称：European Computer Manufacturers Association
二、使用方式
1.内部方式
在html的<script></scritpt>标签中书写javascript代码
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.write("hello,javascript")
</script>
</head>
<body>
</body>
</html>
2.外部方式
将代码写在一个js文件中，再通过script标签引入到html网页中
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/my.js"></script>
</head>
<body>
</body>
</html>
三、变量与数据类型
1.变量
1）使用var关键字，可以声明任意类型的变量
语法：var 变量名=值；
var a=10;
2) 由于javascrip是弱类型语言，var关键字与后面的封号可以省略不写
a=10
3) 定义变量时，变量名可以重复，后面的变量会将前面的覆盖
var a=10;
var a=20;
document.write(“a：”+a);
运行结果： a:20
注意：javascript中的关键字不能作为变量名
javascript中部分关键字：
abstract、else、instanceof、super、boolean、enum、int、switch、break、export、 interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、 final、native、throws、char、finally、new、transient、class、float、null、true、 const、for、package、try、continue、function、private、typeof、debugger、goto、 protected、var、default、if、public、void、delete、implements、return、volatile、 do、import、short、while、double、in、static、with
2.数据类型
javascript的数据类型：Number,String,Boolean,Undefined,Null,引用类型，数组类型
js中的实际数据类型由变量值决定，可以通过typeof()函数查询
1）Number类型
整数，浮点数都是Number类型
var a=10;
var b=1.1;
2）String类型
字符，字符串都是String类型
var c="hello";
var d='A';
(注意：前端表单都是通过String形式传到后台---重点掌握）
（js中String特有方法：concat拼接，fontcolor设置字体颜色）
3）Boolean类型
var a=true;
4）Object类型（引用类型）/数组类型
在js中，Object对象代表所有对象的通用模版
var student={id:18,name:"张三"，age:23};
var arr=[1,34,"hello",true,'a',"\t"];
细节注意：javascript的数组中可以存放不同类型的数据，与java不同
5）Undefined类型
未定义类型（没有给变量赋值时，自动转为该类型,没有实际意义）
四、运算符
1）算数运算符
+ - * / %
注意：java中int值相除有余数时，会自动取整，javascript中不会
javascript中true（1）和false（0）可以参与运算，不建议这样操作
2）赋值运算符
= += -= *= /= %=
3）逻辑运算符
&
｜
&&：当有一个表达式为false时，不会执行或者判断其后面的其他表达式
｜｜：当有一个表达式为true时，不会执行或者判断其后面的其他表达式
！
&&演示案例：
var m=4;
var n=5;
document.write("m:"+m+"n:"+n);
document.write((((++m) == 6) && (( -- m) == 3)));
document.write("m:"+m+"n:"+n);
4）关系运算符
>
>=
<
<=
!= :不等于
==：忽略数据类型，判断值是否相同
=== ：判断数据类型与值是否都相同
5）三目运算符
条件表达式？true时返回值：false时返回值
五、流程控制语句
1.分支语句
1）if
if语法：if(条件表达式）{条件成立执行的代码}else{条件不成立执行的代码}
if嵌套语法：if（条件表达式1）{
条件表达式1成立执行的代码
}else if(条件表达式n){
条件表达式n成立执行的代码
}else{
以上条件都不成立执行的代码
}
细节注意：由于js是弱类型语言，当if里的条件表达式值是非0整数，非空字符串，非null对象，条件是成立的，与java不同
2)switch
语法：switch(变量名){
case 变量1/常量1：
条件满足时执行的代码
break;
case 变量2/常量2:
条件满足时执行的代码
break;
...
default ：
条件都不满足时执行的代码
}
细节注意：java中case后面只能写常量，javascript中case后面可以常量也可以变量
2.循环语句
1）for
for(初始化语句；条件表达式；控制体语句）{
循环体语句
}
2）while
while(条件表达式){
循环体语句
}
3) do while
do{循环体语句}whlie(条件表达式);
4) for-in(类似于java中foreach-增强for循环）
应用场景：遍历数组与对象中的属性
语法：for(var 变量名 in 数组或对象){
使用变量名
}
3.控制语句
1)continue:跳过某次指定循环
2)break：跳出某个指定循环
3)return:结束方法
六、函数定义与调用
1.无返回值函数定义
语法：function 函数名（形参1，形参2...）{
函数执行代码
}
调用：
函数名（实参1，实参2...);
2.有返回值函数定义
语法：function 函数名（形参1，形参2...）{
函数代码
return 值；
}
调用：
var 变量名=函数名（实参1，实参2...); ---(也可以不接收返回值）
细节注意：
1）参数列表中不写类型var
2) javascript中函数没有重载概念，如有重名，后面的函数会覆前面的函数
实参列表>形参列表时，多余实参会被自动忽略，只计算与形参列表对应的参数
实参列表>形参列表时，函数依然会被调用，只是值为‘NaN’，代表有形参没有赋值
3)隐藏一个数组arguments:用于将实际参数绑定给形式参数
七、js内置对象
js内置对象：Array数组，Date日期，String字符串，正则表达式对象...
1.Array(数组）
1）数组对象创建方式：
var 数组名=new Array();
var 数组名=new Array(length);
var 数组名=[元素1，元素2...元素n]
2)常用方法
2.date（日期）
创建：
var 日期对象名=new Date();
Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间) 原生Date格式
常用方法：
getYear(); 当前年份与1900年的差距
getFullYear(); 获取当前年份
getMonth(); 获取当前月份（取值范围0-11）
getDate(); 获取月中日期（取值范围1-31）
getHours(); 获取小时值
getMinutes(); 获取分钟值
getSeconds(); 获取秒值
七、javascript中的常见弹窗与输出函数
1.弹窗函数
alert(); 只能点击确定按钮，没有返回值
confrim(); 可以点击确定或取消按钮，返回boolean值
prompt(); 可以输入文本内容的弹窗
第一个参数时提示信息，第二个参数是用户输入的默认值
当点击确认时，返回用户输入的信息；点击取消时，返回null
2.输出函数
document.write(); 向浏览器页面打印内容
console.log(); 向浏览器的控制台打印内容
八、innerHTML、innerText与网页时钟
1.innerHTML与innerText属性
1）相同点：所有标签都有这两个属性，用于给标签设置文本内容
2）不同点：innerHTML可以加入html，其内容可以被解析
innerText只是普通文本，不能解析html，如果加入html，会按文本内容显示
3）通过DOM操作使用
步骤：
a 获取span标签对象：通过id属性获取
var spanObj=document.getElementById(id属性值)；
b 通过span标签对象修改属性值
spanObj.innerHTML="设置属性值";
spanObj.innerText="设置属性值";
2.网页时钟
1)定义/关闭定时器
定义定时器：
setInterval("定时任务（）"，时间毫秒值)；
//每经过时间毫秒值重复执行这个任务
setTimeout("定时任务（）"，时间毫秒值)；
//经过时间毫秒值时执行一次任务
关闭定时器：
clearInterval(定时器名称)；
clearTimeout（定时器名称)；
2）网页时钟设定步骤
1.创建定时任务
2.使用定时函数动态执行
<body>
<span id="spanid">
<h2>当前系统时间</h2>
</span>
</body>
<script>
//1.创建定时任务（）
function setTimeRunnable(){
//1-1创建日期对象，获取当前系统时间
var dateObj=new Date();
//调用方法，拼接显示时间日期
var strDate=dateObj.getFullYear()+"-"+(dateObj.getMonth()+1)+"-"+dateObj.getDate()+" "+dateObj.getHours()+":"+dateObj.getMinutes()+":"+dateObj.getSeconds();
//1-2通过span标签，将strDate设定为innerHTML的属性值
var spanObj=document.getElementById("spanid");
spanObj.innerHTML=strDate;
}
//2.使用定时函数动态执行获取系统时间日期的任务
setInterval("setTimeRunnable()",1000);
</script>
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
