JavaScript
JavaScript是运行在浏览器上的脚本语言，简称JS。
JavaScript是网景公司(NetScape)的，布兰德艾奇(JavaScript之父)开发的，最初叫LiveScript。
LiveScript的出现让浏览器更加生动了，不再是单纯的静态页面了。更加具有交互性。
在历史的某个阶段，sun公司和网景之间有合作关系，sun公司吧LiveScript的名字修改为JavaScript。
JavaScript这个名字虽然带有java，但是跟Java没有任何关系，只是语法上有点类似。但他们运行的位置不同，java运行在JVM当中，JavaScript运行在浏览器中。
JavaScript不需要我们程序员手动编译，编写源代码之后，浏览器直接执行。
JavaScript的目标程序一普通文本形式保存，这种语言叫做脚本语言
在HTML中怎么嵌入JavaScript代码？
1、要实现的功能:1、要实现的功能: 用户点击以下按钮,弹出消息框。
3`onclick=”js代码”,执行原理是什么?页面打开的时候，js代码并不会执行，只是把这段Js代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4.怎么使用Js代码弹出消息框?
在Js中有一个内置的对象叫做window，全部小写，可以直接拿来使 用，window代表的是浏览器对象。
window对象有一个函数叫做:alert，用法是: window.alert(“消息”);这样就可以弹窗了。
5.JavaScript的字符串可以是用双引号，也可以使用单引号。
6.JS中的一条语句结束后可以使用“ ; ”号结尾也可以不用
第一种方式：通过按钮执行JavaScript代码
第二种方式：通过JavaScript代码块
alert有阻挡页面加载的作用
第三种方式：引入js脚本文件
<!docctype html>
<html>
<head>
<title>THML中嵌入jS代码的第三种方式:引入外部独立的JS文件</title>
<body>
<!--
1.在需要的位置引入js文件
2.引入外部独立的JS文件的时候，js文件中的代码也会自上而下的顺序逐行执行
3.同一个js文件可以引用多次。
4.如果是脚本块已经引入了js文件，那脚本块的代码就不会执行了
-->
<script typr="text/script" src="js/1.js"></script>
</body>
</head>
</html>
JS的变量
JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值。赋什么类型的值都行 JavaScript是一种弱类型编程语言
<script type="text/javascript">
/*
一.回顾java中的变量
1.int i;
String s;
boolean flag;
在Java中赋值是使用 “=”（“=”运算符，右边先执行，在将右边的值赋给左边）
java语言是一种强类型语言
二.JavaScript中的变量
JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值。赋什么类型的值都行
JavaScript是一种弱类型编程语言
*/
var i; //undefined 在JS中是一个具体的值
alert("i="+i);
alert(age);//没有声明直接访问，会报语法错误
var a,b,c = 200;
alert("a"+a);
alert("b"+b);
alert("c"+c);
a = false;
a="abc";
a=1.2;
alert(a);
</script>
JS函数初步
<body> <script type=”text/javascript”> /* 1.JS中的函数等同于Java中的方法，函数也是一种可以被重复利用的代码片段。 2.JS中的变量是一种弱类型， 语法格式一： function 函数名(){ 函数体; }
第二种方式：
函数名 = function(形参列表){
}
JS中不需要返回类型，返回什么类型都行
*/
function sun(a,b){
alert(a+b);
}
//函数必须手动调用
sun(10,20);
sayHallo = function(username){
alert("Hallo"+username+sun(12,123));
}
sayHallo("李康健");
</script>
<input type="button" value="点击调用函数" onclick="sayHallo('我叫李康健');"/>
</body>
JS当中的函数不能同名，如果JS中函数同名，后声明的函数就会覆盖前面一个同名的函数
JS的局部变量和全局变量
全局变量： 在函数体之外声明的变量数据全局变量，全局变量的生命周期：浏览器打开时声明，浏览器关闭时销毁 局部变量： 在函数体中声明的变量，包括一个函数的形参都是属于局部变量 局部变量的生命周期是：函数开始执行时局部变量的内存控件开辟，函数执行结束之后，局部变量的内存空间释放 局部变量生命周期短
当声明一个没有使用var关键字的时候，那么这个变量声明不管在那都是全局变量
<script type="text/javascript">
/*
全局变量：
在函数体之外声明的变量数据全局变量，全局变量的生命周期：浏览器打开时声明，浏览器关闭时销毁
局部变量：
在函数体中声明的变量，包括一个函数的形参都是属于局部变量
局部变量的生命周期是：函数开始执行时局部变量的内存控件开辟，函数执行结束之后，局部变量的内存空间释放
局部变量生命周期短
*/
//全局变量
var i=100;
function accseeI(){
//访问全局变量
alert("i="+i);
}
accseeI();
var username = "jack";
function accessUsername(){
//局部变量
var username = "lisi";
alert("username="+username);
}
accessUsername();//访问局部变量
alert("username="+username);//访问全局变量
function accessAge(){
var age = 100;
alert("年龄="+age);
}
accessAge();
alert(age);//这里肯定出错，因为年龄是不局部变量
//很奇怪的语法
function myFun(){
//当声明一个没有使用var关键字的时候，那么这个变量声明不管在那都是全局变量
myname="Hallo";
}
//访问函数
myFun();
alert("myname="+myname);
</script>
JS数据类型
虽然JS中的变量声明不需要指定数据类型，到那时在赋值的时候每一个数据都还是有一个数据类型的
SE(ECMAScript规范)6版本之后包括的六大数据类型
JS中数据类型包括：原始类型和引用类型
原始类型：
-
Undefined
-
Number
-
String
-
Boolean
-
Null
引用类型：
-
Object以及Object的子类
typeof
这个运算符可以动态的获取变量的数据类型，
<body>
<script type="text/javascript">
/*
1.虽然JS中的变量声明不需要指定数据类型，到那时在赋值的时候每一个数据都还是有一个数据类型的
JS中数据类型包括：原始类型和引用类型
typeof这个运算符可以动态的获取变量的数据类型，
*/
function sum(a,b){
if(typeof a == "number" && typeof b == "number"){
return a+b;
}
alert(a+","+b+"必须都是数字");
}
sum(false,"acv");
var i;
alert(typeof i);
var k=10;
alert(typeof k);
var l="abc";
alert(typeof l);
var m = null;//"object" ..null属于Null类型，但是typeof运算符结果是”object“
alert(typeof m);
var f = false;
alert(typeof f);
function Hallo(){
}
alert(typeof Hallo());//function
</script>
Undefined
Undefined只有一个值，这个值就是Undefined。
当一个变量没有手动赋值的时候系统默认赋值 Undefined ，或者也可以手动赋值一个Undefined
<body>
<script type="text/javascript">
var i;
var k= undefined;
alert(i==k);
</script>
Number
1.Number类型包括那些值 1.自然数 2.NaN3.Infinity
var v1=1;
var v2=3.14;
var v3 = -100;
var v4=NaN;
var v5=Infinity;
alert(typeof v1);
alert(typeof v2);
alert(typeof v3);
alert(typeof v4);
alert(typeof v5);
NaN
关于NAN(表示 Not a Number ，不是一个数字，但是属于Number类型)运算结果本应该是一个数字，但最后结果却不是一个数字的时候，那么这个结果就是NaN类型。
var a = 100; var b = “李康健”; alert(a/b);//结果为NaN
var e="abc";
var f= 123;
alert(e+f)//结果为“abc123”
Infinity
表示无穷大，当除数为0的时候，结果为无穷大
alert(10/0);
方法
//关于isNaN
//用法：isNaN(数据)，结果是true表示不是一个数字，结果为false表示是一个数字
//isNaN:is Not a Number
function sum(a,b){
if(isNaN(a) || isNaN(b)){
alert("参与运算的必须是数字");
return a+b;
}
}
/*
方法：
1.isNaN
2.parseInt
3.parseFloat
4.Math.cceil
*/
alert(parseInt(3.465));//parseInt取整，并且话可以将字符串转换数字
alert(parseInt("1324153"));
alert(parseFloat("1345"));//可以将字符串自动转换成数字.
alert(Math.ceil(132.1));//向上取整
String类
1.在JS中字符串可以使用单引号，也可以使用双引号 2.在JS中创建String对象的方法有两种： 一：var s = “abc”; 二：使用JS内部的内置类：var s = new String(abc””); 注意：String是一个内置类，父类是Object
3.无论小string还是大String，他们的属性和函数都是通用的
<body>
<script type="text/javascript">
/*
String类型：
1.在JS中字符串可以使用单引号，也可以使用双引号
2.在JS中创建String对象的方法有两种：
一：var s = "abc";
二：使用JS内部的内置类：var s = new String(abc"");
注意：String是一个内置类，父类是Object
3.无论小string还是大String，他们的属性和函数都是通用的
4.关于String常用属性和函数
属性:
length
*/
//小string（属于原始类型String）
var s = "abc";
alert(typeof s);//string
//大String（属于Object类型）
var x = new String("sda");
alert(typeof x);//object
</script>
Object
Object: 1.Object类是所有类的超类，自定义任何类型默默人继承Object 2.Object的属性 prototype：作用是给类动态的扩展属性和函数。 constructor 3.Object的函数： toString() valueOf() toLocaleString() 4.在JS中定义的默认继承Object，会继承Object的所有属性和方法 5.JS中定义类： 一.function 类名(形参){
} 二.类名 = function(形参){
}
创建对象的语法：new 构造方法名(实参);
<body>
<script type="text/javascript">
/*
Object:
1.Object类是所有类的超类，自定义任何类型默默人继承Object
2.Object的属性
prototype：作用是给类动态的扩展属性和函数。
constructor
3.Object的函数：
toString()
valueOf()
toLocaleString()
4.在JS中定义的默认继承Object，会继承Object的所有属性和方法
5.JS中定义类：
一.function 类名(形参){
}
二.类名 = function(形参){
}
创建对象的语法：new 构造方法名(实参);
*/
function sayHallo(){
}
sayHallo();//这种方式就是把sayHallo当作一个函数调用
new sayHallo();//这种方式就是当作一个类来创建对象
Students = function(){
alert("123456");
}
var s = new Students();
alert(s);
//JS中类的定义，同时又是构造函数的定义
//在JS中构造函数顶一个和类放在一起
function User(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
var u1 = new User(111,"dsd",13);
alert(u1.a);
alert(u1.b);
alert(u1.c);
Product = function(pno,pname, price){
//属性
this.pno = pno;
this.pname = pname;
this.price = price;
//函数
this.getPricr = function(){
return this.price;
}
}
var pro = new Product(111,"西瓜",1);
var pri = pro.getPricr();
alert(pri);
//通过prototype 这个属性来给类动态扩展属性以及函数
Product.prototype.getPname = function(){
return this.pname;
}
var panem = pro.getPname();
alert(panem);
//给String扩展一个函数
String.prototype.suiyi = function(){
alert("这个方法叫做suiyi");
}
"das".suiyi();
</script>
</body>
JS常用事件
-
(1) blur失去焦点
-
(2) change下拉列表选中项改变，或文本框内容改变
-
(3) click鼠标单击(4) dblclick鼠标双击
-
(5) focus获得焦点
-
(6)keydown键盘按下
-
(7)keyup键盘弹起
-
(8) load页面加载完毕
-
(9)mousedown鼠标按下
-
(10） mouseover鼠标经过
-
(11)mousemove鼠标移动
-
(12)mouseout鼠标离开
-
(13) mouseup鼠标弹起
-
(14)reset表单重置
-
（15) select支本被选定
-
(16） submit表单提交
任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。onXXx这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在)
<body>
<script type="text/javascript">
/*
1. (1) blur失去焦点
2. (2) change下拉列表选中项改变，或文本框内容改变
3. (3) click鼠标单击(4) dblclick鼠标双击
4. (5) focus获得焦点
5. (6)keydown键盘按下
6. (7)keyup键盘弹起
7. (8) load页面加载完毕
8. (9)mousedown鼠标按下
9. (10） mouseover鼠标经过
10. (11)mousemove鼠标移动
11. (12)mouseout鼠标离开
12. (13) mouseup鼠标弹起
13. (14)reset表单重置
14. （15) select支本被选定
15. (16） submit表单提交
*/
//对于当前程序当中sayHallo函数被称为回调函数
//回调函数的特点：自己吧这个函数代码写出来，但是这个函数不是自己负责调用的
//有其他程序负责调用该函数
function sayHallo(){
alert("Hallo Js!");
}
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<input type="button" value="hallo" onclick="sayHallo()"/>
<input type="button" value="Hallo2" id="mytbtn" />
<script type="text/javascript">
function doSume(){
alert("do sume");
}
/*
第二种注册方式：使用JS代码完成事件
*/
//第一步获取这个按钮对象
var btnObj = document.getElementById("mytbtn");
btnObj.onclick = doSume();
</script>
</body>
JS代码捕捉回车键
<body>
<script type="text/javascript">
window.onload = function(){
var usernameElt = document.getElementById("username");
usernameElt.onkeydown = function(){
//获取键值
alert(13);
}
}
</script>
<input type="text" id="username"/>
</body>
对于键盘事件来说，都有一个keyCode来获取键值
JS运算符
void
执行表达式，但是不反悔任何结果
innerHTML 和 innerText
</head>
<style type="text/css">
#div1{
background-color: aliceblue;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<script type="text/javascript">
window.onload = function(){
var bnt = document.getElementById("btn");
bnt.onclick = function(){
/*
innerHTML:用来设置元素内部内容
innerText:innerHTML是可以执行HTML代码的，但是innerText只会执行文本
他们两个都是属性
*/
var i = document.getElementById("div1");
// i.innerHTML = "<font color='red'>用户名不能为空</font>";
i.innerText = "<font color='red'>用户名不能为空</font>";
}
}
</script>
</div>
<input type="button" value="设置div中的内容" id="btn"/>
<div id="div1"></div>
</body>
复选框的全选和取消全选
<body>
<script type="text/javascript">
// window.onload = function(){
// var firstChk = document.getElementById("firstChk");
// firstChk.onclick = function(){
// //先把所有的name全都取出来
// var i = document.getElementsByName("aihao");
// if(firstChk.checked){
// for(var m = 0; m<i.length;m++){
// i[m].checked = true;
// }
// }else {
// for(var m = 0; m<i.length;m++){
// i[m].checked = false;
// }
// }
// }
// }
window.onload = function(){
var firstChk = document.getElementById("firstChk");
var aihao = document.getElementsByName("aihao");
firstChk.onclick = function(){
//先把所有的name全都取出来
for(var i = 0;i<aihao.length;i++){
aihao[i].checked = firstChk.checked;
}
}
//对以上数组进行遍历
for(var i = 0;i<aihao.length;i++){
aihao[i].onclick = function(){
alert(123);
}
}
}
</script>
<input type="checkbox" id="firstChk"/><br>
<input type="checkbox" name="aihao" value="chouyan"/>抽烟<br>
<input type="checkbox" name="aihao" value="hejiu"/>喝酒<br>
<input type="checkbox" name="aihao" value="tangtou"/>烫头<br>
</body>
获取下拉列表选中下的value
<body>
<!-- <select onchange="alert(this.value)">
<option value="">请选择省份</option>
<option value="001">湖南</option>
<option value="002">广东</option>
<option value="003">北京</option>
<option value="004">上海</option>
<option value="005">深圳</option>
</select> -->
<script type="text/javascript">
window.onload = function(){
var private = document.getElementById("private");
private.onchange = function(){
alert(private.value);
}
}
</script>
<select id="private">
<option value="">请选择省份</option>
<option value="001">湖南</option>
<option value="002">广东</option>
<option value="003">北京</option>
<option value="004">上海</option>
<option value="005">深圳</option>
</select>
</body>
周期性函数
显示网页时钟
<title>显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
/*
关于JS内置的支持类：Date，可以用来显示时间
*/
var nowTime = new Date();
//输出
document.write(nowTime);
//转换具体本地的日期格式
nowTime = nowTime.toLocaleString();
document.write(nowTime);
//自定日期格式
document.write("<br>");
document.write("<br>");
var t = new Date();
var year = t.getFullYear();//返回年信息，以全格式返回
var month = t.getMonth()//月份是：0：11
var day = t.getDate();//获取的一周的第几天
document.write(year+"年"+(month+1)+"月"+day+"日");
//后去系统当前时间的毫秒数
document.write("<br>");
document.write("<br>");
var times = t.getTime();
document.write(times);
</script>
</body>
<body>
<script type="text/javascript">
/*
关于JS内置的支持类：Date，可以用来显示时间
*/
var nowTime = new Date();
//输出
document.write(nowTime);
//转换具体本地的日期格式
nowTime = nowTime.toLocaleString();
document.write(nowTime);
//自定日期格式
document.write("<br>");
document.write("<br>");
var t = new Date();
var year = t.getFullYear();//返回年信息，以全格式返回
var month = t.getMonth()//月份是：0：11
var day = t.getDate();//获取的一周的第几天
document.write(year+"年"+(month+1)+"月"+day+"日");
//后去系统当前时间的毫秒数
document.write("<br>");
document.write("<br>");
var times = t.getTime();
document.write(times);
</script>
<script type="text/javascript">
function displayTime(){
var time = new Date();
var nowTime = time.toLocaleString();
document.getElementById("timeDiv").innerHTML = nowTime;
}
//每隔一秒调用displayTime()函数
function start(){
//window.setInterval不间断的调用函数(周期性执行)
window.setInterval("displayTime()",1000);
}
function start(){
v = window.setInterval("displayTime()",1000);
}
function stop(){
window.clearInterval(v);
}
</script>
</body>
<br/>
<input type="button" value="显示系统当前时间" onclick="start()"/>
<input type="button" value="系统时间停止"onclick="stop()"/>
<div id="timeDiv"></div>
Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>009-内置支持类Array</title>
</head>
<body>
<script type="text/javascript">
//创建数组
var arr = [];
alert(arr.length);
//数据类型随意
var arr2 = [1321,123,"dasd",true]
alert(arr2.length);
arr2[7] = "test";
//遍历
for(var i = 0;i<arr2.length;i++){
document.write(arr2[i]+"<br/>");//不会数组角标越界因为，弱类型原因会自动扩容
}
//宁一种创建数组的方式
var arr3 = new Array(1);
alert(arr3);
</script>
</body>
</html>
BOM编程
open
<body>
<script type="text/javascript">
/*
1.BOM编程中window是顶级对象，白标浏览器窗口
2.window有open和close方法，可以开启窗口和关闭窗口
*/
</script>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com')"/>
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')"/>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com','_blank')"/>
<input type="button" value="开启百度（父窗口）" onclick="window.open('http://www.baidu.com','_parent')"/>
<input type="button" value="开启百度（顶级窗口）" onclick="window.open('http://www.baidu.com','_top')"/>
<input type="button" value="打开关闭窗口页面" onclick="window.open('002-open.html')"/>
</body>
close
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>close</title>
</head>
<body>
<input type="button" value="关闭窗口" onclick="window.close();"/>
</body>
</html>
消息框和确认框
<body>
<script type="text/javascript">
function del(){
var ok = window.confirm("确认删除吗？");
if(ok){
alert("delete data...");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框')"/>
<input type="button" value="弹出确认框(删除)" onclick="window.del()"/>
</body>
前进后退
<body>
007页面
<input type="button" value="后退" onclick="history.back()"/><!--后退-->
<input type="button" value="前进-1步" onclick="history.go(-1)"/><!--前进-1步-->
</body>
008-设置浏览器地址栏上的URL
<html>
<head>
<meta charset="utf-8">
<title>008-设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
// var locationObj = window.location;
// locationObj.href = "http://www.baidu.com";
window.location = "http://www.bilibili.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu"/>
<form ></form>
</body>
</html>
<!--总结有哪些方法可以浏览器向服务器发请求：
1，表单from的提交
2，超链接
3，document.location
4.window.location
window.open("URL")
以上方式都可以向服务器提交请求，但是只有表单提交请求是动态的
-->
JSON
JSON: JavaScript Object Notation,JavaScript对象标记简称JSON。(数据交换格式) JSON最主要的作用：进行数据交换，目前非常流行 1.JSON是一种标准的轻量级的数据交换格式 特点：体积小，易解析 2.在实际开发中有两种数据交换格式，使用最多的是JSON，另外一个是XML。 XML体积较大，解析麻烦。但是其优点是“语法严谨”（通常银行之间进行数据交换适合使用XML）
<body>
<script type="text/javascript">
/*
JSON:
JavaScript Object Notation,JavaScript对象标记简称JSON。(数据交换格式)
JSON最主要的作用：进行数据交换，目前非常流行
1.JSON是一种标准的轻量级的数据交换格式
特点：体积小，易解析
2.在实际开发中有两种数据交换格式，使用最多的是JSON，另外一个是XML。
XML体积较大，解析麻烦。但是其优点是“语法严谨”（通常银行之间进行数据交换适合使用XML）
*/
//创建一个JSON对象(JSON也可称为无类型对象)
var StudentObj = {
"sno" :"110","sname" : "张三","sex" : "男"
};
//放文JSON对象属性
alert(StudentObj.sno+","+StudentObj.sname+","+StudentObj.sex);
//JSON数组
var Students = [{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"},];
];
//遍历
for(var i = 0;i<Students.length;i++){
var stu = Students[i];
alert(stu.sno+","+stu.sname+","+stu.sex);
}
</script>
</body>
eval函数
<body>
<script type="text/javascript">
/*
eval函数：
作用可以将一段字符串当作一段JS代码执行
*/
window.eval("var i = 100");
alert("i="+i);
//java链接数据库之后，查询数据之后，将数据在java程序中拼接成JSON格式的字符串，将JSON格式的字符串相应到浏览器
//也就是说Java响应到浏览器上的仅仅是一个JSON格式的字符串，话不是一个JSON对象
//这个时候我们就可以使用eval函数，将JSON格式的字符串转换成JSON对象
</script>
</body>
版权声明：本文为lkjlwq原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。