1.什么是JavaScript
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释
JavaScript组成
ES 基础语法
DOM 操作HTML元素
BOM 操作浏览器 前进，后退，刷新
2.JavaScript的基本结构
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >3.JavaScript的应用
……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>
<script>…</script>
//可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可4.网页中引用JavaScript的方式
（1）内部js：使用<script>标签
<script>
document.write("初学JAVASCRIPT");
document.write("<h1>HELLO</h1>");
</script>（2）外部JS：创建js文件，使用<script src = "js路径">
<script src="export.js" type="text/javascript"></script>（3）行内js：使用触发属性（src 、事件、href）
<input name="btn" type="button" value="弹出消息框"
onclick="javascript:alert('欢迎你');"/>5.JavaScript核心语法
1.变量定义
var 变量名 = 值;
2.数据类型
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";
3.typeof运算符
typeof检测变量（检测数据类型）的返回值
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean： true或false
number：整数或浮点数
object： javascript中的对象、数组和null
4.String对象
属性
5.数组
创建数组
var 数组名称 = new Array(size); //Array表示数组的关键字
size表示数组中可存放的元素总数
为数据元素赋值
var fruit= new Array("apple", "orange", " peach","banana");访问数组
6.运算符号
| 类型 | 运算符 |
|---|---|
| 算术运算符 | + - * / % ++ — |
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != === !== |
| 逻辑运算符 | && || ! |
7.逻辑控制语句
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"];
//获得的i是下标
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}8.循环中断
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>9.注释
单行注释以 // 开始，以行末结束
alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释
/*
使用for循环运行“document.write("<h3>Hello World</h3>");
使用document.write在页面上输出“Hello World”
*/
10.常用的输入/输出
//alert() 警告框、提示框
alert("提示信息");
//prompt() 输入提示框
prompt("提示信息", "输入框的默认信息");
//confirm()询问框
confirm();
if(confirm("是否删除此数据?")){
alert("删除成功");
}else{
alert("取消删除");
}
var msg = prompt("输入提示","这是一个框子");
alert(msg);
var ages =["张三"","李四","王五"];
for(var i in ages){
alert(ages[i]);
}11.函数
系统函数
parseInt("字符串"); //将字符串转换为int类型，便于计算
parseFloat("字符串"); //将字符串转换为Float类型，便于计算
isNaN(变量) //检测是否非数字，如果不是数字返回true
自定义函数
function 函数名(参数列表){
[return 返回值]
}
function show(name,age){
}
//无返回值
使用函数名 show()
//有返回值
var a = show();
注意:形参与实参类型或个数可以不对应
//创建对象
function User(n,a){
this.name = n; //成员变量
this.age = a;//成员变量
this.show = function(a){//成员方法
document.write(a+"这是对象的show方法"+this.name)
}
}
var u1 = new user("李四",18);//创建对象
u1.show( "xxxx");12.事件
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
<!DOCTYPE html>
<html onkeydown="show(event)">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="login()"><h3>回车键</h3></button>
</body>
<script>
function show(e){
if(e.keyCode == 13){
login();
}
}
function login(){
alert("您按下了回车键");
}
</script>
</html>