1. JS变量
注意：JS是弱编程语言，不论何种数据类型，赋值方式：
- 声明：var 变量名；
- 赋值：变量名=值；
- 变量声明后，没手动赋值时，系统默认赋值是undefined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于JS中的变量</title>
</head>
<body>
<!--定义JS代码格式:JS代码和CSS一样，都是基于HTML，脱离HTML则无意义-->
<script type="text/javascript">
/*
* 1.javaScript当中的变量，如何声明，怎么赋值？
* --声明：var 变量名；
* 赋值：变量名=值；
* var i=100;i=false;i="abc";
* i=new Object(); i=3.123;
* 2.重点：javaScript是一种弱类型编程语言。
* */
//在JS中，当一个变量没有手动赋值的时候，系统默认是undefined.
var i;//undefined在JS中是一个具体存在值。
alert("i="+i);//i=undefined
alert(undefined);
var k=undefined;
alert("k="+k);
//一个变量没有声明/定义，直接访问？
//alert(age);//语法错误：'age' is not defined，变量age不存在，没声明。
var a,b,c=400.5;
alert("a="+a);
alert("b="+b)
alert("c="+c);
a=false;
alert(a);
a="hsdj";
alert(a)
a=1.2;
alert(a)
</script>
</body>
</html>
1.1 局部变量和全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
/*
* 全局变量：
* 在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
* -浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
* -能使用局部变量尽量使用局部变量。
* 局部变量：
* 在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
* 局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
* 局部变量生命周期较短。
* */
//全局变量
var i=100;
function accessI() {
//访问的是全局变量
alert("i="+i);
}
accessI();
//全局变量
var username="jack";
function accessUsername() {
//局部变量
var username="李四";
//就近原则:访问局部变量
alert("username="+username)
}
//调用函数
accessUsername();
//访问全局变量，上面函数执行结束之后，局部变量的内存空间释放。
alert("username ="+username);
function accessAge() {
var age=60;
alert("年龄="+age);
}
accessAge();
//alert("age="+age);//报错(语法不对)，局部变量已经释放了
//以下语法很奇怪
function myfun() {
//当一个变量声明的时候没有使用var关键字，那么不管这个变量是在哪里声明的，都是全局变量。
myname="吴京";
alert("myfun是"+myname)//myfun是吴京
}
myfun();
alert("myfun="+myname)//myfun=吴京,还是会输出，myname未使用var,是全局变量
</script>
</body>
</html>
2. JS函数
函数表示的2种方式：
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名=function(形式参数列表){
函数体;
}
(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
* 1.JS中的函数：等同于JAVA语言中的方法，函数是一段可以被
* 重复利用的片段。
*
* 2.JS语法格式： JS的函数不需要指定返回值类型，返回什么类型都行。
* 第一种方式：
* function 函数名(形式参数列表){
* 函数体;
* }
* 第二种方式：
* 函数名=function(形式参数列表){
* 函数体;
* }
* */
function sum(a,b) {
//a和b都是局部变量，他们都是形参(a和b都是变量名，变量名随意)
alert(a+b)
}
//函数只有调用才能执行的
sum(12,34)
//定义函数sayHello
sayHello=function (username) {
alert("hello "+username)
}
//调用函数
sayHello("胡歌")
</script>
<input type="button" value="点击" onclick="sayHello('JACK')"/>
<input type="button" value="求和" onclick="sum(10,18)"/>
</body>
</html>
(2)JS语法随意，"+"也表示字符串拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
* java中的方法有重载机制，JS中的函数能重载吗？
* JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。(弱类型)
* */
function sum(a,b) {
return a+b;
}
//调用sum函数
var retValue=sum(2,4);
alert(retValue)//6
//字符串拼接 "+"是连接的作用
var retValue2=sum("JACK");//JACK赋值给a变量，b变量没有赋值，系统默认赋值undefined
alert(retValue2);//JACKundefined
var retValue21=sum(3,"号是科比");
alert(retValue21);//3号是科比
var retValue3=sum();
alert(retValue3);//NaN (NaN是一个具体存在的值，该值表示不是数字)
var retValue4=sum(1,2,3,4);
alert(retValue4)//3,1+2=3 后面数字作废
/*
* 在JS中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
* */
function test1(username) {
alert("test1");
}
function test1() {
alert("test1,test1,test1");
}
test1("陈浩民")//这个调用的是第二个test1()函数。test1,test1,test1
</script>
</body>
</html>
3. 数据类型
- 原始类型：Undefined、Number、String、Boolean、Null
- 引用类型：Object以及Object的子类
- typeof运算符的运算结果是以下6个字符串之一：注意字符串都是小写。
“undefined” “number” “string” “boolean” “object” “function”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
* 1.虽然JS的变量在声明的时候不需要指定数据类型，但是赋值，每一个数据还是有类型的。所以也需要学习
* JS包括哪些数据类型。
* 原始类型：Undefined、Number、String、Boolean、Null
* 引用类型：Object以及Object的子类
* 2.ES规范，在ES6之后，又基于以上的6种类型外添加一种新的类型：
* Symbol
* 3.JS中有一个运算符叫作typeof，这个运算符可以在程序的运行阶段动态获取变量的数据类型。
* --typeof运算符的语法格式：typeof 变量名
* --typeof运算符的运算结果是以下6个字符串之一：注意字符串都是小写。
* "undefined" "number" "string" "boolean" "object" "function"
*
* 4.在JS中比较字符串是否相等使用"=="完成。
* */
function sum(a,b) {
if (typeof a=="number" && typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须都是数字！");//false,abc必须都是数字！
}
var retValue=sum(false,"abc");
alert(retValue);//undefined,function函数没有返回值，则retValue就是默认值undefined
retValue1=sum(3,5);
alert(retValue1);//8,函数返回了值a+b=8
var i;
alert(typeof i);//undefined
var k=10;
alert(typeof k);//number
var o="虎哥";
alert(typeof o);//string
var p=false;
alert(typeof p);//boolean
var d=null;
alert(typeof d);//object
var obj=new Object();
alert(typeof obj);//object
function f() {
}
alert(typeof f);//function
</script>
</body>
</html>
数据类型
(1)undefined
<script type="text/javascript">
/*Undefined未赋值时自动默认赋值；手动赋值*/
var i;//默认undefined
var k=undefined;//赋值undefined
alert(i==k);//true
var y="undefined";//字符串undefined
alert(y==k);//false
</script>
(2)Number
<script type="text/javascript">
/*
* 1.Number类型包括哪些值？
* -1 0 1 2 2.3 3.14 100......NaN Infinity
* 整数、小数、正数、负数、不是数字、无穷大都属于Number类
*
* 2.关于NaN(表示Not a Number,不是一个数字，但属于Number类型)；
* 什么情况出现NaN？
* 运算结果本来应该是一个数字，最后算完不是一个数字的时候，结果是NaN.
* 3.isNaN函数:true表示不是一个数字，false表示是一个数字。
* 4.parseInt()函数
* 5.parseFloat()函数
* 6.Math.ceil()函数：向上取整
* */
var v1=1;
var v2=213.32;
var v3=-123;
var v4=NaN;
var v5=Infinity;
//Number
alert(typeof v1);
alert(typeof v2);alert(typeof v3);
alert(typeof v4);alert(typeof v5);
var a=100;
var b="中国";
alert(a/b);//除号显然最后结果应该是一个数字，但是运算的过程中导致最后不是一个数字，那么结果是NaN.
var e=1213;
var f="janjieshi";
alert(e+f);//1213janjieshi,先进行字符串拼接运算
//Infinity(当除数为0的时候，结果为无穷大)
alert(10/0);//Infinity
//isNaN函数：结果是true表示不是一个数字，反之，是数字
function sum(a,b) {
if (isNaN(a)||isNaN(b))
{
alert("参与运算的必须是数字");
return;
}
return a + b;
}
sum(100,"acv");
alert(sum(100,200));
//parseInt():可以将字符串自动转换成整型数字，并且取整数位。
alert(parseInt("3.9999"));//3
alert(parseInt(3.9999));//3
//parseFloat():可以将字符串自动转换成浮点型数字。
alert(parseFloat("3.434")+2);//5.434
//Math.ceil()
alert(Math.ceil(2.1));//3,向上取整。
alert(10/3);//3.3333333333333335
</script>
(3)Boolean
<script type="text/javascript">
/*
* 1.JS中Boolean类型有2个值：true和false;
* 2.在Boolean类型中有一个函数叫做：Boolean()
* 语法格式：Boolean(数据)
* Boolean()函数的作用是将非布尔类型转换成布尔类型。
* */
var username="Jack";
/*if(Boolean(username)){
alert("欢迎你"+username);
}else {
alert("用户名不能为空")
}*/
if(username){//可以省略，自动调Boolean函数转换成boolean类型
alert("欢迎你"+username);
}else {
alert("用户名不能为空")
}
//规律：“有”就转换成true,"没有"就转换成false
alert(Boolean(23));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("acdl"))//true
alert(Boolean("null"));//false
alert(Boolean(NaN));//false
alert(Boolean("undefined"));//false
alert(Boolean(Infinity));//true
//无限循环
while (10/3){
alert("啊哈哈");
}
</script>
(4)String(常用函数)
- 第一种：var s = “abc”;
- 第二种：(使用JS内置的支持类String)：var s2=new String(“abc”);
<script type="text/javascript">
/*
*1.String类型：可以使用双引号，也可以使用单引号；
* 2.JS当中，怎么创建字符串对象？
* 两种方式：
* 第一种：var s = "abc";
* 第二种：(使用JS内置的支持类String)：var s2=new String("abc");
* 需要注意：String是一个内置类，可以直接用，String的父类是Object。
* 3.无论小String还是大String(Object),他们的属性和函数都是通用的。
* 4.关于String类型的常用属性和函数？
* *常用属性：length获取字符串长度
* *常用函数：
* indexOf--获取指定字符串在当前字符串中第一次出现处的下标
* lastIndexOf--获取指定字符串在当前字符串中最后一次出现处的下标
* replace--替换
* substr--截取子字符串
* substring--截取子字符串
* toLowerCase--转换成小写
* toUpperCase--转换成大写
* split--拆分字符串
* */
//小String(属于原始类型String)
var x="avd";
alert(typeof x);//string
//大String（属于Object类型）
var u=new String("axc");
alert(typeof u);//object
//获取字符串的长度,length
alert(x.length);//3
alert(u.length)//3
//indexOf
alert("http://www.baidu.com".indexOf("http"));//0
alert("http://www.baidu.com".indexOf("https"));//-1,不包含
//判断一个字符串中是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https")>=0?"包含":"不包含");
//lastIndexOf
alert("我是一个中国人，你是谁".lastIndexOf("是"))//9,最后一个“是”下标是9
//replace(只替换第一个)
alert("name=value%name=value%name=value".replace("%","&"));//name=value&name=value%name=value
//继续调用replace方法，就会替换第“二”个；想全部替换需要使用正则表达式。
alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));//name=value&name=value&name=value
//考点:经常问substr和substring的区别：
//substr(startIndex,length)
alert("abcdefghijk".substr(2,4))//cdef,从2开始，取4个长度
//substring(starIndex,endIndex)
alert("abcdefghijk".substring(2,4))//cd,从2开始，不包括4下标。
//toLowerCase--转换成小写
alert("ABCDEF".toLowerCase());//abcdef
//toUpperCase--转换成大写
alert("ghtyr".toUpperCase());//GHTYR
//split--拆分字符串,split(string,limit),string以什么字符拆分；limit拆分成几组。
alert("我的老师的名字的结尾的是飞字！".split("的"))//我，老师，名字，结尾，是飞字!
alert("我的老师的名字的结尾的是飞字！".split("的",2))//我，老师
</script>
(5)Object类型
JS中的Object类型：
1.Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
2.Object类包括哪些属性？
* prototype属性(常用的，主要是这个)：作用是给类动态的扩展属性和函数。
* constructor属性
3.Object类包括哪些函数？
* toString()/valueOf()/toLocaleString()
4.在JS当中定义的类默认继承Object，会继承Object类中所有属性以及函数。自己定义的类也有prototype属性。
<script type="text/javascript">
/*
* 5.在JS当中怎么定义类？怎么new对象？
* *定义类的语法：
* 第一种方式:
* function 类名(形参){
*
* }
* 第二种方式：
* 类名=function(形参){
*
* }
* *创建对象的语法：
* new 构造方法名(实参)//构造方法名和类名一致
* */
function sayHello() {
alert("hello,teacher")
}
//这种方式调用就是把sayHello当做函数
sayHello();//hello,teacher
//这种方式就表示把sayHello当做一个类来创建对象
var obj=new sayHello();//hello,teacher; obj是一个引用，保存内存地址指向堆中的对象
alert(obj);//结果是[object Object]
//JS中的类的定义，同时又是一个构造函数的定义
//在JS中类的定义和构造函数的定义是放在一起完成的。
function User(a,b,c) {//a b c是形参，属于局部变量。
//声明属性(this表示当前对象)，User类中有三个属性:sno/sname/sage
this.sno=a;
this.sname=b;
this.sage=c;
}
//创建对象
var u1=new User(111,"吴京",45);
//访问对象属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
//访问一个对象的属性，还可以使用这种语法
var u2=new User(222,"沙溢",43);
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
Product=function (pno,pname,price) {
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice=function () {
return this.price;
}
}
var pro=new Product(123,"香蕉",2.4);
alert(pro.pno+","+pro.pname+","+pro.price);//123,香蕉，2.4
var pri=pro.getPrice();
alert(pri);//2.4
//Object的子类Product可以通过prototype这个属性来给类动态扩展属性以及函数。
Product.prototype.getName=function () {
return this.pname;
}
//调用后期扩展的getName()函数
var pname=pro.getName();
alert(pname);//香蕉
//给String类型扩展一个函数
String.prototype.suiyi=function () {
alert("这是给Object的子类String类型扩展的suiyi函数");
}
"字符串".suiyi();
//当JS构造函数的参数数量与属性不一致，也可以调，这是JS的弱类型。
alert(new Product(189).pno+","+new Product(189).pname+","+new Product(189).price)//189,undefined,undefined
</script>
(6)null
<script type="text/javascript">
//null NaN undefined 数据类型不一致
alert(typeof null);//Null类型 object
alert(typeof NaN);//Number类型 number
alert(typeof undefined);//Undefined类型 undefined
//null和undefinedkey可以等同
alert(null==NaN);//false
alert(null==undefined)//true
alert(undefined==NaN)//false
//JS当中有两个比较特殊的运算符
//==(等同运算符：只判断值是否相等)
//===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
alert(null===NaN);//false
alert(1==true)//true
alert(1===true)//false,1是Number类型，true是Boolean类型
</script>
4. 事件
JS的常用事件：
* （1）blur失去焦点，focus获得焦点；
* （2）change下拉列表选中项改变，或文本框内容改变；
* （3）select文本被选定
* （4）load页面加载完毕
* （5）click鼠标单击，dblclick鼠标双击
* （6）keydown键盘按下，keyup键盘弹起
* （7）mousedown鼠标按下，mouseover鼠标经过，mousemove鼠标移动，mouseout鼠标离开，mouseup鼠标弹起
* （8）reset表单重置，submit表单提交
*
* 任何事件都会对应一个事件句柄，事件句柄就是在事件前面加on,
* 事件句柄以属性的形式存在
(1)事件注册的2种方式：
<script type="text/javascript">
function sayHello() {
alert("hello,美好世界")
}
</script>
<!--注册事件的第一种方式:直接在标签中使用事件句柄-->
<input type="button" value="hello" ondblclick="sayHello()"/><!--鼠标双击出结果-->
<input type="button" value="hello2" id="mybtn">
<input type="button" value="hello3" id="mybtn1">
<input type="button" value="hello4" id="mybtn2">
<script type="text/javascript">
/*
* 第二种注册事件的方式：使用JS代码块完成事件的注册。
* 第一步：先获取这个按钮对象(document和window一样是全部小写，内置对象，可以直接用，document就代表整个HTML页面)。
* document代表浏览器窗口下的文本，window代表浏览器窗口。
* 第二步：给按钮对象的事件句柄属性赋值
* */
function doSome() {
alert("注册事件的第二种方式")
}
//第一步：getElementById通过id获取元素，document和window一样
//以后btnObj节点对象就代表<input type="button" value="hello2" id="mybtn">，可以调用其下属性。
var btnObj=document.getElementById("mybtn");
//给按钮onclick属性赋值
btnObj.onclick=doSome;//注意：别加小括号.doSome()错误写法
//这行代码的含义是，将回调函数doSome注册到click事件上
var btnObj1=document.getElementById("mybtn1");
btnObj1.onclick=function () {//这个函数没有名字，叫做匿名函数，这也是回调函数。
alert("test..........")
}
document.getElementById("mybtn2").onclick=function () {
alert("test22222...")
}
</script>
(2)代码执行顺序
<body onload="ready()"><!--load事件是在页面全部元素加载完毕之后才会发生-->
<script type="text/javascript">
function ready() {//这个ready代表body οnlοad="ready()"
document.getElementById("btn").onclick=function () {
alert("hello JS!");
}
}
</script>
<input type="button" value="hello" id="btn"/>
以后以下面代码执行
<body>
<script type="text/javascript">
/*把body里的onload直接放到JS代码块中
*1.页面打开时，将a函数注册给了load事件，
* 2.页面加载完毕之后，load事件发生了，此时执行回调函数a
* 3.回调函数a执行的过程中，把b函数注册给了id="btn1"的click事件
* 4.当id="btn1"的节点发生click事件之后，b函数被调用并执行。
*/
window.onload=function () {//这个回调函数加做a
document.getElementById("btn1").onclick=function () {//这个回调函数叫做b
alert("hello 你好");
}
}
//下面的window需要重新建一个，懒得建了，不允许2个重复的，否则后面覆盖前面
window.onload=function () {
document.getElementById("btn3").onclick=function () {
var mytext=document.getElementById("btn2");
//一个节点对象中只要有的属性都可以"."
mytext.type="checkbox";
}
}
</script>
<input type="button" value="hello2" id="btn1"/>
<input type="text" id="btn2"/>
<input type="button" value="将文本框修改为复选框" id="btn3"/>
</body>
(3)捕捉键盘keydown事件
<script type="text/javascript">
window.onload=function () {
var usernameElt=document.getElementById("username")
//回车键的值是13，ESC键的键值是27
usernameElt.onkeydown=function (event) {
//获取键值
//对于“键盘事件对象”来说，都有keyCode属性用来获取键值
alert(event);//object KeyboardEvent
alert(event.keyCode);//13. 回车键的值是13
if(event.keyCode==13){
alert("正在进行验证.....")
}
}
}
</script>
(4) void运算符
<head>
<meta charset="UTF-8">
<title>JS的void运算符</title>
</head>
<body>
<!---
void运算符的语法:void（表达式）
运算原理：执行表达式，但不返回任何结果。
javascript:void(0)
其中javascript：作用是告诉浏览器后面是一段JS代码，
以下程序的javascript:是不能省略的，否则href会把双引号里当做路径处理。
--->
<a href="javascript:void(100)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>
</body>
(5) 控制语句
<head>
<meta charset="UTF-8">
<title>JS的控制语句</title>
</head>
<body>
<script type="text/javascript">
/*1.if语句 2.switch 3.while 4.do...while..
* 5.for循环 6.break语句 7.continue语句
* 8.for...in语句 9.with语句
* */
//创建JS数组,数据类型不统一,元素的个数随意
var arr=[false,true,1,2,"abc",3.12];
//遍历数组
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
//for..in,数组下标
for(var i in arr){
alert(i);
alert(arr[i]);
}
//for..in语句可以遍历对象的属性
User=function (username,password) {
this.username=username;
this.password=password;
}
var u=new User("张三","123");
alert(u.username+","+u.password);//张三,123
alert(u["username"]+","+u["password"]);//张三,123
for(var shuXinMing in u){
alert(shuXinMing)//username password 属性名
alert(typeof shuXinMing)//string string shuXinMing是一个字符串
alert(u[shuXinMing])//张三 123 本身就是string类型，不需要加“”
}
with(u){//u代替了u.username中的u
alert(username+","+password)
}
</script>
</body>
</html>
