一、JavaScript 对象
1、函数属性作为一个方法访问
<p id="demo"></p>
<script type="text/javascript">
var person ={
firstName:"John",
lastName:"Doe",
id:5566,
fullName:function()
{
return this.firstName+" "+this.lastName;
}
};
document.getElementById("demo").innerHTML=person.fullName();
</script>
2、函数属性作为一个属性访问
<p id="demo"></p>
<script type="text/javascript">
var person ={
firstName:"John",
lastName:"Doe",
id:5566,
fullName:function()
{
return this.firstName+" "+this.lastName;
}
};
document.getElementById("demo").innerHTML=person.fullName;
</script>
二、JavaScript 函数
1、调用带参数的函数
<button onclick="myFunction('asu','teacher')">点击</button>
<script type="text/javascript">
function myFunction(name,job){
alert("welcome "+name+", the "+job);
}
</script>
在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔,变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
2、带有返回值的函数
在使用 return 语句时,函数会停止执行,并返回指定的值。
<p id="demo"></p>
<script type="text/javascript">
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(3,4);
</script>
三、JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
1、局部变量在声明的函数内不可以访问。
<p id="demo"></p>
<script type="text/javascript">
myFunction();
document.getElementById("demo").innerHTML="carName的类型是:"+typeof carName;
function myFunction()
{
var carName="Volvo";
}
</script>
2、全局变量在任何脚本和函数内均可访问。
<p id="demo"></p>
<script type="text/javascript">
var carName="volvo";
myFunction();
function myFunction()
{ document.getElementById("demo").innerHTML="我可以显示:"+carName;
}
</script>
3、如果你的变量没有声明,它将自动成为全局变量:
<p id="demo"></p>
<script type="text/javascript">
myFunction();
document.getElementById("demo").innerHTML="我可以显示:"+carName;
function myFunction()
{
carName="volvo";
}
</script>
4、在 HTML 中, 所有全局变量都会成为 window 变量。
<p id="demo"></p>
<script type="text/javascript">
myFunction();
document.getElementById("demo").innerHTML="我可以显示 "+window.carName;
function myFunction()
{
carName="Volvo";
}
</script>
四、JavaScript 事件
1、代码将修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">点击</button>
2、点击按钮执行 displayDate() 函数.
<button onclick="displaydate()">点击</button>
<script type="text/javascript">
function displaydate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<P id="demo"></P>
五、JavaScript 字符串
1、字符串可以存储一系列字符,如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:
<P id="demo"></P>
<script type="text/javascript">
var x='it\'s alright';
var y="he is called \"John\"";
document.getElementById("demo").innerHTML=x+"<br>"+y;
</script>
2、字符串长度
可以使用内置属性 length 来计算字符串的长度:
<script type="text/javascript">
var txt="hello world";
document.write("<p>"+txt.length+"<p>");
var txt="dfadfgaewaewa";
document.write("<p>"+txt.length+"<p>");
</script>
3、特殊字符
4、字符串可以是对象
<p id="demo"></p>
<script type="text/javascript">
var x="John";
var y=new String("John");
document.getElementById("demo").innerHTML=typeof x+" "+typeof y;
</script>
<p id="demo"></p>
<script type="text/javascript">
var x="John";
var y=new String("John");
document.getElementById("demo").innerHTML=x===y;
/*=== 为绝对相等,即数据类型与值都必须相等。*/
</script>
5、字符串属性和方法
原始值字符串,如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
字符串属性
字符串方法
六、JavaScript 运算符
1、运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
<button onclick="myFunction()">点击计算</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
y=5;
z=2;
x=y+z;
document.getElementById("demo").innerHTML=x;
}
</script>
2、JavaScript 算术运算符
y=5,下面的表格解释了这些算术运算符:
3、赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5,下面的表格解释了赋值运算符:
4、用于字符串的 + 运算符
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
txt1="what a very ";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
5、对字符串和数字进行加法运算
两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串:
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x=5+5;
var y="50"+5;
var z="hello"+110;
var demop=document.getElementById("demo");
demop.innerHTML=x+"<br>"+y+"<br>"+z;
}
</script>
七、JavaScript 比较 和 逻辑运算符
1、x=5,下面的表格解释了比较运算符:
2、逻辑运算符
给定 x=6 以及 y=3,下表解释了逻辑运算符:
3、条件运算符
语法:
variablename=(condition)?value1:value2
<input type="text" id="age" value="18">
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"年龄太小":"年龄已经达到";
document.getElementById("demo").innerHTML=voteable;
}
</script>
八、JavaScript If...Else 语句
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
1、If 语句
if (condition)
{
当条件为 true 时执行的代码
}
<p>如果时间早于20:00,会获得问候“Good day”</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="";
var time=new Date().getHours();
if(time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
2、If...else 语句
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
<p>点击这个按钮,获得基于时间的问候。</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="";
var time=new Date().getHours();
if(time<10){
x="Good day";
}
else {
x="Good night";
}
document.getElementById("demo").innerHTML=x;
}
</script>
3、If...else if...else 语句
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
<p>点击这个按钮,获得基于时间的问候。</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="";
var time=new Date().getHours();
if(time<10){
x="早上好";
}
if(time>=10&&time<16){
x="Good day";
}
else{
x="晚上好"
}
document.getElementById("demo").innerHTML=x;
}
</script>
九、JavaScript switch 语句
1、首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
<p>点击获得日期。</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x;
var d=new Date().getDay();
switch (d) {
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
2、default 关键词
default 关键词规定匹配不存在时做的事情。
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x;
var d=new Date().getDay();
switch (d) {
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
}
十、JavaScript for 循环
1、输出数组的值
一般写法:
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
使用for循环
<script type="text/javascript">
cars=["BMW","Volvo","Saab","Ford"];
for( var i=0;i<cars.length;i++){
document.write(cars[i]+"<br>");
}
</script>
2、不同类型的循环
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
3、For 循环
for 循环的语法
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行 starts.
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="";
for(var i=0;i<5;i++){
x=x+"该数字为"+i+"<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
4、语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的,也就是说不使用语句 1 也可以。
<script type="text/javascript">
cars=["a","b","c","d"];
for (var i=0,l=cars.length; i<l; i++){
document.write(cars[i] + "<br>");
}
</script>
或者:
<script type="text/javascript">
cars=["a","b","c","d"];
var i=2,len=cars.length;
for(;i<len;i++){
document.write(cars[i]+"<br>");
}
</script>
5、语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
6、语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。
语句 3 也可以省略(比如当循环内部有相应的代码时)
<script type="text/javascript">
cars=["a","b","c","d"];
var i=0,len=cars.length;
for(;i<len;){
document.write(cars[i]+"<br>");
i++;
}
</script>
7、For/In 循环
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for(x in person){
txt=txt+person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
十一、JavaScript while 循环
while (条件)
{
需要执行的代码
}
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x="",i=0;
while(i<5){
x=x + "该数字为" +i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>