JavaScript入门
目录
1.什么是JavaScript?
1、是一种可以在浏览器中运行的脚本语言
2、主要用来实现在浏览器端的动作
在浏览器端的动作:
- 用户交互
- 数据处理
2.Java与javaScript
- Java需要编译
- javaScript是解释性语言
- JavaScript源代码放在Html里头
3.HTML中的js
1、在head中定义函数
<script language="JavaScript">
2、在相应标记中定义动作
<onXXX=" ">
3、应用:如何在HTML中加入javaScript,head中的Script和body中的OnLoad的使用
注意:每一条js语句必须以分号结束,即使分号前有空格,换行写分号都行,必须要有分号。
<html>
<body onLoad="alert('hi')">
<script>
document.write("Hello world!");
document.write("<h1>Hello wrold!</h1>");
</script>
</body>
</html>
//解释:
//doucument是一个对象(文本)
// 点.是运算符
// write是一个动作(写)
// 一整句的意思是:doucment这个对象做write动作
// html的元素可以写到js里<h1>是html的一级标题
//当做write这个动作的时候,也可以让html的标记感受一个动作,在body标签
//里onLoad的时候做一个动作alert,
//外层已经加了双引号,为了区分 里层用单引号
4.js变量和计算
变量是存放数据的地方,JavaScript的变量没有类型,但是数据是有不同的类型的:数值、字符串或逻辑量。针对不同的类型可以做不同的运算,而不同的运算之间又有不同的优先级
1.变量
1、需要定义一个变量的时候用var(var即varible),var后面跟着变量名
var button;
2、定义变量时可以直接赋初值,也可以不给初值,但是在第一次使用之前要赋初值
var button="red"
3、命名规则
(1)变量只能是字母、数字、下划线组成,但是第一个字符不可以是数字
(2)变量名不可以是JavaScript的关键字/保留字
4、代码演示
<html>
<body onLoad="alert('hi')">
<script>
var hello;
hello="hello";
//字符串类型
document.write(hello);
var number=18;
//数字类型
document.write(number);
</script>
</body>
</html>
2.计算
1、+号运算
(1)数字相加,可以直接想加,也可以不同的数据类型的两个数字相加,两个变量之间的相加,方便数据修改;
var number = 16+2;
var age=9.0;
var result=number+age;
(2)如果+的不是两个数字,那么+号表示连接,不是数学的角度上的相加,只有一个数字会把数字当成字符串连接起来。
var hello = hello;
hello = hello + "world";
number = 10;
document.write(hello + number);
//字符串类型,字符串连接
2、乘法、除法运算,运算顺序与数学一样,他们的优先级一样。
乘法运算符:*
除法运算符:/
var number = 16 * 1 / 2;
3、括号运算
括号的优先级最高,先算括号里面,在按优先级算外面.
var number = ((16+2) * 1 )/ 1;
4、取模运算(%),也就是取余
var result = 10 % 3;
var num = 10 % 2;
5、比较运算,比较运算返回的结果是布尔类型true或false
(1)数值比较
var tiger = 10;
var cat =10;
document.write(tiger==cat);
//10==10,为真,返回结果为true,==是等于
(2)字符串比较
按照ASCALL码表
var str = "Gello";
var str1 = "Hello"
document.write(str>str1);//false
6、代码演示
<html>
<body onLoad = "alert('hi')">
<script>
var hello = hello;
hello = hello + "world";
//字符串类型,字符串连接
document.write(hello);
var number = ((16+2) * 1 )/ 1;
//*是乘法运算,/是除法运算,先算括号
number = -number;
//数字类型
var bo = true;
//逻辑的布尔类型
var result = 10 % 3;
//取模运算,结果是1
result++;//先取结果后运算+1
++result;//先加1,后取结果
result--;
--result;
//单独运算,最好不要把它放在别的运算式子里,以方便阅读和防止运算错误
document.write(hello + number);
//从数学的角度看加号(+)在这里是不合理的,实际上这里做的是字符串的连接,把数字当成字符串
document.write(result);
var age1=18;
var age2=20;
document.write(age1==age2);
//比较运算,输出结果为false
document.write(age1 != age2);
//age1是否等于age2?不等于,结果返回true
document.write(age1 > age2);
//false
document.write(age1 < age2);
//true
document.write(age1 >= age2);
//false
document.write(age1 =< age2);
//true
</script>
</body>
</html>
1. 运算符优先级
JavaScript在计算表达式时具有一套运算规则控制运算符执行的顺序,高优先级的运算符先于底优先级的运算符执行。
下表从上到下优先级降低,相同优先级的运算符从左到右顺序执行。
运算符 | 描述 |
---|---|
. [] () | 字段访问、数组下标、函数调用以及表达式分组 |
++ – ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<< >> >>> | 移位 |
< <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
I | 按位或 |
&& | 逻辑与 |
II | 逻辑或 |
?: | 条件运算 |
= oP= | 赋值、运算赋值 |
, | 多重求值 |
所有的逻辑运算符的优先级都低于关系运算符(!> && > II)
5.控制
1.判断
(1)判断是计算机最基本的逻辑操作,通过对变量和常数的比较,决定程序的不同走向。
(2)if-else根据条件的正确与否决定执行不同的语句,而switch-case则能根据不同的数值决定执行不同的语句
if-else代码演示:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var age = 20;
document.write("你的年龄是"+age);
//这一句最后显示,为什么呢?
//这是写到document里的,得先形成HTML文档,然后再被浏览器警示执行。
//浏览器执行之前,JavaScript的所有语句要先被执行完
if(age >= 18)
{
alert("哟呵,成年啦");
}
else{
alert("还小呢,未成年,好好学习");
}
alert("你"+age+"岁啦");
</script>
</body>
</html>
(3)嵌套的if语句
比较大小:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var num1 = 23;
var num2 = 10;
var num3 = 90;
var min;
if(num1 < num2)
{
if(num1 < num3)
{
min = num1;
}
else
{
min = num3;
}
}
else
{
if(num2 < num3)
{
min = num2;
}
else
{
min = num3;
}
}
alert("Minnum value: " +min);
</script>
</body>
</html>
建议:在if和else后面永远放一对{},哪怕后面只有一句语句,利于将来的维护。
(4)switch-else:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var grade = 78;
grade = grade / 10;
switch(grade){
case 10:
case 9:
alert("成绩等级为:A");
break;
case 8:
alert("成绩等级为:B");
break;
case 7;
alert("成绩等级为:C");
break;
case 6:
alert("成绩等级为:D");
break;
default:
alert("不及格,等级为:F");
break;
}
</script>
</body>
</html>
2.循环
反复做相同的动作是计算机最擅长的事情,其实计算机的运作就是在不断的等待人的动作,然后根据当时的情况作出各种动作。javaScript和其他主流语言一样,提供了while、do-while和for三种循环。三种循环在功能上是等价的,每种循环有自己的特点和适用的场合。
(1)while循环(先判断再执行)
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var cont = 1;
var limit =5;
while(count<=limit)
{
alert(count);
count = count + 1;
}
var total = 10;
var max = 1;
while(total > max)
{
total = total /2;
alert("Current total: "+total);
}
</script>
</body>
</html>
(2)求最大公约数(辗转相除法)
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var u = 42;
var v = 21;
var temp = v;
while( v != 0)
{
temp = u % v;
u = v;
v = temp;
}
alert("最大公约数是:"+u);
</script>
</body>
</html>
(3)do-while循环(先执行再判断)
把一个数反过来:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var number = 23871;
var reverse = 0;
do
{
var lastDigit = number % 10;
reverse = (reverse * 10)+lastDigit;
number = number / 10;
}while(number > 0);
alert("The number reversed is:"+reverse);
</script>
</body>
</html>
(4)for 循环(for(init; condition; step))
有初始值,循环条件,改变动作
1到100的数字之和:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var result = 0;
for(var i = 0; i <= 100; i++)
{
result += i;
}
alert("1到100的数字之和:"+result);
</script>
</body>
</html>
(5)如何选择循环
- 当循环的次数预先知道,或者需要有递进 的动作时,往往选择for循环。
- 如果必须执行一次,用do-while;
- 其他情况用while.
(6)break 与continue
- break:跳出循环
- continue:跳过当前循环步,进入循环的下一轮
6.函数
- 函数就是一段代码,我们给它起个名字,放起来,以后可以用
- JavaScript有很多内置函数,能帮助我们实现很多有用的功能
1.如何定义函数
- function fun_name(){} 无参函数
- function fun_name(a,b){} 有参函数
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var u = 42;
var v = 21;
//求最大值
function max(a,b)
{
return a>b?a:b;
}
//输出值
function prints(s){
document.write(s);
}
//求最大公约数
function gcd(u,v){
var a=u;
var b=v;
var temp = v;
while( v != 0)
{
temp = u % v;
u = v;
v = temp;
}
print(a+"和"+b+"最大公约数是:"+u+"<br/>");
}
print(max(42,21)+"<b/r>");
print(u+"和"+v+"的最大公约数是:"+gcd(u,v)+"<br/>");wz
</script>
</body>
</html>
2.函数变量
- var f=new function(“x”,“y”,“return x*y”){};
- 等价于
- function f(x,y){return x*y;}
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
function add(a,b)
{
return a+b;
}
function cal(f,a,b)
{
return f(a,b);
}
//输出值
function prints(s){
document.write(s);
}
//换行函数
function println(s)
{
print(s+"<br/>");
}
println(cal(add,5,6)+"<br/>");
</script>
</body>
</html>
3.变量空间
- 定义在任何函数之外的变量属于全局(整个网页)空间,在网页的任何地方都可以使用
- 定义在某个函数内部的变量属于局部(函数内部)空间,只在函数内部有效
- 局部有和全局重名的变量时,采用局部的
7.数组
当你需要放一些数据时,特别是每个数据将通过一个对应的索引数字来访问,需要数组。比如记录一个班级的所有学生的成绩。
1.创建数组的方式
- var a = new Array();
- var b = new Array(size);size表示数组的初始大小,大小不是固定的,不是它的最终大小
- var c = new Array(d1,d2,…,dn);
- var d = [d1,d2,…,dn];
var marks = new Arry();
marks[0] = 89;
marks[1] = 100;
var c = new Array(89,100,...);
var d = [89,100,...];
2.访问数组
- [ ]运算符访问数组中的一个单元
- a[0],可以读也可以写
- 索引从0开始,即数组下标从零开始
- a[x] = n直接创建了数组中的一个单元x,并且赋了值n
var colors = ["red", "blue", "green"];
alert(colors[0]);
colors[2] = "black";
colors[3] = "brown";
colors[100] = "yellow";
3.数组长度
1、a.length给出数组a的长度,是其中最大下标+1
var colors = ["red","blue","green"];
var names = [];
alert(colors.length);//结果为3
alert(names.length);//结果为0
colors[4] = "brown";
alert(colord.length);//结果为4
2、.length可写
(1)长度设小
var colors = ["red","blue","green"];
colors.length = 2;//长度设小了
alert(colors[2]);//结果:undefind,把后面的东西拿掉了
(2)长度减小再增大
var colors = ["red","blue","green"];
colors.length = 2;//长度设小了
color.length = 3;//设大
alert(colors[2]);//结果:undefind,已经拿掉再设大,原来的东西已经不存在了
(3)长度增大
长度永远比下标最大值大1
var colors = ["red","blue","green"];
color.length = 4;
alert(colors[3]);
colors[colors.length]= "black";//这样写可扩展性强
colors[colors.length] = "brown";
4.转换数组为字符串
- .toString()
- .valueOf();
var colors = ["red","blue","green"];
alert(colors.toString());
alert(colors.valuesOf());
alert(colors);
alert(colors.join("*");//输出结果为red*blue*green
5.堆栈操作
堆栈先进后出原则
var colors = new Array();
var count = colors.push("red","green");//放了两个字符串进去
alert(count);//count为2
count = colors.push("black");//3
alert(count);
var item = colors.pop();//出栈black
alert(item);//black
alert(colors.length);
6.队列操作
队列先进先出原则
var colors = new Array();
var count = colors.push("red","green");//进队列
alert(count);//2
count = colors.push("black");//进队列
alert(count);
var item = colors.shift();//出队列“red"
alert(item);
alert(colors.length);
7.排序操作
(1)方法
排序方法sort(),默认从小到大
把原来的顺序颠倒过来:reverse()
var values = [1,3,2,8,5,10];
values.sort();
alert(values);//1,2,3,5,8,10
var values = [3,1,9,10,6,0];
values.reverse();
alert(values);//0,6,10,9,1,3
(2)自己写比较方法,按逆序输出(从大到小)
function compare(value1,value2){
if(value1 < value2){
return 1;
}else if(value1 > value2)
return -1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);//15,10,5,1,0
8.数组操作
- 连接
colors2 = colors.concat(“yellow”,[“black”,“brown”]); - 截取
colors3 = colors.slice(1,4);用slice取1-3,1是开始位置,4是结束位置,取1,2,3,4不取 - splice(开始位置,删除个数,插入元素…)
- 删除:splice(0,2);
- 插入:splice(2,0,“red”,“green”);//从2的位置开始,删除0个,插入red、green
- 替换:splice(2,1,“red”,“green”);//从2的位置开始,删除一个,red替换删除的那个
8.对象
当需要放一些数据时,特别是每个数据讲通过一个对应的名字来访问时,需要对象。JavaScript可以先创建对象,然后再设定对象的属性和动作。浏览器和浏览器中的文档都是以对象的形式提供编程接口的
1.理解JavaScript中的对象
- 对象是JavaScript的一种复合数据类型,它可以把多个数据集中在一个变量中,并且给其中的每个数据起名字
- 或者说,对象是一个属性集合,每个属性都有自己的名字和值
- JavaScript并不像其他OOP语言那样有类的概念,不是先设计类再制造对象
2.创建对象的方式
一种是直接new一个Object,另外一种是用大括号,如方式二x、y、radius是三个属性,用逗号分隔,0、0、2是赋予的值:
- 方式一:var a=new Object();
- 方式二:var ciclr={x:0,y:0,radius:2};
3.如何访问对象属性
1.运用对象
- 运算符
new一个book对象,在这之前,没有任何地方说book有title,我们给book的title赋值了,book就有title
var book = new Object();
book.title = "JavaScript";
book.translator = "李白";
book.chapter1 = new Object();
book.chapter1.title = "JavaScript简介";
- 即使构造的时候不存在的属性也可以在今后随时增加
2.删除对象属性
- delete book.chapter1;
- book.chapter1=null;
3.遍历所有属性
遍历方法:for(var x in a)
意思是对于a这个对象里的每一个属性取出来,循环的每一遍,把它作为x拿来用,然后对x进行操作干活
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
var a = new Object();
a.name = "Mike";
a.age = 18;
a.salary = 10000;
for( var x in a){
//alert(x);输出a的属性
alert(x+"="+a[x]);//通过数组的方式访问它的值
}
</script>
</body>
</html>
当对象有很多属性的时候,上百上千的,哇!一个个加也太麻烦了,代码量还繁重,那怎么办呢?
答案是用构造方法。
4.构造方法
- 构造函数
1.不直接制造对象
2.通过this来定义成员
3.没有return
function CaclArea(w,h){
this.with = w;
this.height = h;
this.area = function(){
return this.with * this.height;
};
}
//this就是new CaclArea();
var r = new CaclArea(3,4);
alert(r.area());
r.with=10;//可以修改它的值
alert(r.area());
- 自定义构造函数就可以构造任意数量的对象
4.原型对象
1.原型对象的理解与应用
- 对象的prototype属性指定了它的原型对象,可以用点(.)运算符直接读它的原型对象的属性
- 当写这个属性时才在它自己内部产生实际的属性
- 只要不去改写,prototype的同一个对象里的属性都是共享的,改写之后就是自己的,但是没改的的属性仍然是prototype的
function Person(){}
Person.prototypr.name = "Mike";
Person.prototype.age = 18;
Person.prototypr.job = "Software Engineer";
Person.prototypr.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();//Mike
var person2 = new Person();
person2.sayName();//Mike
alert(person1.sayName() == person2.sayName());//true
//改写
person1.name = "Jone";
alert(person.name);//Jone -from instance
alert(person2.name);//Mike -from prototypr
2.原型对象的问题
对某个对象的属性进行改变的时候,但不是赋值的形式,改变后的属性仍然是共享的。
function Person(){}
Person.prototype = {
constructor: Person,
name : "Mike",
age : 18,
job : "Software Engineer",
friends : ["aaa","apple"],//数组
sayName : function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Pero");//person1添加朋友
alert(person1.friends);//aaa,apple,Pero
alert(person2.friends);//aaa,apple,Pero
上面代码可以可以看出friends数组,只对person1的friends操作,朋友加多了一个,但是person2的friends却也有了相同的朋友。怎么解决呢?组合原型和构造方法!
3.组合原型和构造方法
构造方法属于自己的属性,原型共享共同使用的属性与方法
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["aaa","apple"];
}//this的是属于自己的
Person.prototype = {//prototype的是共享的
constructor: Person,
sayName: function(){
alert(this.name);
}
};
var person1 = new Person("Mike",19,"Software Engineer");
var person2 = new Person("kk",20,"Doctor");
person1.friends.push("vann");
alert(person1.friends);//aaa,apple,vann
alert(person2.friends);//aaa,apple
alert(person1.friends == person2.friends);//false
alert(person1.sayName == person2.sayName);
9.在浏览器里的JavaScript
JavaScript通常是在浏览器里运行的,程序如何能与浏览器互动呢?怎样能得到浏览器的各种信息,怎样能控制浏览器的动作呢?
1.window
1.window理解
1.全局对象
- 浏览器的全局对象是window
- 所有全局的变量实际上是window的成员
- var answer =12;
- alert(window.answer);
2.document
- window.document表示浏览器窗口中的HTML页面
- document.write()将内容写入页面
- 页面中的元素就是document里的成员
for(x in document)
document.write(x+"<br/>");//列出document里的所有成员
2.HTML中的JavaScript
3中方式:
- 在<script>/script>中标记
- 在<script>的src属性或archive指定的外部文件中
- 在某个HTML标记的事件处理器中
1.外部的JavaScript文件
(1)方式一
<script src = "util.js"></script>
(2)方式二
一个纯粹的代码文件,没有HTML标记
2.事件处理器
1)鼠标事件
(1)鼠标经过做动作(onMouseOver):
<p onMouseOver="alert('hi');">
(2)鼠标出去做动作(onMouseOut):
<p onMouseOut="alert('bye');">
2)body事件
(1)onLoad事件,页面加载后立即执行
定义和用法:
- onload 事件在对象被加载后发生。
- onload 最常用于 元素中,用于在网页完全加载所有内容(包括图像、脚本文件、CSS 文件等)后执行脚本
- onload 事件可用于检查访问者的浏览器类型和浏览器版本,并根据这些信息加载网页的正确版本
- onload 事件也可用于处理 cookie
<body onLoad="myFunction()">
(2)onUnload事件在用户退出页面时发生(通过点击一个连接,提交表单,关闭浏览器窗口等等)
<body onunload="alert('bye');">
window.onunload = function(){
alert("unload is work");
}
3)简单对话框
(1)alert();直接弹出对话框,无取消按钮
(2)confirm();弹出对话框,有取消按钮
(3)prompt();弹出输入框
(4)console;写入控制台
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script>
if(confirm("还要继续吗?")){
alert("yes");
}else{
alert("bye");
}
var name = prompt("what's your name?");
alert(name);
</script>
</body>
</html>
4)状态栏
(1)status=
(2)defaultStatus=
<p onMouseOver="status='大学慕课网';"
onMouseOut = "status=' ';">
</p>
5)定时器
setInterval(),两个参数,第一个是做什么动作,第二个是时间间隔
<html>
<head>
<meta charset=utf-8>
<script>
var count = 10;
function update(){
if(count>=0)
status = count--;
}
</script>
</head>
<body onLoad="setInterval('update()',1000);">
</body>
</html>
3.window的控制方法
1.open和close
- window.open(),打开一个新的窗口
- w=window.open(“amallwin.html”,“smallwin”,“width=400,height=350,status=yes,resizable=yes”);参数
- w.close();
- window.close();
<html>
<head>
<meta charset=utf-8>
<script>
var count = 10;
function update(){
if(count>=0)
status = count--;
}
function closeWindow(){
w.close();
}
</script>
</head>
<body onLoad="setInterval('closeWindow()',3000);">
<script>
var w = open("black.html","hello","width = 300,height=300");
w.moveTo(30,30);
</script>
<p onMouseOver="status='慕课';">
</body>
</html>
2.location对象
- window.location代表当前文档的URL
- alert(location);//显示地址
- location=“http://baidu.com”;//自定义url
<html>
<head>
<meta charset=utf-8>
<script>
function jamp(){
location = "http://baidu,com";
}
</script>
</head>
<body onLoad="setInterval('jamp()',1000);">
</body>
</html>
2.document
HTML下document也是有层次的,有段落、图片、表单、表格、链接,那怎么去访问这些呢?
1.Document Object Model
- 文档对象模型
- document对象的成员提供了HTML文档的信息
图片元素:images,是一个数组
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<img name="hua" src="flower.jpg">
<p id="p" name="hi">你好啊大哥大姐叔叔阿姨</p>
<script>
alert(document.images[0].src);//第一种方式:通过images图片的数组方式访问
alert(document.hua);//第二种:通过给图片的名字来访问
alert(document.getElementsByName("hi"));
//p标签要通过getElementsByName或getElementsById
alert(document.getElementsById("p"));
</script>
</body>
</html>
2.document的成员
成员 | 描述 |
---|---|
anchors[] | 创建HTML锚 |
forms[] | 表单 |
images[] | 图片 |
cookies | 浏览器证明身份 |
title | document标题 |
bgColor | 背景颜色 |
fgColor | 前景颜色 |
linkColor | 设置或获取文档中超链接的颜色 |
alinkColor | 设置或获取文档中激活的超链接的颜色 |
vlinkColor | 设置或获取文档中已访问过的超链接的颜色 |
1.图像
- images对象的src可以改写以装入一副新的图片
- 可以创建Image()对象来提前装载图片
- onLoad事件表明图片装载完成
(1)images[]的使用,images是一个数组
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<img name="hua" src="flower.jpg">
<p id="p" name="hi">你好啊大哥大姐叔叔阿姨</p>
<script>
alert(document.images[0].src);//第一种方式:通过images图片的数组方式访问
alert(document.hua);//第二种:通过给图片的名字来访问
alert(document.getElementsByName("hi"));
//p标签要通过getElementsByName或getElementsById
alert(document.getElementsById("p"));
</script>
</body>
</html>
(2)图片的动态变化
<body onLoad= "setInterval('show()',200)">
<!--每两百秒调用show一次-->
<img name="amm" src="1.jpg" with=300></img>
<script>
var images=new Array(6);//初始化
var index=1;
for(var i=0;i<6;i++){//循环
images[i]=new Image();//构造
images[i].src=i+".jpg";//赋值,图片名,赋值引起图片的装载,0.jpg,1.jpg...
}
function show(){
document.amm.src=images[index].src;//换图片
// document.amm.src="hua.jpg";
index=(index+1)%6;//改变值
}
</script>
</body>