一、JavaScript简介
1、JavaScript特点
- 脚本语言:是一种解释型的脚本语言,在程序运行过程中逐行进行解释;
- 基于对象:可以创建对象,也能使用现有的对象;
- 简单:采用的是弱类型的变量类型,对使用的数据类型未作出严格的要求;
- 动态性:采用事件驱动,不需要经过web服务器就可以对用户的输入作出响应;
- 跨平台性:不依赖于操作系统,仅需要浏览器的支持;
2、JavaScript的添加方法
JavaScript程序本身不能独立存在,依赖于某个HTML页面在浏览器端运行。
(1)内部引用
需要使用script标签,放在body标签里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部引用JS</title>
</head>
<body>
<script type="text/javascript" >
alert("hello world")
</script>
</body>
</html>
(2)外部调用JS文件
将JavaScript程序放到.js文件中,这种方式更安全、方便。 hello.js文件
alert('hello world')
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部引用JS</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>
(3)添加到事件中
放到事件处理部分的代码中 如加入到onclick事件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部引用JS</title>
</head>
<body>
<input type="button" name="FullScreen" value="全屏显示" onclick="window.open(document.location,'big','fullscreen=yes')">
</body>
</html>
3、JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台
4、操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,可以使用 document.getElementById(id) 方法。 使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作HTML</title>
</head>
<body>
<h1>javascript</h1>
<p id="demo">javascript yyds</p>
<script>
document.getElementById("demo").innerHTML="java yyds";
</script>
</body>
</html>
二、JavaScript基础语法
1、注释
//1、单行注释
/*
2、多行注释
*/
过多的注释会降低JavaScript的执行速度和加载速度,因此发布网站时尽量不要使用过多的注释。
2、数据类型
(1)使用字符串型数据
可以使用单引号或双引号
var str='字符串';
var str="字符串";
获取字符串的长度:length
var len=str.length;
使用document.write输出相应的字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
var str="hello world";
var len=str.length;
document.write(str+"<br>");//内嵌HTML标签,表示换行
document.write(len);
</script>
</body>
</html>
(2)使用数值型数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数值型</title>
</head>
<body>
<script>
var x1=10;
var x2=10.00;
var x3=10e5;
var x4=10e-5;
document.write(x1+"<br>");
document.write(x2+"<br>");
document.write(x3+"<br>");
document.write(x4);
</script>
</body>
</html>
10
10
1000000
0.0001
(3)使用布尔型数据
只有真(true)、假(false)两个值
(4)使用Undefined和Null类型
- Null:是一个类型为Null的对象,可以通过将变量的值设为Null来清空变量;
- Undefined:表示变量不含有值;
3、复合数据类型
(1)常用的内置对象
- Number对象:是一个数值包装器,可与new结合使用,并将其设置为一个稍后要在JavaScript代码中使用的变量。
- Boolean对象:是一个代表true或false值的对象。当值为:0,-0,null,一个空字符串,NaN,false时,相当于false值,否则为true。
- String对象:是文本值的包装器,不需要进行实例化就可以使用。
- Date对象:用来处理日期和时间。
- Array对象:是一个存储变量的变量。
- Math对象:不能实例化,只能从该对象调用属性和方法。
(2)日期对象
利用new来声明一个新的对象实体 Date对象会自动把当前日期和时间保存为其初始值
var curr=new Date();
参数的形式有:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date("yyyy,mth,dd,hh,mm,ss");
new Date("yyyy,mth,dd");
new Date(ms);//返回与1970-1-1之间相差的毫秒数
month:用英文表示的月份,January~December mth:用整数表示的月份,0(1月)~11(12月) dd:表示是一个月中的第几天 yyyy:四位数表示的年份 hh:小时数,0~23(晚11点) mm:分钟数 ss:秒数 ms:毫秒数
从计算机系统上获取当前时间:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期对象</title>
</head>
<body>
<script type="text/javascript">
function showTime(objD)
{
var str;
var yy=objD.getFullYear();
if(yy<1900)yy+=1900;
var MM=objD.getMonth()+1;
if(MM<10)MM='0'+MM;
var dd=objD.getDate();
if(dd<10)dd='0'+dd;
var hh=objD.getHours();
if(hh<10)hh='0'+hh;
var mm=objD.getMinutes();
if(mm<10)mm='0'+mm;
var ss=objD.getSeconds();
if(ss<10)ss='0'+ss;
var ww=objD.getDay();
switch(ww)
{
case 0:
ww="星期日"
break
case 1:
ww="星期一"
break
case 2:
ww="星期二"
break
case 3:
ww="星期三"
break
case 4:
ww="星期四"
break
case 5:
ww="星期五"
break
case 6:
ww="星期六"
break
}
str=yy+"-"+MM+"-"+dd+" "+hh+":"+mm+":"+ss+" "+ww;
//alert(str);
return(str);
}
function run()
{
var toDay;
toDay=new Date();
document.getElementById("localtime").innerHTML=showTime(toDay);
window.setTimeout("run()",1000);
}
run();
</script>
</body>
</html>
(3)Math对象
与Java类似
Math.属性
Math.方法
如:
Math.abs()返回绝对值
(4)字符串对象
String对象是动态对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String</title>
</head>
<body>
<script type="text/javascript">
var str="hello world";
document.write(str.toUpperCase()+"<br>");//转换成大写
document.write(str.charAt(3)+"<br>");//返回指定位置处的字符
var index=str.indexOf("llo");//返回指定字符串的位置,从左到右找
document.write(index+"<br>");
var index2=str.lastIndexOf("llo");//返回指定字符串的位置,从右到左找
document.write(index2+"<br>");
document.write(str.link("https://www.baidu.com"));//将字符串显示为链接
</script>
</body>
</html>
函数不止以上这些。
(5)数组对象Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
</head>
<body>
<script type="text/javascript">
//创建方式
var a=new Array();//空数组对象
var b=new Array(6);//包括6个元素的数组对象
var c=new Array("x","y","z");//以x,y,z为元素的数组对象
//还可以使用[]创建数组常量
var d=["x","y",'z'];
</script>
</body>
</html>
4、运算符
其他运算符与其他语言如Java类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script type="text/javascript">
var a=10;
var b="10";
if(a==b)// == 是相等运算符,左右两个操作符会先进行类型转换,在比较是否相等
{
document.write("yes");
}
if(a===b)// === 是等同运算符 不进行类型转换而直接比较
{
document.write("yes");
}else
{
document.write("no");
}
</script>
</body>
</html>
三、JavaScript进阶语法
1、函数
定义语法
function func1(---){---}
var func2=function(---){---};
var func3=function func4(---){---};
var func5=new function ();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function func(a,b)
{
return a*b;
}
document.write(func(2,3));
</script>
</body>
</html>
2、选择语句
if()
{
}else if(){
}else{
}
switch(n)
{
case 1:
break
case 2:
break
default:
}
3、循环语句
for,while,do while循环,与Java一样
四、JavaScript中的事件
1、事件驱动与事件处理
JavaScript中的事件驱动中的事件是通过鼠标或热键的动作引发的。
(1)单击事件onClick
当单击按钮时产生,onClick指定的事件处理程序或代码将被调用执行。 一般在下列对象中产生:
- Button(按钮对象)
- checkbox(复选框)或(检查列表框)
- radio(单选按钮)
- reset buttons(重要按钮)
- submit buttons(提交按钮)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<script type="text/javascript">
function func()
{
alert("hello world");
}
</script>
<form>
<input type="button" value=" " onclick="func()">//onclick可以使用自己编写的函数、JavaScript内置函数、直接的代码
</form>
</body>
</html>
(2)onChange()改变事件
当利用text或texturea元素输入字符值改变时发生该事件,同时在select表格项中的一个选项状态改变后也会引发该事件。
标签:对象,JavaScript,write,HTML,str,var,document,CSS From: https://blog.51cto.com/u_16200991/7178367