一、简介
- js是一个简称,全称:JavaScript
js的功能:
- 是一个功能强大的脚本语言【脚本:代码量较小的程序】
- js可以嵌入到html页面中,实现各种特效
案例:
<!DOCTYPE html>
<html>
<head>
<title></title><style type="text/css">
div{
width: 100px;
height: 100px;
background-color: black;
}
</style><script type="text/javascript">
window.alert("warnging 1....")
document.write("<h1>abcdef</h1>")
</script>
</head><body>
<h3>hello boys</h3>
<div></div>
</body>
</html>
二、JS基础用法
1、js的写法
<script type="text/javascript">
js代码
</script>
- 一般情况下,js写入到html的head部分中
2、js代码
window.alert(字符串)
-
作用:可以实现在访问网页的时候,在网页中弹出一个警告框
-
字符串:是警告框中所要显示的信息
document.write(字符串)
-
作用:在html的body部分中写入指定的字符串
js的注释
-
单行注释:仅仅注释掉一行,方法是在行首写入 //
-
多行注释:一次注释掉多行,方法是开头是/* 结尾是 */
<script type="text/javascript">
//window.alert("warnging 1....")
/*
window.alert("warnging 1....")
window.alert("warnging 1....")
window.alert("warnging 1....")
*/
</script>
3、js的变量
- 变量指的是值可以发生改变的对象,就是变量
3.1 定义变量的方法
-
方法1:var 变量名 = 变量值 指定变量名,同时指定变量中保存的值
-
方法2:var 变量名 仅仅指定变量名
3.2 变量名的规则
-
变量名中仅仅可以有数字、字母、下划线
-
变量名不能以数字位开头
3.3 判断哪个变量是正确命名
-
name1
-
name1c
-
1name 错误
-
1cname 错误
-
_name
-
_1name
-
1_name 错误
-
name_
-
name_1
3.4 变量的类型
-
数值类型:var age = 20
-
字符类型:var name = 'tom' ,注意,这个值必须用引号引起来
3.5 js的运算符
-
算数运算符:+ - * / %
-
赋值运算符:=,-= , +=, *= , /=
// 定义变量n,赋值1
var n = 1
// 让n中的值加2
n = n + 2// 让n中的值再次加2
n += 2// n += 2 等同于 n = n + 2
// 让n中的值乘以2
n = n * 2
n *= 2
- %:取余【取模】
6/4 计算6除以4,结果是整数部分,也就是1
6%4 计算6对4取余,也就是6除以4,计算其余数210%3 = 1
10/3 = 3
-
通常用%来判断目标数字是奇数还是偶数
-
奇数:除以2,余数1
-
偶数:除以2,余数0
-
-
拼接:将字符串和变量链接成一个整体
-
变量替换:也就是将变量名替换成变量值
案例:拼接字符串案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
// 定义三个变量
var name = 'tom';
var age = 18;
var gender = "男";// 用 + 拼接一个字符串
var str
str = "姓名是:" + name + "<br>" + "年龄是:" + age + "<br>" + "性别是:" + gender// 显示输出结果
document.write(str)
</script>
</head><body>
</body>
</html>
案例:通过js打印表格
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var name1 = 'tom'
var age1 = 18
var tel1 = 13011111
var name2 = 'jerry'
var age2 = 20
var tel2 = 13622222
var str
str = '<table border="1px red solid" width="200" height=50 cellspacing="0" rules="yes"><tr><td> '+ name1 + '</td><td> ' + age1 + '</td><td>' + tel1 + '</td></tr><tr><td>' + name2 + '</td><td>' + age2 + '</td><td>' + tel2 + '</td></tr></table>'
document.write(str)
</script>
</head>
<body></body>
</html>
三、流控制
1、判断语句
格式
格式1:单分支格式
if(判断条件)
{
代码 // 当判断条件成立的时候,才会执行代码
}格式2:双分支格式
if(判断条件)
{
代码 // 当判断条件成立的时候,才会执行代码
}
else
{
代码 // 当判断条件不成立的时候,才会执行代码
}
案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var n = 10
var m = 3if(m>n)
{
document.write("ok")
}
else
{
document.write("error")
}
</script>
</head>
<body></body>
</html>
判断符号
>
<
>=
<=
!=
== 判断两个字符是否相同
用户交互:让用户输入一个内容,并接收进来
var num = window.prompt(提示信息)
案例:让用户输入一个数字,判断这个数字是否大于10
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var num = window.prompt("请输入一个数字:")
if(num>10)
{
document.write("数字大于10")
}
else
{
document.write("数字不大于10")
}
</script>
</head>
<body></body>
</html>
2、for循环
for(为变量设置初始值; 判断条件; 修改变量中的值)
{
代码
}
初始值变量 判断条件 修改变量的值
for(var num=1; num=10; num++)
{
document.write("a")
}
执行过程:
-
第一步:首先为变量设置初始值,也就是执行 var num=1
-
第二步:判断条件是否成立,此时num的值是1,条件是num<=10,因此条件成立
-
第三步:执行循环中的代码,也就是执行 document.write("a")
-
第四步:执行修改变量中的值,也就是执行 num++ ,此时num中的值是1,因此执行了num++以后,num就成了2
-
第五步:再次判断条件是否成立,此时num是2,条件是num<=10,条件依然成立
-
第六步:再次执行循环中的代码,也就是 document.write("a")
-
....
-
...
注意:
-
for循环的情况是条件成立才会进行循环
案例:打印一个100行2列的表格【扩展问题】
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var str_start = "<table width=300 height=3800 rules=yes border=1px red solid cellspacing=0>"
var str_end = "</table>"
var str_content
for(var num=1; num<=100; num++)
{
str_content += "<tr><td></td><td></td></tr>"
}
var str = str_start + str_content + str_end
document.write(str)
</script>
</head>
<body></body>
</html>