提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
。
提示：以下是本篇文章正文内容，下面案例可供参考
一、javascript是什么？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语
言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环
境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令
式、声明式、函数式编程范式。
二、javascript的使用方式
1.内部方式
即在head标签里指定script标签书写js的代码
代码如下（示例）：
在这里插入代码片
```html
<script>
//js中常用的函数
//1)要向浏览器输出内容
document.write("helloword!") ;
//2)可以在浏览器的控制台输出日志 ,使用控制台对象
console.log("helloworld") ;
//3)弹出一个提示框出来
//window对象属于浏览器内置对顶级对象,代表窗口,
//频繁调用可以不写
//window.alert("helloworld") ;
//简写为
alert("helloworld") ;
2.外部方式
1)单独在js文件夹中,单独创建后缀为.js的文件
2)在xxx.js文件中,书写js代码
3)在当前某个html页面中,导入这个xxx.js文件
必须有开始标签,有结束标签
<script src="导入外部xxx.js文件的路径"></script>
在这里插入代码片 <!-- 导入外部js文件-->
<script src="js/01_.js"></script>
<script>
//完成自己的其他js代码
</script>
三、js定义变量
1.定义JS变量
1.在js中，定义变量使用var来定义，var可以省略。（js是弱类型语言）
弱类型语言即语法结构不严谨。
2.因为js是弱类型语言，定义一个变量可以重复定义，后面的值会将前面的值覆盖掉。
3.var可以定义任何数据类型。
2.查看数据类型
注
在js中，查看一个变量的数据类型———用typeof（变量名）。
1.无论是整数还是小数，都是number类型（基本类型）。
2.无论是字符串还是字符，都是string类型（基本类型）。
3.undefined：未定义类型，就是自定义变量，没有给变量赋值。
4.object类型，（对象类型），自动提升为——Object:所有js内置对象的模板。
创建对象：
在这里插入代码片
```html
```html
<script>
js如何创建对象
var 对象名 = new Js内置对象() ;
var s = new String("hello") ;
*/
var a = 10 ;
var a = 25 ;//重复定义变量在js中是支持的,java语言不支持!
var b = 3.14 ;
//document.write((a+b)+"<br/>") ;
var c = "helloworld" ;
var d = 'a' ; //单引号括起来的单个内容 :字符
//var e = 'abc' ; //虽然是单引号,但是是多个内容,浏览器解析为 字符串内容 ""
var f ;
var g = new Object() ; //Object对象:是js内置对象的模板,就是提供了所有js内置对象的通用功能!
// var s = new String() ;
//输出到浏览器上 //字符串+任何数据=字符串
document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ; //a的值是10 后面这个+:字符串拼接符号
document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
document.write("c的值是:"+c+",c的数据类型时:"+typeof(c)+"<br/>") ;
document.write("d的值是:"+d+",d的数据类型时:"+typeof(d)+"<br/>") ;
//document.write("e的值是:"+e+",e的数据类型时:"+typeof(e)+"<br/>") ;
document.write("f的值是:"+f+",f的数据类型时:"+typeof(f)+"<br/>") ;
document.write("g的值是:"+g+",g的数据类型时:"+typeof(g)+"<br/>") ;
</script>
四、Js运算符
1.算数运算符
+,-,*,/,%(模:求余数)
2.赋值运算符
=
var a = 10 ;将=右边的值赋值给左边的这个变量a;
3.比较运算符
<,<=,>,>=,!=,==
这些符号不管连接的表达式是复杂的还是简单的,最终
要么就true,要么就false
4.逻辑运算符
基本符号:& 逻辑单与,有false,则false
| 逻辑单或,有true,则true
! 逻辑非
非true,则false
非false,则true
一般情况下:开发中用的都是&&,||
逻辑双与&&:多个条件是并列关系,必须同时满足条件:有false,则false
逻辑双或||:多个条件是或者的关系,有一个成立,就成立了!,有true,则true
5.三元运算符（三目）
语法格式:
表达式可以是简单的或者复杂,要么是true,要么false
(表达式?)执行true的结果:执行false的结果;
执行流程:
首先判断表达式是否成立,如果成立,则执行true的结果
如果不成立,则执行false的结果;
在这里插入代码片<script>
//算术运算符:
var a = 3 ; //将3赋值给变量a
var b = 4 ;
var c = 5 ;
//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>
五、JS流程控制语句
1.顺序结构语句
JS代码从上而下加载,比较简单的一类
2.选择结构语句
if语句 三种格式
格式1
if(表达式){
语句1;
}
执行流程:
表达式是否成立,如果成立,才能执行语句1
格式2:开发中使用最多(针对两种结果判断) (java语言中的if格式2也是使用最多的)
if(表达式){
语句1;
}else{
语句2;
}
执行流程:
1)先判断表达式是否成立
成立,则执行语句1
2)否则不成立,执行语句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/>") ;
//if..eles...
/*
if...else的嵌套
if(表达式1){
if(表达式2){
语句1;
}else{
语句2;
}
}else{
if(表达式3){
语句3;
}else{
语句4;
}
}
*/
//定义一个变量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>
3.switch语句
js中的switch语句
switch(变量){
case 值1: //js中的case语句后面既可以是常量,也可以是变量!
//java中的case语句后面只能是常量!
语句1;
break ; //结束,中断的意思
case 值2:
语句2;
break ;
...
...
default:
语句n;
break ;
}
执行流程:
1)首先判断变量的值和值1是否匹配
如果匹配,执行语句1,switch语句结束!
2)如果不匹配,继续和case后面的值2进行比较,成立,则执行语句2,break结束
...
3)如果上面都不匹配,则执行语句n,语句结束
switch语句结束条件:
1)遇见break结束
2)程序默认执行末尾
default语句可以在语句中的任何位置,但是如果在语句中,break最后别省略,否则如果case都不成立,执行
default语句,会有case穿透现象!
;如果在语句的末尾,break可以省略
六、JS事件编程
事件编程三要素
1)事件源---指的就是html标签 要么空参/要么带参
2)编写事件监听器----就写一个函数 (js代码)
function 函数名称(形式参数名 1,形式参数名2......)
3)绑定事件监听器----就是在标签中有一些onxxx属性和函数名称进行绑定 onxx
事件:
单击点击 click
双击点击 dbclick
失去焦点 blur
获取焦点 focus
选项卡发生变化的事件.... change
...
代码如下：
```html
```html
<script>
//function 函数名称(形式参数名1,形式参数名2......){...业务逻辑...}
//2)编写一个函数,事件监听器
function myClik(){
alert("点击事件触发了...") ;
}
</script>
```<body>
<!-- 写一个普通的按钮 -->
<!-- 1)input标签:事件源 -->
<input type="button" value="点我试试" onclick="myClik()" /><!-- 3)绑定2)里面的函数名称 -->
</body>
课后练习
根据输入的值,判断季节
3,4,5月 春季
6,7,8月 夏季
9,10,11月 秋季
12,1,2月 冬季
分析:
1)获取文本输入框的输入的值
此处 js的核心技术: dom编程
玩的就是获取标签对象,
然后通过特有的方法改变标签对象的属性
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<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>
</html>
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
