12.2
1、JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是可插入 HTML 页面的编程代码。在插入 HTML 页面后,可由所有的现代浏览器执行。
JS的用法:HTML 中的脚本必须位于<script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。
可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS页面弹窗</title>
</head>
<body>
<scripttype="text/javascript">
alert("这是一个弹窗");
</script>
<scriptsrc="js.js"></script>
<!--两种方式
1.直接写在页面里
2.外部链接调用-->
</body>
</html>
(js文件:/**
*Created by Administrator on 2017/12/2.
*/
alert("这是弹窗!");/*如果括号内是一串文字,需要加双引号*/)
2、警告框 alert 完整写法为 window.alert();
确认框 confirm 完整写法为window.confirm();
提示框 prompt 完整写法为window.prompt();(提示框也可以成为输入框)
代码:
alert alert("这是一个弹窗");
confirm confirm("确定要退出吗?");
prompt prompt("请输入年龄",18);/*引号内是提示信息,“,”后是默认信息*/
3、JS在页面中输出的方式 document.write();
JS在控制台输出的方式 console.log();
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输出</title>
</head>
<body>
<script>
document.write("hello world!");/*直接在页面中输出,即在文档流中输出*/
console.log("你好");/*在控制台输出(控制台为调错、改错的地方)*/
</script>
</body>
</html>
4、JS 变量:与代数一样,JavaScript变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
要求:变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
声明JS变量使用var eg.var=x;
一条语句可以声明多个变量。
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。
5、JS 数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
JavaScript 字符串
字符串是存储字符(比如"HELLO world")的变量。
字符串可以是引号中的任意文本,可以使用单引号或双引号。
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
JavaScript 布尔
布尔(逻辑)只能有两个值:true或 false。
JavaScript 数组
eg. var cars=["Saab","Volvo","BMW"];
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为null 来清空变量。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<script>
var x=13;/*数据类型为number(数字)*/
var y="hello world";/*数据类型为string(字符串)*/
var z;z=15;/*效果同x*/
var a=null;/*数据类型为null(空)*/
var b=false;/*数据类型为boolean(布尔)*/
var c=[2,5,35,9];/*数据类型为array(数组)*/
var d={
name:"张三",sex:"男",age:"18"
};/*数据类型为object(对象)*/
var e;/*数据类型为infinite(未定义)*/
alert (typeof(a));/*弹出数据类型
typeof(a)表示查阅括号内变量的数据类型*/
alert(d.name+ d.age+ d.sex);/*(用“+”可以实现多个调用)*/
</script>
</body>
</html>
6、数组的调用 数组名[索引值]
eg.alert(a[0]);
对象的调用 对象名.键值名
调用多个属性时用“+”连接。
复杂调用 对象名[索引值].键值名
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>调用</title>
</head>
<body>
<script>
var a=[1,3,6,8,99]/*索引值为0,1,2,3,4*/;
alert(a[3]);/*数组的调用 数组名[索引值] 索引值从0开始计数*/
var b={
name:"张三",
age:20,
sex:"男",
address:"陕西西安"
};
alert(b.name);/*对象的调用对象名.键值名*/
alert(b.name+" "+b.age+" "+ b.sex+" "+b.address);/*想要调用多个需要用"+"进行连接*/
var c=[
{
name:"张三",
age:20,
sex:"男",
address:"陕西西安"
},
{
name:"李四",
age:20,
sex:"女",
address:"陕西西安"
},
{
name:"王五",
age:25,
sex:"男",
address:"陕西西安"
}
];/*复杂调用*/
alert(c[1].name);/*调用方式对象名[索引值].健名值*/
</script>
</body>
</html>
7、JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
算数运算符
+ 加法
- 减法
* 乘法
/ 除法
% 取模(余数)
++ 自增
-- 自减
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
<script>
var x= 6, y,z;
y=x++;/*先赋值后加1*/
z=++x;/*先加1后赋值*/
alert(x);/*8*/
alert(y);/*6*/
alert(z);/*8*/
</script>
</body>
</html>
赋值运算符
= x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
“+”的作用
1. 连接作用(+左右两边为字符串)
2. 运算作用(+左右两边为数字类型)
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>加号功能</title>
</head>
<body>
<script>
var a=prompt("请输入您的姓名","张三");
document.write("<span style='color:pink'>您输入的姓名是</span>"+a);/*添加样式*/
var b=prompt("请输入您的年龄",18);
document.write("<span style='color:orange'>请输入您的年龄"+b+"</span>");
</script>
</body>
</html>
<!--加号有两个功能 1.连接功能(当加号两边有字符串时)
2.数据相加(当加号两边为数字类型时)-->
比较运算符:
比较和逻辑运算符用于测试true 或者 false。
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
== 等于
=== 绝对等于(值和类型均相等)
!= 不等于
!== 绝对不等于(值或类型不相等)
> 大于
< 小于
>= 大于或等于
<= 小于或等于
逻辑运算符:
逻辑运算符用于测定变量或值之间的逻辑。
&& and 两边都为真,结果才为真。
|| or 只要有一边为真,结果就为真;两边都为假,结果才为假。
! not 你为真,我为假(即相反的)。
条件运算符:
variablename=(condition)?value1:value2
(条件)?“条件成立时输出的值”:“条件不成立时输出的值”
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>条件运算符(又称三目运算符)</title>
</head>
<body>
<script>
var a=prompt("请输入您的年龄",18);
alert((a>=18)?"您为成年人":"您为未成年人");
</script>
</body>
</html>
<!--语法:
(条件)?“条件成立时输出的值”:“条件不成立时输出的值”-->
8、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
执行代码
}
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
局部 JavaScript变量
在 JavaScript 函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<button οnclick="one()">点击</button><!--鼠标点击时触发one函数-->
<script>
function one(){
z=2;/*全局变量*/
x=3;/*全局变量*/
x+=z;/*等价于x=x+z*/
alert("您的计算结果为"+x);
}
</script>
<!--
函数的语法:function函数名(){
执行语句;
}
函数调用:触发时间=“函数名()”
触发事件:onclick 点击事件
onmouseover 鼠标放上去时触发
onmouseout 鼠标离开时触发
onmousemove 鼠标移动时触发-->
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带参函数</title>
</head>
<body>
<button οnclick="sum(5,6)">计算</button><!--里面的sum的()里的数为实参-->
<button οnclick="sum(6,9)">计算1</button>
<buttonοnclick="sum(45,23)">计算2</button>
<script>
function sum(x,y){/*带参函数,里面的x,y为形参*/
var z=x-y;
alert(z);
}
</script>
</body>
</html>
9、JavaScript 作用域
作用域可访问变量的集合。
JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
JavaScript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
10、获取对象
找节点
document.getElementById(“”); //通过id获取对象
document.geyElementsByClassName(“”); //通过class名获取对象
document.getElementsByTagName(“”); //通过标签名获取对象
获取值
.innerHTML 获取值(包含标签元素)
.innerText 获取值(纯文本)
.value 获取表单元素的值
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取对象</title>
</head>
<body>
<ul>
<li id="one" οnclick="show()">aaaaaaaaaaaa<a href="">nihao</a></li>
<li class="two">aaaab</li>
<li>aaaaa2</li>
<li>aaaaae</li>
<li>aaaaas</li>
<li>aaaaagf</li>
</ul>
<span οnclick="show()">你好 <ahref="">nihao</a></span><br/>
<input type="text"value="计算" οnclick="show()"/>
<script>
function show(){
alert(document.getElementById("one").innerHTML);/*id名是唯一的,所以一个页面中只有一个*/
alert(document.getElementsByClassName("two")[0].innerHTML);/*class在页面中可能会有很多个,所以要输入索引值,否则找不到*/
alert(document.getElementsByTagName("span")[0].innerText);/*标签在页面中可能会有很多个,所以要输入索引值,否则找不到*/
alert(document.getElementsByTagName("input")[0].value);
}/*innerHTML表示获取可以含有包含标签元素
innerText表示获取纯文本
value表示获取表单元素的值*/
</script>
</body>
</html>
11、If 语句
只有当指定条件为 true时,该语句才会执行代码。
语法
if (condition)
{
当条件为 true 时执行的代码
}
使用小写的 if。使用大写字母(IF)会生成JavaScript 错误。
If...else 语句
使用 if....else语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
语法
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
If...else if...else 语句
使用 if....elseif...else 语句来选择多个代码块之一来执行。
语法
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>if...else</title>
</head>
<body>
<script>
var money=prompt("请输入您的年收入",10);
if(money>=10){
document.write("您可以购买小汽车了")
}else if(money>=5){
document.write("您可以购买电动车了")
}else if(money>=3){
document.write("您可以购买自行车了")
}else{
document.write("您只能坐公交车了")
}
</script>
</body>
</html>
12、JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>switch语句</title>
</head>
<body>
<script>
var day=parseInt(prompt("请输入星期数字",1));/*parseInt()表示强制转换为整型数据*/
switch(day){
case 1:
document.write("今天是星期一");
break;
case 2:
document.write("今天是星期二");
break;
case 3:
document.write("今天是星期三");
break;
case 4:
document.write("今天是星期四");
break;
case 5:
document.write("今天是星期五");
break;
case 6:
document.write("今天是星期六");
break;
case 7:
document.write("今天是星期日");
break;
default:/*当输入的内容上述case中没有时,输出default的执行语句*/
document.weite("请输入正确的数字");
break;
}/*当你输入的哪个值符合哪个case就执行哪个case的语句*/
</script>
</body>
</html>
13、For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行 starts.
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<script>
var study=["你好","这里是","web","学习教程"];
for(var i=0;i<study.length;i++){
document.write(study[i]+" ");/*for循环*/
}
var study1=["你好","这里是","web","学习教程"];
for(var j=0;j<study1.length;j++){
document.write(study[j]+"<br>");/*for循环*/
}
</script>
</body>
</html>
14、while 循环
while 循环会在指定条件为真时循环执行代码块。
语法
while (条件)
{
需要执行的代码
}
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
语法
do
{
需要执行的代码
}
while (条件);
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>while循环</title>
</head>
<body>
<script>
var i= 2,x=0;
while(i<4){
x+=i;
i++;
}
document.write(x)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>do while</title>
</head>
<body>
<script>
var i= 2,x=0;
do
{
x+=i ;
i++;
}
while (i<5);
document.write(i);
</script>
</body>
</html>
while和do while的区别:
while 先判断后执行语句
do while 先执行后判断
当条件不成立时 while语句停止循环,dowhile语句至少会运行一次。
15、JavaScript Break 和 Continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
break 语句,它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话)。
Continue 语句
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
12.3
1、JavaScript typeof,null, 和 undefined
typeof 操作符
可以使用 typeof 操作符来检测变量的数据类型。
Null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
Undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
数组是特殊的object数据类型。
2、JavaScript 类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
JavaScript 数据类型
在 JavaScript 中有 5 中不同的数据类型:
string
number
boolean
object
function
3 种对象类型:
object
date
array
2 个不包含任何值的数据类型:
null
undefined
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是返回 Object。
constructor属性
constructor 属性返回所有 JavaScript 变量的构造函数。
JavaScript 类型转换
JavaScript 变量可以转换为新变量或其他数据类型:
通过使用JavaScript 函数
通过 JavaScript自身自动转换
将数字转换为字符串
全局方法 String()可以将数字转换为字符串。
Number 方法,数字转换为字符串的方法:
toExponential() 把对象的值转换为指数计数法。
toFixed() 把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。
将字符串转换为数字
全局方法 Number()可以将字符串转换为数字。
字符串包含数字(如"3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为NaN (不是个数字)。
在 Number 方法 章节中,你可以查看到更多关于字符串转为数字的方法:
parseFloat() 解析一个字符串,并返回一个浮点数。
parseInt() 解析一个字符串,并返回一个整数。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>检测数据类型</title>
</head>
<body>
<script>
var x="123";
console.log(typeof(x));/*数据类型为string型*/
var y=Number(x);/*将string型转换为number型*/
console.log(typeof(y));/*数据类型为number型*/
var a=123;
console.log(typeof(a));/*数据类型为number*/
var b=String(a);/*将number型转换为string型*/
console.log(typeof(b));/*数据类型为string*/
var m="true";
console.log(typeof(m));/*数据类型为string型*/
var n=Boolean(m);/*将string型转换为boolean型*/
console.log(typeof(n));/*数据类型为boolean*/
var l=null;
console.log(typeof(l));/*数据类型为object型*/
var o;
console.log(typeof(o));/*数据类型为undefined型*/
var one=[1,2,3,4];
var two={a:3,b:4,c:5};
console.log(one.constructor);/*显示数据类型为数组(array)*/
console.log(two.constructor);/*显示数据类型为对象(object)*/
/*数组类型是一种特殊的数据类型*/
</script>
</body>
</html>
3、HTML事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onmousedown 鼠标按下时
onmouseup 鼠标放开时
onfocus 获取焦点时
onbulr 失去焦点时
找对象的作用:
1. 获取值
2. 改变样式
3. 改变属性
eg.改变样式
obj.style.样式名=样式值
改变属性
Obj.属性名=属性值
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当表单元素改变时发生变化</title>
</head>
<body>
<input type="text"class="one"/>
<script>
var input=document.getElementsByClassName("one")[0];
input.οnchange=function(){/*onchange表示当元素发生改变时会触发事件*/
this.style.backgroundColor="pink";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取焦点与失去焦点</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<p><input type="text"class="username"/></p>
<p><inputtype="submit"/></p>
<script>
var user=document.getElementsByClassName("username")[0];
user.οnfοcus=function(){/*在鼠标获取焦点时触发function函数*/
this.style.border="solid 1px yellow"
};
user.οnblur=function(){/*在鼠标失去焦点时触发function函数*/
this.style.border="solid 1px blue"
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<spanοnmοuseοver="change('green')">green</span>|<!--onmouseover表示鼠标放上时触发事件-->
<spanοnmοuseοver="change('red')">red</span>|
<spanοnmοuseοver="change('yellow')">yellow</span>
<script>
function change(color){/*利用形参与实参*/
document.bgColor=color;/*将形参赋给背景颜色,也就是会进行实参的展示*/
}
</script>
</body>
</html>
4、JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同方式在于this 的初始化。
1. 作为一个函数调用(这是调用 JavaScript 函数常用的方法,但不是良好的编程习惯;全局变量,方法或函数容易造成命名冲突的bug。)
2. 函数作为方法调用(函数作为对象方法调用,会使得 this 的值成为对象本身。)
3. 使用构造函数调用函数,如果函数调用前使用了 new 关键字, 则是调用了构造函数。看起来就像创建了新的函数,实际上 JavaScript 函数是重新创建的对象。(构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。构造函数中 this 关键字没有任何的值。this 的值在函数调用时实例化对象(new object)时创建。)
4. 作为函数方法调用函数。
5、获取属性值 .getAttribute()
设置属性值 .setAttribute()
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景色的获取</title>
</head>
<body>
<p>
<a href="" data-color="yellow">yellow</a><!--“data-”表示自己设定的一种属性-->
<a href="" data-color="pink">pink</a>
<a href=""data-color="orange">orange</a>
</p>
<script>
var color=document.getElementsByTagName("a");
for(var i=0;i<color.length;i++){/*color.length表示color这个函数的长度*/
color[i].οnmοuseοver=function(){/*color函数后加索引值,表示这个函数的第i个执行下面的语句*/
document.bgColor=this.getAttribute("data-color");/*.getAttribute表示获取属性值*/
}
}
</script>
</body>
</html>
5、访问对象的语法: objectName.propertyName(即 对象名.属性名)
Length是string对象的属性
toUpperCase() 为将文本转换成大写
eg. var message=”HELLO world!”;
var x=message.toUpperCase();
访问对象的属性 语法:对象名.属性名
访问对象的方法 语法:对象名.方法()
6、创建 JavaScript 对象
通过 JavaScript,您能够定义并创建自己的对象。
创建新对象有两种不同的方法:
定义并创建对象的实例
使用函数来定义对象,然后创建新的对象实例
1. 创建直接的实例
2. 使用对象构造器(在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时))
3. 把属性添加到JavaScript 对象
4. 把方法添加到JavaScript 对象
7、JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写
所有 JavaScript数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324.
精度
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是100% 准确
NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
toFixed() 保留小数点的一种运算
obj.toFixed(n) n是大于0的整数,n表示小数位位数
Math 方法
1.round() 四舍五入为整数
2.random() 随机数(0~1之间)
3.ceil() 向上舍去
4.floor() 向下舍去
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随机数(验证码)</title>
<style>
span{
height: 19px;
width: 70px;
line-height: 19px;
text-align: center;
display:inline-block;
color: #000;
font-size: 19px;
font-weight: bold;
cursor: pointer;/*鼠标放上时为手的形状*/
}
</style>
</head>
<body>
<p>
<input type="text"/><span></span>
</p>
<script>
function change(){
var one,two,three,four;
one=Math.floor(Math.random()*10);/*随机数向下舍去*/
two=Math.floor(Math.random()*10);
three=Math.floor(Math.random()*10);
four=Math.floor(Math.random()*10);
var msg=one+" "+two+""+three+" "+four;
document.getElementsByTagName("span")[0].innerText=msg;
document.getElementsByTagName("span")[0].style.backgroundImage="url(images/yz"+one+".jpg)"
}
change();/*默认情况下先运行一遍函数*/
var aspan=document.getElementsByTagName("span")[0];
aspan.οnclick=change;
</script>
</body>
</html>