JavaScript简介
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
1.向HTML页面中添加交互行为
2.脚本语言,语法和Java类似
3.解释性语言,边执行边解释
JavaScript组成
JS基础结构和应用
JavaScript的基本结构
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >
JavaScript的应用
……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello,JavaScript</h1>");
</script>
</body>
</html>
网页中引用Javascript的方式
1.使用script标签
2.外部JS文件
<script src="export.js" type="text/javascript"></script>
3.直接在HTML标签中
<input name="btn" type="button" value="弹出消息框"
onclick="javascript:alert('欢迎你');"/>
JavaScript核心语法
变量
先声明变量再赋值
// var - 用于声明变量的关键字
// width - 变量名
var width;
width = 5;
同时声明和赋值变量
var catName= "皮皮";
var x, y, z = 10;
不声明直接赋值
width=5;
注意:变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
数据类型
undefined
var width;
变量width没有初始值,将被赋予值undefined
null
表示一个空值,与undefined值相等
number
var iNum=23; //整数
var iNum=23.0; //浮点数
boolean
布尔值,true和false
string
一组被引号(单引号或双引号)括起来的文本
var string1=“This is a string”;
ypeof运算符
typeof的功能是检测变量的返回值
typeof运算符返回值如下
- undefined:变量被声明后,但未被赋值
- string:用单引号或双引号来声明的字符串
- boolean:true或false
- number:整数或浮点数
- object:javascript中的对象、数组和null
String对象
属性
- 符串对象.length
- 方法
- 字符串对象.方法名();
var str="this is JavaScript";
var strLength=str.length; //长度是18
数组
数组创建和使用
创建数组->为数组赋值->访问数组
var 数组名称 = new Array(size);
//两者取其一
var fruit= new Array("apple", "orange", " peach","banana");
var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";
var like = fruit[1];
数组的常用属性和方法
更多方法可查阅JavaScrpt Array对象参考手册:http://www.w3school.com.cn/js/jsref_obj_array.asp
运算符号
逻辑控制语句
if条件语句
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
switch多分支语句
switch (表达式)
{
case 常量1 :
JavaScript语句1;
break;
case 常量2 :
JavaScript语句2;
break;
...
default :
JavaScript语句3;
}
for、while循环语句
for(初始化; 条件; 增量)
{
JavaScript代码;
}
while(条件)
{
JavaScript代码;
}
for-in
var fruit=[ "apple", "orange", "peach","banana"];
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}
循环中断
break
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
if(i==3){
break;
}
document.write("这个数字是:"+i+"<br/>");
}
</script>
continue
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
if(i==3){
continue;
}
document.write("这个数字是:"+i+"<br/>");
}
</script>
注释
单行注释以 // 开始,以行末结束
alert("恭喜你!注册会员成功"); //在页同上弹出注册会员成功的提示框
多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World”
*/
常用输入/输出
alert()
alert("提示信息");
prompt()
prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");
语法约定
1.代码区分大小写
2.变量、对象和函数的名称尽量贴合功能,不要随便取
3.语句结束用分号
程序调试
1.Chrome开发人员工具
- 停止断点调试
- 单步调试,不进入函数体内部
- 单步调试,进入函数体内部
- 跳出当前函数
- 禁用所有的断点,不做任何调试
2.alert()方法
函数
函数的含义
- 类似于Java中的方法,是完成特定任务的代码语句块
使用更简单
- 不用定义属于某个类,直接使用
函数分类
- 系统函数和自定义函数
系统函数
parseInt (“字符串”)
-
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat(“字符串”)
-
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
- 用于检查其参数是否是非数字
自定义函数
- 函数定义
function 函数名( ){
//JavaScript语句
[return 返回值]
}
- 调用函数
函数调用一般和表单元素的事件一起使用,调用格式
事件名= “函数名( )” ;
示例:
1.调用无参函数,输出5次“欢迎学习JavaScript”
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<script>
function study(){
for(var i = 0; i < 5; i++)
{
document.write("<h4>欢迎学习JavaScript</h4>")
}
}
</script>
<input type="button" name="btn" value="显示" onclick="study()"/>
</body>
</html>
2.根据输入的次数,显示“欢迎学习JavaScript“
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<script>
function study(count){
for(var i = 0; i < count; i++)
{
document.write("<h4>欢迎学习JavaScript</h4>")
}
}
</script>
<input type="button" name="btn" value="显示" onclick="study(prompt('输入次数'))"/>
</body>
</html>
练习:编写一个四则运算函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<script>
function acclate()
{
var aa=prompt("请输入第一个数","");
var cc=prompt("请输入第二个数","");
var sign=prompt("请输入运算符","");
var count;
var a=parseFloat(aa);
var c=parseFloat(cc);
switch(sign){
case "+":
count=a+c;
break;
case "-":
count=a-c;
break;
case "*":
count=a*c;
break;
default:
count=a/c;
}
alert("两数运算结果为"+a+sign+c+"="+count);
}
</script>
<input type="button" name="btn" value="计算两数运算结果" onclick="acclate()"/>
</body>
</html>
变量的作用域
全局变量
局部变量
示例:
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( );
}
在示例中,first的i是局部变量,所以for循环只循环5次,即输出0 1 2 3 4;但是在second中的i是全局变量,即输入的数和20比大小,最后输出较大的那个数