#JavaScript基础
课件
1基本结构、原理
内嵌
导入
2核心语法
变量
数据类型
运算符（运算关键字）
typeof检测变量的返回值
typeof运算符返回值如下
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
String对象
数组
运算符号
流程控制
逻辑控制
循环中断
注释
3输入输出
4语法约定
代码区分大小写
变量、对象和函数的名称
分号
5什么是函数
函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数
常用系统函数
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
自定义函数
无参函数
有参函数
6变量的作用域-ES5var-6let
7事件
总结
代码---转义h5CSS
1初学JavaScript-doc.w、alert
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
</script>
<input type="button" value="点击我" onclick="javascript:alert('欢迎您')"/>
</body>
</html>
2外部JavaScript文件-导入
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript" src="js/export.js"></script>
</body>
</html>
3typeof的应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>typeof的功能和用法演示</title>
</head>
<body>
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height=10,name="rose";
var date=new Date(); //获取时间日期对象
var arr=new Array(); //定义数组
document.write("width: "+typeof(width)+"<br/>");
document.write("height: "+typeof(height)+"<br/>");
document.write("name: "+typeof(name)+"<br/>");
document.write("date: "+typeof(date)+"<br/>");
document.write("arr: "+typeof(arr)+"<br/>");
document.write("true: "+typeof(true)+"<br/>");
document.write("null: "+typeof(null));
</script>
</body>
</html>
4数组的应用split-join
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组的应用</title>
</head>
<body>
<script type="text/javascript">
var fruit= "apple, orange, peach,banana";
var arrList=fruit.split(",");
var str=arrList.join("-");
document.write("分割前："+fruit+"<br/>");
document.write("使用\"-\"重新连接后"+str);
</script>
</body>
</html>
5程序调试-prompt(=Scanner)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>程序调试</title>
<style type="text/css">
div{text-align: center; line-height: 25px;}
</style>
</head>
<body>
<div>
<script type="text/javascript">
var t=prompt("请输入一个整数","");
if(t>5){
for(var i= t;i>0;i--){
for(var j=0;j<i;j++){
document.write("* ");
}
document.write("<br />");
}}
else{
for(var k=t;k>0;k--){
for(var m=0;m<k;m++){
document.write("* ");
}
document.write("<br />");
}
for(var n=1;n<=t;n++){
for(var h=0;h<n;h++){
document.write("* ");
}
document.write("<br />");
}
}
</script>
</div>
</body>
</html>
6类型转换函数-parseInt
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>parseInt的应用</title>
</head>
<body>
<script type="text/javascript">
var op1=prompt("请输入第一个数:","")
var op2=prompt("请输入第二个数:","")
var p1=parseInt(op1);
var p2=parseInt(op2);
var result=p1+p2;
document.write(p1+"+"+p2+"="+result);
</script>
</body>
</html>
7无参函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无参函数的应用</title>
</head>
<body>
<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study( )" />
<script type="text/javascript">
function study( ){
for(var i=0;i<5;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
</script>
</body>
</html>
8有参函数-onclick,prompt
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>有参函数的应用</title>
</head>
<body>
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
<script type="text/javascript">
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
</script>
</body>
</html>
9变量的作用域-var(自动到)成员let块
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>变量的作用域</title>
</head>
<body onload="second( )">
<script type="text/javascript">
var i=20;
function first( ){
var i=5;
for(var j=0;j<i;j++){
document.write(" "+j);
}
}
function second( ){
var t=prompt("输入一个数","")
if(t>i)
document.write(t);
else
document.write(i);
first( );
}
</script>
</body>
</html>
