目录
前言
本文是为了复习和总结4.24学习内容所写的,目的是复习巩固
一、JavaScript4.24学习内容
1.JavaScript注释
注释就是对代码的解释和说明。目的是为了让别人和自己很容易看懂，一看就知道这段代码是做什么用的。JavaScript的注释有两种
1)当行注释
//当行注释快捷键:ctrl+/
2)多行注释
/*
多行注释
*/键:shift + alt + a
2.JavaScript常用的函数
1)向浏览器输出内容
document.write("HelloWprld!!");2)可以在浏览器的控制台输出
console.log("HelloWorld!!");3)弹出一个提示框
window.alert("HelloWorld!!");由于window对象是浏览器内容的顶级对象,代表窗口,所以频繁使用可以不写.简写为:
alert("HelloWorld!!");3.JavaScript的使用方法
1)行内式:可以将单行或少量js代码写在html标签的事件属性中(以on开头的属性)，如：onclink
<input type="button" value="点击查询" onclick="getMonth"() />2)内嵌式:在head标签体中指定script标签书写js的多行代码,是常用的使用方法
<script>
document.write("HelloWorld!");
console.log("HelloWorld!");
alert("HelloWorld!");
</script>3)外部式:
1)在js文件夹中，单独创建后缀为.js的文件
2)在xxx.js文件中，书写js代码
//向浏览器打印了一个内容
document.write("hello,JavaEE2204!");
//弹一个提示框
alert("今天天气不错!") ;
//浏览器控制台打印内容
console.log("hello,JavaEE2204");3)在当前某个html页面中，导入xxx.js文件
<script src="js/01.js"></script>;4.JavaScript定义变量以及数据类型划分
1)定义变量在js中定义变量使用var定义.因为js是弱类型语言，所以var可以省略并且一个变量可以重复定义，但后面的值会覆盖前面的值。同时var可以定义任何数据类型
var a=10;
var a=20;//重复定义变量在js中是支持的，在Java语言中不支持
var b=3.14;
var c="HelloWorld";
var d='a';//单引号括起来的单个内容:字符
var e='abc';//虽然是单引号，但是是多个内容，浏览器解析为字符串内容
var f;
var g=new Object();//Object对象:是js内置对象的模板，提供所有js内置对象的 通用功能
var s=new String("hello");2)数据类型划分
在js中,查看一个变量的数据类型：使用函数typeof(变量名)
1)无论是整数还是小数，都是number类型(基本类型)---自动提升为ja内置对象Number
2)无论是字符串还是字符，都是string类型(基本类型)---自动提升为String
3)underfined:未定义类型，就是定义变量没有给变量赋值(没有意义)
4)object类型(对象类型)---自动提升为Object：所有js内置对象的模板
5.JavaScript常见的运算符
运算符:针对不同的数据类型操作的
- 算术运算符:+，-，*，/，%(模，求余数)
document.write((a+b)+"<br/>") ; document.write((a-b)+"<br/>") ; document.write((a*b)+"<br/>") ; document.write((a/b)+"<br/>") ; document.write((a%b)+"<br/>") ; - 赋值运算符:= var a=10;将=右边的值赋值给左边
//把10赋值给a var a = 10 ; //将=右边的值赋值给左边的这个变量a - 比较运算符:>,<,>=,<=,==,!=
document.write((a>b)+"<br/>") ; document.write((a<c)+"<br/>") ; document.write((a>=b)+"<br/>") ; document.write((a<=c)+"<br/>") ; document.write((a==b)+"<br/>") ; document.write((a!=c)+"<br/>") ; - 逻辑运算符
基本运算符：
逻辑单与 & ,有false,则false
逻辑单或 | ,有true,则true
逻辑非 !
非true,则false
非false,则true
document.write(a&b) ;
document.write((a|b) ;
document.write(!a) ;一般情况下，开发中用的都是&&，||
逻辑双与&&:多个条件是并列关系，必须同时满足条件，有false则false
逻辑双或||:多个条件是或者的关系，有一个成立就成了，有true则true
document.write((a==b) && (a+b)==7) ;
document.write((b+c)==7 || (a==3)+"<br/>") ; 6.JavaScript流程控制语句
流程控制语句分为三大类
顺序结构语句:代码从上而下加载,比较简单
选择结构语句:
1)if语句
格式1:
if(表达式){
语句1;
}执行流程:
先判断表达式是否成立,如果成立,如果成立才能执行语句1
格式二:开发中使用最多
if(表达式){
语句1;
}else{
语句2;
}执行流程:
1)先判断表达式是否成立。成立,则执行语句1
2)否则不成立,执行语句2
格式三:针对多种结果判断
if(表达式){
语句1;
}else if(){
语句2;
... ...
}else{
语句n;
}
执行流程:
先判断表达式1是否成立,如果成立,执行语句1
如果不成立,继续判断表达式2是否成立,
如果成立,执行语句2,不成立,依次执行下面的语句..
如果上面都不成立,执行else中的语句n;
举例:
以判断两个数中的最大值为例
<script>
var a=30;
var b=20;
var max;
if(a>b){
max=a;
}else{
max=b;
}
document.write("最大值是:"+max);
</script>if语句的嵌套
举例:
以三个数中的最大值为例
<script>
var n=70;
var m=80;
var z=40;
var max2;
if(m>n){
//m大
if(m>z){
max2=m;
}else{
//z大
max2=z;
}
}else{
//n大
if(n>z){
max2=n;
}else{
//z大
max2=z;
}
}
document.write("最大值是:"+max2)
</script>2)switch语句
switch(变量){
case 值1://js中case语句后面既可以是常量，也可以是变量
语句1;
break;//结束,中断的意思
case 值2:
语句2;
break;
...
default:
语句n;
break;
}
执行流程：
1）首先判断变量的值和值1是否匹配
如果匹配，执行语句1，switch语句结束
2）如果不匹配，继续和case后面的值二进行比较，成立，则执行语句2，break结束
...
3）如果上面都不匹配，则执行语句n，switch语句结束
switch语句结束条件：
1）遇见break结束
2）程序默认执行末尾
注意:default语句可以在语句中的任何位置,但是如果在语句中，break最后别省略，否则如果case都不成立，执行default语句，会有擦色穿透现象；如果在switch语句的末尾，break可以省略
7.JavaScript事件编程的三要素
事件编程三要素
1)事件源---指的就是html标签
<body>
//写一个普通按钮
//1)input标签:事件源
<input type="button" value="点我试试"/>
</body>2)编写事件监听器---就写一个函数(js代码) function 函数名称(形式参数名1,形式参数名2,...)
<script>
//function 函数名称(形式参数名1,形式参数名2,...){...业务逻辑...}
//2)编写一个函数,事件监听器
function myClick(){
alert("点击事件触发了...")
}
</script>3)绑定事件监听器---就是在标签中有一些onxxx属性和函数名称进行绑定
<body>
<input type="button" value="点我试试" onclick="myClick()" />//3)绑定2)里面的函数名称
</body>事件:
单击点击 click
双击点击 dbclick
失去焦点 blur
获取焦点 focus
选项卡发生变化的事件 change
8. JavaScript流程控制语句以及事件练习
举例:
根据输入的值,判断季节
3,4,5月 春季
6,7,8月 夏季
9,10,11月 秋季
12,1,2月 冬季
<script>
//编写事件监听器
function getMonth(){
//1)通过dom操作,获取id="month"的这个标签对象,获取它的value属性的值
var inputObj = document.getElementById("month") ;
//document.getElementById("id属性值") 固定js的dom操作语法
//获取输入框的内容
content = inputObj.value ;
// alert(content) ;
//alert(typeof(content)) ;
//完成判断
//在js 字符串==整数,它会自动会将字符串---转换成整数
if(content==3|| content==4 || content == 5){
alert("属于春季") ;
}else if(content==6|| content==7 || content == 8){
alert("属于夏季") ;
}else if(content==9|| content==10 || content == 11){
alert("属于秋季") ;
}else if(content==1|| content==2 || content == 12){
alert("属于冬季") ;
}else{
alert("对不起,属于非法数据") ;
}
}
</script>
</head>
<body>
<input type="text" id="month" placeholder="请输入月份的值" />
<!-- 1)事件源 -->
<input type="button" value="点击查询" onclick="getMonth()" />
</body>
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
