概念
js是一种基于对象和事件驱动的、并具有安全性能的脚本语言
特点
向HTML页面中添加交互行为
脚本语言,语法类似于java(脚本语言又被称为扩建的语言,或者动态语言,是一种编程语言,用来控制软件应用程序,脚本通常以文本(如ASCII)保存,只在被调用时进行解释或编译。)
解释性语言,边执行边解释
组成
1.ECMAScript
2.DOM (Document Object Model)
3.BOM(Browser Object Model)
基本结构
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >
使用位置
可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可(推荐放 到Body标签下面)
使用js方式
<script src="export.js" type="text/javascript"></script> //外部
<script type="text/javascript"></script> //内部
<input name="btn" type="button" value="弹出消息框 onclick="javascript:alert('欢迎你');"/> //事件
核心语法
变量
var width;
width = 5;
//以上是先声明在赋值
var catName= "皮皮";
var x, y, z = 10;
//以上是声明赋值同时进行
数据类型
1.undefined (声明变量但没赋值)
2.null (表示一个空值,与undefined值相等)
3.number
4.string
5.boolean (true或false)
typeof运算符
var i=1;
console.log(typeof(i));
//返回undefined:变量被声明后,但未被赋值
//返回string:用单引号或双引号来声明的字符串
//返回boolean:true或false
//返回number:整数或浮点数
//返回object:javascript中的对象、数组和null
String 对象
属性length
var str="this is JavaScript";
var strLength=str.length; //长度是18
方法
var str="this is JavaScript";
var strLength=str.length;
strLength.charAt(0);//调用方法
//charAt(index) 返回在指定位置的字符
//indexOf(str,index) 查找某个指定的字符串在字符串中首次出现的位置
//substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
//split(str) 将字符串分割为字符串数组
数组Array
创建
var fruit= new Array(4);
var fruit1= new Array("apple", "orange", " peach","banana");
赋值
var fruit = new Array(4);
fruit[0] = " apple ";
fruit[1] = " orange ";
fruit[2] = " peach ";
fruit[3] = " banana ";
访问
var a=fruit[0];
属性(length):元素个数
方法
var fruit1= new Array("apple", "orange", " peach","banana");
fruit.join("-");
//join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔
//sort() 对数组排序
//push() 向数组末尾添加一个或更多 元素,并返回新的长度
运算符
算术运算符 | + - * / % ++ — |
---|---|
赋值运算符 | = += -= |
比较运算符 | > < >= <= == != === !== |
逻辑运算符 | && || ! |
流程控制
分支控制 (if..else ; if..else if ..else ; swich)
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
switch (表达式){
case 常量1 :
JavaScript语句1;
break;
case 常量2 :
JavaScript语句2;
break;
...
default :
JavaScript语句3;
}
循环控制 (for ; while ; do...while ; for...in )
for(初始化; 条件; 增量)
{
JavaScript代码;
}
while(条件)
{
JavaScript代码;
}
var fruit=[ "apple", "orange", "peach","banana"];
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}
语法中断
1.continue 跳出本次循环,进行下次循环
2.break 跳出整个循环
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
if(i==3){
break;
}
document.write("这个数字是:"+i+"<br/>");
}
//跳出整个循环
</script>
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
if(i==3){
continue;
}
document.write("这个数字是:"+i+"<br/>");
//跳过当前循环,进行下次循环
}
</script>
注释
单行注释以 // 开始,以行末结束
多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
语法约定
代码区分大小写
变量、对象和函数的名称尽量不要重复
每段代码后要有分号
转换数字类型
var i = "86";
console.log(parseInt (i));//将字符串转换为整型数字
var i = "86.5";
console.log(parseFloat (i));//将字符串转换为浮点型数字
var i = "a";
console.log(isNaN(i));//用于检查其参数值是否是非数字
定义函数
function 函数名(参数.... ){
//JavaScript语句
[return 返回值]
}
调用函数
函数名(); (构造函数调用 new 函数名();)
作用域
全局变量 :全局作用域都能使用
局部变量 :只能在局部作用域(函数)内使用,外部使用不了
事件
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |
onkeydown 注意点:表明keyCode,(event)
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
</body>
<script type="text/javascript">
var ip = document.querySelector('input');
ip.onkeydown = function (event){
if(event.keyCode == 65){
alert('你好');
}
}
</script>
</html>