JavaScript01
js的使用方式:
方式1:js的内部方式
<script type="text/javascript">
</script>
script的type属性可以不写,如果要写的话使用type=”text/javascript”
方式2:外部方式 实际开发中(前端开发人员开发使用的)
需要在js文件夹中单独创建一个后缀名为.js的文件
书写js代码,在当前html页面中奖js文件导入即可
导入外部js文件
<script src=”js/01.js”></script>
注释:
//单行注释
/* 多行注释*/
Js常见的函数
在浏览器打印内容,类似于Java中的控制台输出语句
document.write(“hello,JavaScript我来了!”);
在浏览器中控制台中打印内容
console.log(“hello,JavaScript我来了”);
在浏览器中弹出一个提示框
Window对象时浏览器中顶级对象,可以省略不写!
window.alert(“helloworld”);
简写为:
alert(“helloworld”);
JavaScript中的变量以及数据类型
定义变量的注意事项
- 在js中定义变量,使用var来定义,把var可以省略不写(刚开始,建议写上)
- JavaScript是弱类型语言,它的语法结构不严谨!可以重复定义变量的,后面的变量值将前面的变量值覆盖掉
- 查看js的变量的数据类型,使用一个函数 typeof(变量名);
- var 可以任意数据类型!
Js的基本数据类型
- 无论是整数还是小数,都是number类型.----js引擎会自动提升为Number对象类型
- 无论是字符串还是字符,都是string类型----js引擎会自动提升为String对象类型
- boolean类型 (创建一个对象) ---js引擎会自动提升为Boolean对象类型
- object类型(创建一个对象)----js引擎会自动提升为Object对象类型
在Js中,Object对象代表所有js对象的模板!
- underfind类型:未定义类型(这种没有意义),因为没有赋值
Js的运算符
Js是弱类型,语法结构不严谨
true,false在运算的时候都自己默认值 true是1,false是0
实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
算术运算符
+ , - , * , / , % ,
++ , -- ,
赋值运算符
= :基本赋值
+=, -=, *=, /=, %=
比较运算符
实际开发中:逻辑双与&&,逻辑双或||
&&:左边的表达式为false,则右边不执行了,具有短路效果
||:左边的表达式为true,则右边不执行了,具有短路效果
三目运算符
(表达式)?执行true的结果:false的结果;
Js中的流程控制语句
三大类:
- 顺序结构:js代码从上而下依稀执行
- 选择结构
If结构
If(表达式){
语句
}
if(表达式){
}else{
}
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
...
}else{
语句n;
}
因为js是弱类型语言
- .如果if里面一个非0的整数,条件是成立的;
- .如果是非空字符串,条件成立;
- .如果是非null对象,条件成立的;
switch语句
switch(表达式){
case 可以变量/也可以是常量:
语句1;
break;
...
...
default:
语句n;
break;
}
switch语句的结束条件
- .遇见break结束
- .程序默认执行到末尾
case语句后面没有break,会造成”case穿透现象”
case后面跟java语言的case 语言不一样的地方就是这个case 后面可以是变量!
而在java中只能是常量
- 循环结构
for(使用居多),while(其次while),do-while
for循环
for(初始化语句;条件表达式;控制语句){
循环体语句;
}
while循环
初始化语句;
while(条件表达式){
循环体语句;
控制题语句;
}
do-while循环
初始化语句;
do{
循环体语句;
控制体语句;
}while(条件表达式);
和for,while相比循环体至少执行一次
Js事件编程三要素
- ,事件源--- 就是html标签的单击,双击....
- ,编写事件监听器---就是编写一个函数 function函数名称(){}
- ,绑定事件监听器---就在事件源上加上onXXX属性=”函数名称()”
练习:
<!DOCTYPE html> <!-- 文档声明-->
<html>
<head>
<meta charset="utf-8">
<title>流程语句练习</title>
<!--
有一个文本输入框,文本输入框的旁边是一个可点击的按钮,
在文本输入框中输入月份的值,点击按钮,判断是什么季节
3,4,5 春季
6,7,8 夏季
9,10,11 秋季
12,1,2 冬季
-->
</head>
<body>
<input type="text" id="month" placeholder="请输入月份的值" />
<input type="button" value="查询" οnclick="testSerach()" /><!-- 1)事件源 --> <!-- 3)绑定事件监听器-->
</body>
<script>
/* 2)事件监听器 */
function testSerach(){
//alert("触发了这个点击事件") ;
//需要获取文本输入框的内容 获取的input标签的value属性
//dom操作:
//1)通过特别的方式获取标签对象 最常用的 document.getElementById("id属性值") ;
//2)使用标签对象改变标签的属性
//获取id="month"所在的input标签对象
var inputObject =document.getElementById("month") ;
//获取到value属性,获取文输入框的内容
var content = inputObject.value ;
//alert(content) ;
//alert(typeof(content)) ;
//方式1:if...else if...else
/*
3,4,5 春季
6,7,8 夏季
9,10,11 秋季
12,1,2 冬季
*/
//js中,数字字符串 在和number进行==,string会自动转换成number
/* 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 == 12 || content ==1 || content == 2){
alert("冬季") ;
}else{
alert("对不起,非法数据!") ;
} */
//方式2:switch语句,利用case穿透
//case语句后面: string类型数字字符串 无法自动转换为number进行对比
//js中有一个函数: js提供的 parseInt(数字字符串) ----->number类型
content = parseInt(content) ;
//alert(typeof(content)) ;
switch(content){
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 12:
case 1:
case 2:
alert("冬季") ;
break ;
default:
alert("非法数据") ;
break ;
}
}
</script>
</html>
Js中创建一个数组
方式1: var 数组对象 = new Array(); //不指定长度
方式2: var 数组对象 = new Array(长度); //指定长度
方式3:静态初始化
arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);
简写:
var 数组对象名称 = [元素1,元素2,元素3,....];
for-in语句
for-in类似于增强for循环
应用场景:
- ,遍历数组
- ,遍历对象的属性
for-in语句的格式
for(var 变量名 in 数组或者对象名称){
使用变量名;
}
练习:
var arr = [10,20,30,"hello",'A',true,3.14] ;
//普通for
for(var i = 0 ; i < arr.length ; i ++){
document.write(arr[i]+" ") ;
}
document.write("<hr/>") ;
//for-in语句的格式
/*
for(var 变量名 in 数组或者对象名称){
使用变量名;
}
*/
for(var i in arr){
document.write(arr[i]+" ") ;
}
Js中的函数定义以及调用
定义函数的 格式1
function 函数名称(参数名称1,参数名称2,...){
函数的里面业务逻辑;
直接在这输出document.write(“XXXX”);
}
格式1的调用:
单独调用
函数名称(实际参数列表);
格式2:(推荐)
Function 函数名称(参数名称1,参数名称2,...){
函数的里面业务逻辑;
return 结果;
}
格式2调用:
赋值调用
var 最终结果变量 = 函数名称(实际参数列表);
定义函数的注意事项:
- js是弱类型语言,定义函数的时候,参数名称不能携带var
- js定义时候,没有返回值类型,但是函数可以携带return 语句,代表方法结束!
- Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
- 实际参数列表<形式参数列表,函数依然会调用,不过值是”NaN”,有一个形式参数没有赋值
实际参数列表 >形式参数列表,将实际参数的赋值给形式参数,多余的实际参数,直接省略不计
- 隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数
练习:
*/
//定义函数,两个数据求和
//格式1的写法
//function sum(var a, var b ){//不能带var
/* function sum( a, b ){
var c = a+b ;
document.write("c:"+c);
}
//调用
sum(10,20) ; */
//格式2的写法
/* function sum(a,b){
var c =a+b ;
return c;
} */
function sum(a,b,c){ //a=10,b=15,c=20
//隐藏一个数组名称:arguments
//作用:将实际参数绑定给形式参数
for(var i = 0 ; i< arguments.length;i++){
document.write(arguments[i]+" <br/>");
}
var d = a+b+c ;
return d ;
}
//赋值调用
var result = sum(10,15,20) ;
document.write("result:"+result) ;
Js内置对象Date
Js内置对象:Date日期,String字符串,Array数组,正则表达式对象...
浏览器解析JavaScript的时候,能够识别这个对象,使用里面的方法
//日期对象的基本使用 :dateObj = new Date()
//创建一个日期对象
var date = new Date() ;
//输出
//document.write(date) ;//Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间) 原生Date格式
//获取年份
//getYear() :当前的年份与 1900 年之间的差距
//改用getFullYear()
//var year = date.getYear() ;
var year = date.getFullYear() ;
document.write(year+"年") ;
//获取月份
//getMonth() :返回一个处于 0 到 11 之间的整数
var month = date.getMonth()+1 ;
document.write(month+"月") ;
//月中的日期 getDate( ): 1 到 31 之间的整数
var monthWithDate = date.getDate() ;
document.write(monthWithDate+"日 ") ;
//getHours() 获取小时值
document.write(date.getHours()+":") ;
//getMinutes():获取分钟值
document.write(date.getMinutes()+":") ;
//getSeconds() :getSeconds()
document.write(date.getSeconds()) ;
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
