JavaScript的介绍及简单使用
JavaScript的介绍及简单使用
- 一、什么是JavaScripts
- 二、网页使用js脚本的三种方式
- 1.直接添加脚本
- 2.使用script标记插入脚本
- 3.链接脚本文件（推荐）
- 三、js编程概述
- 1.js保留关键字
- 2.js变量
- 3.js数据类型
- 4.js运算符
- 5.js的控制语句(同C)
- 6.js的函数
- 四、js的对象
- 1、浏览器对象（window对象）
- 2.文本对象（Document对象）（重要）
- 3.内部对象：Date对象
- 5.内部对象：String对象
- 5.全局函数
一、什么是JavaScripts
- Javascript 是一种基于对象并具有安全性能的脚本语言， 是由浏览器内解释器翻译成可执行格式后执行， 在概念和设计方面， Java
和 Jvascript 是两种完全不同的语言。 - Javascript 的四个特点： 基于对象的语言、 简单性、 动态性、 跨平台性
二、网页使用js脚本的三种方式
1.直接添加脚本
<html>
<head>
<title>demo1</title>
<meta charset="utf-8">
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="戳我呀" onclick="alert('你刚刚戳了我一下')">
</body>
</html>
2.使用script标记插入脚本
<html>
<head>
<title>demo2</title>
<meta charset="utf-8">
<script type="text/javascript">
function my_button(){
alert("我被点击了");
}
function my_button2(){
alert("我真的被点击了");
}
</script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="戳我呀" onclick="my_button();my_button2()">
</body>
</html>
3.链接脚本文件（推荐）
<!--demo3.html-->
<html>
<head>
<title>demo2</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js1.js"></script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="戳我呀" onclick="my_button();my_button2()">
</body>
</html>
//js1.js
function my_button(){
alert("我被点击了");
}
function my_button2(){
alert("我真的被点击了");
}
三、js编程概述
1.js保留关键字
2.js变量
3.js数据类型
4.js运算符
5.js的控制语句(同C)
6.js的函数
函数的语法结构:
function 函数名(参数1,参数2,…){
函数体
}
<!--demo.html-->
<html>
<head>
<title>demo2</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js.js"></script>
</head>
<body>
<input type="button" value="戳我呀" onclick="my_button3(2020,5,27);">
</body>
</html>
//js1.js
function my_button3(arg1,arg2,arg3){
var arg = "";
arg +=arg1;
arg += ":"
arg += arg2;
arg += ":"
arg += arg3;
alert(arg);
}
四、js的对象
1、浏览器对象（window对象）
- Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象
- Window 对象是全局对象
- window.open()打开一个新的窗口
- window.close()关闭当前窗口
- window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页
<!--demo5.html-->
<html>
<head>
<title>demo5</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js2.js"></script>
</head>
<body>
<input type="button" value="打开百度(新窗口)" onclick="my_button1();">
<input type="button" value="打开百度(当前窗口)" onclick="my_button2();">
<input type="button" value="当前窗口的url" onclick="my_button3();">
<input type="button" value="关闭窗口" onclick="my_button4();">
</body>
</html>
// js2.js
function my_button1(){
//新窗口打开百度
window.open("http://www.baidu.com");
}
function my_button2(){
//当前窗口打开百度
window.location.href="http://www.baidu.com";
}
function my_button3()
{
//获取当前窗口的url
alert(window.location.href);
}
function my_button4()
{
//关闭当前窗口
window.close();
}
2.文本对象（Document对象）（重要）
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
- 提供了从JS脚本中对 HTML 页面中的所有元素进行访问
- 可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元素
- 可以通过title，URL属性获取当前文档的标题，URL信息等
- 可以通过write方法在HTML页面中写入HTML表达式
案例：登录界面 获取text内容(.value)
<!--demo6.html-->
<html>
<head>
<title>demo5</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js3.js"></script>
</head>
<body>
用户名: <input type="text" id="usr">
<br>
密码：<input type="password" id="pwd">
<br>
<input type="button" value="提交" onclick="my_button(1)">
<input type="button" value="取消" onclick="my_button(0)">
</body>
</html>
//js3.js
function my_button(arg)
{
if(arg == 1)
{
var usr = document.getElementById("usr").value;
var pwd = document.getElementById("pwd").value;
if(usr == "admin" && pwd == "123456"){
window.location.href = "http://www.baidu.com";
}
else{
alert("用户名或密码错误");
//清空用户名和密码输入框
document.getElementById("usr").value = "";
document.getElementById("pwd").value = "";
}
}
else{
//清空用户名和密码输入框
document.getElementById("usr").value = "";
document.getElementById("pwd").value = "";
}
}
案例 document获得label的内容 (.innerHTML)
<!--demo7.html-->
<html>
<head>
<title>demo5</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js3.js"></script>
</head>
<body>
地址: <label id="addr">BJ</label>
<br>
<input type="button" value="单击改变地址" onclick="change_fun()">
</body>
</html>
//js3.js
function change_fun()
{
var text = document.getElementById("addr").innerHTML;
alert("获取的内容为:"+text);
document.getElementById("addr").innerHTML = "SZ";
}
案例 document获得img的src (.src)
<!--demo8.html-->
<html>
<head>
<title>demo8</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js.js"></script>
</head>
<body>
此处有照片
<br>
<img src="./image/p01.jpg" id="img">
<br>
<input type="button" value="单击改变图片" onclick="change_img()">
</body>
</html>
// js.js
function change_img()
{
document.getElementById("img").src = "./image/p02.png"
}
案例:document获得单选框的内容(.checked)
<!--demo9.html-->
<html>
<head>
<title>demo9</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js.js"></script>
</head>
<body>
请选择你的性别:
男<input type="radio" name="sex" id="man">
女<input type="radio" name="sex" id="female">
<br>
<input type="button" value="单击获取性别" onclick="get_sex();">
</body>
</html>
//js.js
function get_sex()
{
if(document.getElementById("man").checked)
{
alert("男");
}
else if(document.getElementById("female").checked)
{
alert("女");
}
}
案例 document获得复选框的内容(.selectedIndex)
<!--demo9_2.html-->
<html>
<head>
<title>demo9_2</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js.js"></script>
</head>
<body>
<select onchange="addr_fun();" id="addr">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>杭州</option>
</select>
</body>
</html>
//js.js
function addr_fun()
{
//获取下拉列表框被选中的索引号
var index = document.getElementById("addr").selectedIndex;
//根据索引号 从选项数据中option[]中得到选中的内容
var addr = document.getElementById("addr").options[index].value;
alert("你选择的地点为：" + addr);
}
3.内部对象：Date对象
Date对象方法：
-
getFullYear()：返回当前年份 -
getMonth()：返回当前月份，0～11 -
getDay()：返回星期中的某一天，0~6,0表示周日 -
getDate()：返回一月中的某一天 -
getHours()：返回当前时间的小时，0～23 -
getMinutes()：返回当前时间的分钟，0～59 -
getSeconds()：返回当前时间的秒，0～59
案例：Date的使用(在js中写网页)<!--demo11.html--> <html> <head> <title>demo11</title> <meta charset="utf-8"> <script type="text/javascript" src="./js10.js"></script> </head> <body onload="get_time();"> 当前的时间为: <div id="div"></div> </body> </html>//js10.js function get_time() { setInterval("get_time_fun()", 1000); } function get_time_fun() { //在js中写网页 var d = new Date(); var text = ""; //首行 text += "
"; // document.write(text); document.getElementById("div").innerHTML = text; }时 分 秒 "; text += d.getHours(); text += " "; text += d.getMinutes(); text += " "; text += d.getSeconds(); text += "
4.内部对象：Math对象
5.内部对象：String对象
-
String对象用于处理文本（字符串，字符串是 JavaScript 的一种基本的数据类型。
-
String 对象定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符等
-
常用方法：
charAt()返回在指定位置的字符
indexOf()检索字符串
substr()从起始索引号提取字符串中指定数目的字符串
substring()提取字符串中两个指定的索引号之间的字符串indexof()函数
substring()函数
案例：“2020:05:28” 提取:号之间的字符串<!--demo12.html--> <html> <head> <title>demo12</title> <meta charset="utf-8"> <script type="text/javascript" src="./js10.js"></script> </head> <body onload="my_string()"> </body> </html>//js10.js function my_string() { alert("AMOS"); var text = "2020:05:28"; document.write("字符串的长度:" + text.length + "
"); document.write("第0个字符为:" + text.charAt(0) + "
"); var start = 0; var stop = 0; while(1) { stop = text.indexOf(":", start); if(stop == -1) { //提取最后一个字符串 var tmp = text.substring(start, text.length); document.write("提取的内容为:"+tmp+"
"); break; } var tmp = text.substring(start, stop); document.write("提取的内容为:"+tmp+"
"); start = stop+1; } }
5.全局函数
常用的函数：isNaN Number String
