1.js的基本使用方法
使用方式一(内部方式)
<script>
document.write("输入的内容")
//向浏览器输出的内容
console.log("输入的内容") ;
//可以在浏览器的控制台输出日志 ,使用控制台对象
alert("输入的内容") ;
//弹出一个提示框出来
</script>
使用方式二(外部方式)
/*外部方式:1单独在js文件夹中,单独创建后缀为.js的文件
2在xxx.js文件中,书写js代码
3在当前某个html页面中,导入这个xxx.js文件*/
<script src="导入外部xxx.js文件的路径"></script>
//<!-- 导入外部js文件-->
2.js的运算符
1)算术运算符:+,-,*,/,%(模:求余数) 赋值运算符:=
如:var a = 10 ;将=右边的值赋值给左边的这个变量a;
2)比较运算符: <,<=,>,>=,!=,==
这些符号不管连接的表达式是复杂的还是简单的,最终要么就true,要么就false
3)逻辑运算符基本符号:& 逻辑单与,有false,则false
| 逻辑单或,有true,则true
! 逻辑非
非true,则false
非false,则true
一般情况下:开发中用的都是&&,||
逻辑双与&&:多个条件是并列关系,必须同时满足条件:有false,则false
逻辑双或||:多个条件是或者的关系,有一个成立,就成立了!,有true,则true
4)三元运算符(三目)
语法格式:表达式可以是简单的或者复杂,要么是true,要么false(表达式?)执行true的结果:执行 false的结果;
执行流程:首先判断表达式是否成立,如果成立,则执行true的结果如果不成立,则执行false的结果;
<script>
//算术运算符:
var a = 3 ;
//将3赋值给变量a
var b = 4 ;
//将4赋值给变量b
var c = 5 ;
//将5赋值给变量c
//var d = true ;
//var f = false ;
//document.write((a+d)+"<br/>") ;
//document.write((a-f)+"<br/>") ;
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/>") ;
document.write("<hr/>") ;
document.write((a+b)==(a+c)+"<br/>") ;
document.write("<hr/>") ;
document.write((a>=b)+"<br/>") ;
document.write((a==c)+"<br/>") ;
document.write("<hr/>") ;
//逻辑双与
document.write((a==b) && (a+b)==7) ; //有false,则false
document.write("<hr/>") ;
document.write((b+c)==7 || (a==3)+"<br/>") ; //有true,则true
document.write("<hr/>") ;
document.write(!!(a!=b)+"<br/>") ;
/*提示
js代码或者java逻辑代码, 在一些判断的时候,会使用逻辑非,针对相反的一面进行错误登录
场景
前台用户输入的用户和后台查出的用户名不一样,这个时候前面使用非!*/
document.write("<hr/>") ;
/*(表达式)?执行true的结果:执行false的结果;
执行流程:
首先判断表达式是否成立,如果成立,则执行true的结果如果不成立,则执行false的结果; */
var age = 20 ;
document.write((age>18)?"这是一个成年人":"是一个未成年人") ;
document.write("<hr/>") ;
//有两个值,求两个最大值
var num1 = 25 ;
var num2 = 40 ;
//定义一个变量接收
var max = (num1>num2)?num1:num2 ;
document.write("最大值是:"+max) ;
</script>
3.js的流程控制语句
三种格式
格式1
if(表达式){
语句1;
}
执行流程:
表达式是否成立,如果成立,才能执行语句1
格式2:开发中使用最多(针对两种结果判断) (java语言中的if格式2也是使用最多的)
if(表达式){
语句1;
}else{
语句2;
}
执行流程:
①先判断表达式是否成立成立,则执行语句1
②否则不成立,执行语句2
格式3:针对多种结果判断的
if...else if...else
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
...
...
}else{
语句n;
}
执行流程:先判断表达式1是否成立①如果成立,执行语句1
②如果不成立,继续判断表达式2是否成立,
③如果成立,执行语句2,不成立,依次执行下面的语句..
④如果上面都不成立,执行else中的语句n;
<script>
//选择结构语句之if格式2:使用最多
/** 在js中if中的内容,跟js数据类型有关系,(特例)
1整数类型number,如果是非0的整数,if成立;否则,不成立
2字符串类型string,如果是非空字符串,if成立;否则,不成立
3对象类型object,如果是对象,new Object(),if成立;如果是null,空对象!*/
if(null){
alert("成立") ;
}else{
alert("不成立") ;
} */
//求最大值
//已知两个变量
var a = 30 ;
var b = 20 ;
//定义一个结果变量
var max ; //定义了
if(a>b){
max = a ; //a赋值max
}else{
max = b ; //b赋值max
}
document.write("max的值是:"+max) ;
document.write("<hr/>") ;
//三元运算符 :比较两个数据最大值
var max2 = (a>b)?a:b;
document.write("max2的值是:"+max2) ;
document.write("<hr/>") ;
//如果是三个运算符进行比较
var m = 10 ;
var n = 20 ;
var z = 5 ;
//使用中间变量的方式 (开发中经常用到的)
//先使用m和n进行比较,将结果赋值给中间变量
var temp = (m>n)?m:n;
//temp和z比较
var max3 = (temp>z)?temp:z ;
document.write("max3的值是:"+max3) ;
document.write("<hr/>") ;
//定义一个变量max4
var max4 ;
if(m>n){
//m值大
if(m>z){
//m大
max4 = m ;
}else{
//z大
max4 = z ;
}
}else{
//n大
if(n>z){
//n大
max4 = n ;
}else{
//z大
max4 = z;
}
}
document.write("max4的值是:"+max4) ;
</script>
4.js事件编程的基本用法
练习:根据输入的值,判断季节
3,4,5月 春季
6,7,8月 夏季
9,10,11月 秋季
12,1,2月 冬季
分析:
获取文本输入框的输入的值
此处 js的核心技术: dom编程 ,就是获取标签对象,然后通过特有的方法改变标签对象的属性
function myClik(){
var inputObj=document.getElementById("month")
content=inputObj.value;
// 获取输入框的值
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("请输入正确的日期")
}
//完成判断
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/控制语句.js"></script>
</head>
<body>
<input type="text" id="month" value="点击事件" />
<input type="button" onclick="myClik()" value="点击" />
</body>
</html>