Javascript的输出
JavaScript 可以通过不同的方式来输出数据:
· 使用 window.alert() 弹出警告框。
· 使用 document.write() 方法将内容写到 HTML 文档中。用来直接写到网页上,不需要在html标签内。
· 使用 innerHTML 写入到 HTML 元素。//用于修改标签如‘p’、‘h’等html标签内的内容。
· 使用 console.log() 写入到浏览器的控制台。
document.getElementById("demo") 使用 id 属性来查找 HTML 元素的 JavaScript 代码。
innerHTML = "段落已修改。" 用于修改元素的 HTML 内容(innerHTML)的 JavaScript代码。
Javascript的语法
固定值:
在编程语言中,一般固定值称为字面量,如 3.14。
数组字面量:[1, 3, 4, 5]
对象字面量:{firstName:"John", lastName:"Doe",age:50, eyeColor:"blue"}
函数字面量:functionmyFunction(a, b) { return a * b;}
变量:
JavaScript 使用关键字 var 来定义变量,使用等号来为变量赋值【可以边定义边赋值】。
² 变量是一个名称。字面量是一个值。
注释:
用‘//’来注释
数据类型:
16+6+“john”,会输出 22john
注意:
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
JavaScript 使用 Unicode 字符集。
JavaScript 语句标识符
语句 | 描述 |
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
对代码行进行折行:
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("你好 \
世界!");
不过,您不能像这样折行:
document.write \
("你好世界!");
提示:
JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
JavaScript 数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
varx; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
数组:var cars=new Array();或者var cars=newArray("Saab","Volvo","BMW");
对象:var person={firstname:"John",lastname:"Doe", id:5566};例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。寻址方式,person.lastname和person[“lastname”]的输出结果都是“Doe”。
可以将变量赋值为null,来清空变量。
声明变量类型:var carname=new String;
² 注意:在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。可通过window.变量名,来访问全局数据变量,函数体内的变量,通过window.变量名,不可以访问,是undefined
JavaScript 事件
下面是一些常见的HTML事件的列表:
事件 | 描述 |
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
JavaScript 字符串
1、你可以使用索引位置来访问字符串中的每个字符:
实例
Var carname =“volvo xc60”;
var character = carname[7];
2、你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同:
实例
var answer = "It'salright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
3、你也可以在字符串添加转义字符来使用引号:
实例
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
4、可以使用内置属性 length 来计算字符串的长度:
5、通常, JavaScript 字符串是原始值,可以使用字符创建: varfirstName = "John";但我们也可以使用 new 关键字将字符串定义为一个对象: varfirstName = new String("John")
² 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
字符串属性
属性 | 描述 |
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
字符串方法
方法 | 描述 |
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
JavaScript 比较和逻辑运算符
| |||
运算符 | 描述 | 比较 | 返回值 |
=== | 绝对等于(值和类型均相等) | x==="5" | false |
x===5 | true | ||
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) | x!=="5" | true |
x!==5 | false |
² 可以使用 typeof 操作符来检测变量的数据类型。
² 可以设置为 null 来清空对象。
² 可以设置为 undefined 来清空对象。
JavaScript 类型转换
constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数。
1、 将数字、布尔、日期转换为字符串
String() 可以将数字转换为字符串。如,String(123) ;Number 方法 toString() 也是有同样的效果,如,(123).toString()。
在 Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数:
方法 | 描述 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
2、 将字符串转换为数字
(1)全局方法 Number() 可以将字符串转换为数字。
如,Number("3.14") // 返回 3.14
Number("") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN(NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
提示:请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。)
(2)Operator + 可用于将变量转换为数字:
3、 将日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime() // 返回1404568027739
4、自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的:
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
JavaScript 正则表达式
1、在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
varstr = "Visit Runoob!"; varn =str.search(/Runoob/i);//返回6
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
varstr = document.getElementById("demo").innerHTML;
txt =str.replace(/microsoft/i,"Runoob");//替换microsoft为Runoob
2、正则表达式修饰符
修饰符 | 描述 |
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
4、 正则表达式模式
表达式 | 描述 |
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
元字符 | 描述 |
\d | 查找数字。 |
\s | 查找空白字符。 |
\b | 匹配单词边界。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
5、 使用RegExp对象
6、 使用test()
test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
JavaScript 错误、调试
错误:try{//在这里运行代码}catch(err){//在这里处理错误}
调试:console.log() 方法、debugger关键字
² Javascript允许先使用后声明变量和函数,但必须先复制才能有值,否则值为undefined。
² "usestrict" 指令只运行出现在脚本或函数的开头。
² 只有return、没有加分号时,会自动加上分号。
JavaScript 函数
1、 JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。
2、 一般而言,在Javascript中,this指向函数执行时的当前对象。
3、 call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
JavaScript HTML DOM
1、 查找HTML元素
· 通过 id 找到 HTML 元素:varx=document.getElementById("intro");
· 通过标签名找到 HTML 元素:var y=x.getElementsByTagName("p");
· 通过类名找到 HTML 元素:var x=document.getElementsByClassName("intro");
2、 改变HTML属性
<imgid="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
3、 改变HTML样式
document.getElementById(id).style.property=新样式
4、 对事件做出反应
(1)<h1 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>
(2)<button id="myBtn">点这里</button>
<script>document.getElementById("myBtn").onclick=function(){displayDate()};
(3)onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。
(4)onchange 事件(鼠标离开之后):onchange 事件常结合对输入字段的验证来使用。
(5)onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
(6)onmousedown, onmouseup 以及onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
5、EventListener
(1)addEventListener()方法
<button id="myBtn">点击</button>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
functiondisplayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
l addEventListener() 方法用于向指定元素添加事件句柄。
l addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
l 你可以向一个元素添加多个事件句柄。
例:var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
l 你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
例:varx = document.getElementById("myBtn");
x.addEventListener("mouseover",myFunction);
x.addEventListener("click",mySecondFunction);
x.addEventListener("mouseout",myThirdFunction);
l 你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML元素。如: window 对象。
例:window.addEventListener("resize",function(){
document.getElementById("demo").innerHTML= sometext;
});
l addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
l 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听。
l 你可以使用 removeEventListener() 方法来移除事件的监听。
² 注意:不要使用 "on" 前缀。例如,使用 "click" ,而不是使用 "onclick"。
语法:
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如"click" 或"mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
第三个参数:
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的"click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
² 默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
(2)removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。
6、HTML DOM元素
(1)添加元素
<script>
varpara=document.createElement("p");//这段代码创建新的<p> 元素
varnode=document.createTextNode("这是一个新段落。");//这段代码创建了一个文本节点
para.appendChild(node);//向 <p> 元素追加这个文本节点
varelement=document.getElementById("div1");//找到一个已有的元素
element.appendChild(para);//在已存在的元素后添加新元素
</script>
(2)删除已有元素
<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
parent.removeChild(child);
</script>
² 如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
JavaScript 浏览器BOM
1、window.location.assign("http://www.w3cschool.cc")//用来加载新的文档,可在出一个新的网页
2、history.back() - 与在浏览器点击后退按钮相同。history.forward() - 与在浏览器中点击向前按钮相同
3、window.navigator 对象包含有关访问者浏览器的信息。
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
5、 提示框:window.prompt("sometext","defaultvalue");
varperson=prompt("请输入你的名字","HarryPotter");
6、 计时器
· setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
实例
每三秒弹出 "hello" :
setInterval(function(){alert("Hello")},3000);
² clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
· setTimeout() - 暂停指定的毫秒数后执行指定的代码
varmyVar=setInterval(function(){myTimer()},1000);
² clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
7、Cookie
(1)创建cookie
document.cookie="username=JohnDoe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
expires是告诉浏览器cookie的过期时间,path是告诉浏览器cookkie的路径。
(2)读取cookie
var x = document.cookie;
² document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
(3)修改cookie
修改 cookie 类似于创建 cookie,如下所示:
document.cookie="username=JohnSmith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
(4)删除cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00GMT";
(5)cookie简述
document.cookie 属性看起来像一个普通的文本字符串,其实它不是。即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie,旧的 cookie 不会被覆盖。新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:
(6)设置cookie的函数
function setCookie(cname,cvalue,exdays)
{
var d =newDate();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires ="expires="+d.toGMTString();
document.cookie = cname +"="+ cvalue +"; "+ expires;
}
(7)获取cookie值得函数
function getCookie(cname)
{
var name = cname +"=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if(c.indexOf(name)==0)return c.substring(name.length,c.length);
}
return"";
}
(8)检测cookie值得函数
function checkCookie()
{
var username=getCookie("username");
if(username!="")
{
alert("Welcome again "+ username);
}
else
{
username = prompt("Please enter your name:","");
if(username!=""&& username!=null)
{
setCookie("username",username,365);
}
}
}