js的使用方式
script的type属性可以不写,如果要写的话使用 type="text/javascript"
方式1:js的内部方式
<script>
单行注释
多行注释
在js常见的函数
向浏览器打印内容,类似于Java中的控制台输出语句
document.write("hello,JavaScript我来了!") ;
还可以在浏览器中控制台中打印内容
console.log("hello,JavaScript我来了") ;
在浏览中弹出一个提示框
window对象是浏览器中顶级对象,可以省略不写!
window.alert("helloworld") ;
简写为:
alert("helloworld") ;
</script>
方式2:外部方式 实际开发中(前端开发人员开发使用的!)
需要在js文件夹中单独创建一个后缀为.js的文件
书写js代码,在当前html页面中将js文件导入即可!
<script src="js/01.js"></script>
定义变量的注意事项
1.在js中定义变量,使用var来定义,var可以省略不写(刚开始,建议写上)
2.javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将 前面的变量值覆盖掉
3.查看js的变量的数据类型,使用一个函数 typeof(变量名)
4.var可以任意数据类型!
js的基本数据类型
1.无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
2. 无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
3.boolean类型 ----js引擎会自动提升为 Boolean 对象类型
4.object类型 (创建一个对象 ) ---- js引擎会自动提升为Object对象类型
在Js中,Object对象代表所有js对象的模板!
5.undefined类型 :未定义类型 (这种没有意义),因为没有赋值!
js是弱类型,语法结构不严谨
true,false在运算的时候都自己默认值 true是1,false是0
实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
算术运算符
+,-,*,/,%
++,--
赋值运算符
=:基本赋值
+=,-=,*=,/=,%=
比较(关系运算符)
<,<=,>,>=,==,!=
逻辑运算符
实际开发中:逻辑双与&&,逻辑双或||
三元(三目)运算符
(表达式)?执行true的结果:false的结果
三大类结构
1)顺序结构:js代码从上而下依次加载
2)选择结构
if结构
if(表达式){
语句
}
if(表达式){
}else{
}
if(表达式1){
语句1;
}else if(表达式2){
语句2 ;
...
...
}else{
语句n;
}
switch结构
switch(表达式){
case 可以变量/也可以常量:
语句1;
break ;
...
...
default:
语句n;
break ;
}
3)循环结构
for(使用居多),while(其次while),do-while
练习1:有一个文本输入框,文本输入框的旁边是一个可点击的按钮,
在文本输入框中输入月份的值,点击按钮,判断是什么季节
3,4,5 春季
6,7,8 夏季
9,10,11 秋季
12,1,2 冬季
<!DOCTYPE html> <!-- 文档声明-->
<html>
<head>
<meta charset="utf-8">
<title>流程语句练习</title>
</head>
<body>
<input type="text" id="month" placeholder="请输入月份的值" />
<input type="button" value="查询" onclick="testSerach()" />
</body>
<script>
function testSerach(){
//需要获取文本输入框的内容 获取的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)事件源 ----就是html标签 的单击,双击....
2)编写事件监听器-- 就是编写一个函数 function 函数名称(){}
3)绑定事件监听器-- 就在事件源上加上onxxx属性="函数名称()"
-->for-in
类似于增强for循环
应用场景:
1)遍历数组
2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
在js如何 创建一个数组
方式1: var 数组对象 = new Array() ; //不指定长度
方式2: var 数组对象 = new Array(长度) ;//指定长度
var arr = new Array(2) ;
普通for
for(var i = 0 ; i < arr.length; i++){
document.write(arr[i]+"<br/>") ;
}
方式3:静态初始化,
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
简写格式 :var 数组对象名称= [元素1,元素2,元素3,.....] ;
在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致!
for-in语句的格式
for(var 变量名 in 数组或者对象名称){
使用变量名;
}
定义函数的 格式1
function 函数名称(参数名称1,参数名称2....){
函数的里面业务逻辑
直接在这输出document.write("xxx") ;
}
格式1调用:
单独调用
函数名称(实际参数列表) ;
格式2:(推荐)
function 函数名称(形式参数列表){
函数的里面的业务逻辑
return 结果;
}
格式2调用:
赋值调用
var 最终结果变量 = 函数名称(实际参数列表) ;
定义函数的注意事项:
1)js是弱类型语言,定义函数的时候,参数名称不能携带var
2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
4)实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没 有赋值
实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数
Js内置对象:Date日期,String字符串,Array数组,正则表达式对象..
浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
练习2:
date:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08_Js内置对象Date</title>
<script>
//日期对象的基本使用 :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()) ;
</script>
</head>
<body>
</body>
</html>面试题_innerText和innerHTML属性有什么区别?
任何标签都有这俩个innerText和innerHTML属性
这两个属性代表设置标签的文本内容
innerHTML可以加入html标签,可以被解析 (推荐)
innerText只是普通的文本内容,不能够解析html标签,如果加入html标签
就会原封不动的解析成普通文本!
练习3:
网页时钟:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>10_网页时钟</title>
</head>
<body>
<h3>当前系统时间是:</h3>
<span id="spanTip"></span>
</body>
<script>
function generateDate(){
//1)获取当前系统时间
//1.1)创建日期对象
var date = new Date() ;
//1.2)拼接出来时间字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+
date.getSeconds() ;
//2)dom(文档对象模型编程)操作:
//2.1)获取id="spanTip" 所在的span标签对象
var span = document.getElementById("spanTip") ;
//2.2)设置span标签的文本内容
span.innerHTML ="<h3>"+dateStr+"</h3>" ;
}
//3)开启网页定时器
//setInterval("定时任务()",时间毫秒值):每经过时间毫秒值重复执行这个定时任务..
//setTimeout("定时任务()",时间毫秒值):经过这个毫秒值之后,执行一次定时任务..
setInterval("generateDate()",1000) ; //每1秒重复执行生成时间的任务
</script>
</html>
816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
