Js菜鸟学习
2016-08-31 23:10
260 查看
(一)
1
代码如下:
//页面中写入html内容
document.write("<h1>Hello World!</h1>")
2
代码如下:
//为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示
//注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
3
代码如下:
//onload事件的多种写法
//第一种通过body标签加入onload事件
<script type="text/javascript">
function message(){ alert("该提示框是通过 onload 事件调用的。");}
</script>
<body onload="message()">
//第二种直接用window函数调用onload事件
<script type="text/javascript" language="javascript">
window.onload=message;
function message(){ alert("该提示框是通过 onload 事件调用的。"); }
</script>
4
//JavaScript 放置的位置
当页面载入时，会执行位于 body 部分的 JavaScript。(直接执行)
当被调用时，位于 head 部分的 JavaScript 才会被执行。
head 部分
包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。
5.
//分号的作用
//分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾,通过使用分号，可以在一行中写多条语句。
6。
//JavaScript 变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线开始
7。
//变量的声明
如果您所赋值的变量还未进行过声明，该变量会自动声明。
例:
x=5; carname="Volvo";
与后面的这些语句的效果相同：var x=5; var carname="Volvo";
8。
//比较运算符
运算符 描述 例子
=== 全等（值和类型） x===5 为 true； x==="5" 为 false
9。
//条件运算符(三目运算符)
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
name=("liuhuan"=="LH")?"刘欢":"歌星";
10。
//获得当前系统时间(小时数)
var d = new Date()
var time = d.getHours()
11。
//随机数
var num=Math.random();
产生的伪随机数介于 0 和 1 之间（含 0，不含 1），也就是，返回值可能为0，但总是小于1。在第一次加载 JScript 时随机数发
生器自动产生 。
12。
//获取今天的星期数(星期日为0，星期1-6为1-6)
var d = new Date()
theDay=d.getDay()
13。
//按钮的触发事件
<input type="button" onclick="disp_alert()" value="显示警告框" />
14。
//弹出框内容换行
alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
15.
//确认框(删除方法)
//confirm("文本")
<script type="text/javascript">
function show_confirm()
{
var r=confirm("确认删除?");
if (r==true) {
alert("删除成功!");
}
else{
alert("删除失败!");
}
}
</script>
16.
//于用户交互的弹出框(可输入文字的提示框)
//prompt("文本","默认值")
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!=""){
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
17。
//带有参数并返回值的函数
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
</body>
18。
//for循环 (本例中动态生成html中的h标签)
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++){
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</script>
</body>
19。
//break跳出语句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){break}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：循环会在 i=3 时中断。</p>
20。
//continue跳出语句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：当 i=3 时，会中断循环，并从下一个值开始继续循环。</p>
值为:01245678910
21。
//for in循环(相当于.net中的foreach循环)
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write("x的值为"+x+ "<br />");
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
22。
//javascript事件
onload 某个页面或图像被完成加载 //页面加载
onunload 用户退出页面
onfocus 元素获得焦点
onblur 元素失去焦点 //表单验证
onchange 用户改变域的内容
onreset 重置按钮被点击
onsubmit 提交按钮被点击 //用于在提交表单之前验证所有的表单域。
例如:
(当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。checkForm() 函数的返回值是 bool类型,如果返回值为true，则
提交表单，反之取消提交。)
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住 //键盘操作
onkeyup 某个键盘的键被松开
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmousedown 某个鼠标按键被按下 //鼠标操作
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onabort 图像加载被中断
onerror 当加载文档或图像时发生某个错误
onresize 窗口或框架被调整尺寸
onselect 文本被选定
23。
//js中的错误提示 err.description及其try...catch 语句
例如:
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本页中存在错误。\n\n"
txt+="错误描述：" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt);
}
}
</script>
24。
//带有确认框的 try...catch 语句
<head>
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页，\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt))
{
document.location.href="../index.html"
}
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
25。
//创建 exception（异常或错误）。(配合try...catch语句使用)
例如:
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er){
if(er=="Err1")
alert("错误！该值太大！")
if(er == "Err2")
alert("错误！该值太小！")
if(er == "Err3")
alert("错误！该值不是数字！")
}
</script>
26。
//return true和return true的用法
(它可以返回一个bool型的参数,继续用于判断)
function jiance(msg,url,l){
alert("你确定吗?")
return true
}
function jieguo(){
if(jiance()){
alert("是");
}
else{
alert("否");
}
}
27.
//onerror 事件
<html><head>
<script type="text/javascript">
//当出现错误时触发onerror事件
onerror=handleErr;
var txt=""
function handleErr(msg,url,l){
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
function message(){
adddlert("确定吗?")
}
</script>
</head><body>
<input type="button" value="查看消息" onclick="message()" />
</body></html>
28。
//JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
例如:
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
29。
//javascript注意事项
1。JavaScript 对大小写敏感
2。JavaScript 会忽略多余的空格
3。在编写代码时可以使用反斜杠进行换行
例:
document.write("Hello \
World!");
(二)
1．
//使用变量的属性
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
2。
//把字符串中的所有字母都被转化为大写字母。
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
3。
//js中个变量添加超链接
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>超链接为:
" + txt.link("http://www.w3school.com.cn") +
"</p>")
</script>
4。
//indexOf方法(定位字符串中某一个指定的字符首次出现的位置。如果没有查到返回-1，区分大小写)
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />") //1
document.write(str.indexOf("World") + "<br />") //-1
document.write(str.indexOf("world")) //6
</script>
5。
//match() 方法
//使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />") //world
document.write(str.match("World") + "<br />") //null
document.write(str.match("worlld") + "<br />") //null
document.write(str.match("world!")) //world!
</script>
6。
//replace() 方法在字符串中用某些字符替换另一些字符。
var str="Visit Microsoft!"
document.write(str.replace("Microsoft","W3School"))
7.
//合并两个数组
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
(三)
1.js正则表达式(RegExp对象)
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
①test()方法
//test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
②exec()方法
//exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
1
代码如下:
//页面中写入html内容
document.write("<h1>Hello World!</h1>")
2
代码如下:
//为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示
//注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
3
代码如下:
//onload事件的多种写法
//第一种通过body标签加入onload事件
<script type="text/javascript">
function message(){ alert("该提示框是通过 onload 事件调用的。");}
</script>
<body onload="message()">
//第二种直接用window函数调用onload事件
<script type="text/javascript" language="javascript">
window.onload=message;
function message(){ alert("该提示框是通过 onload 事件调用的。"); }
</script>
4
//JavaScript 放置的位置
当页面载入时，会执行位于 body 部分的 JavaScript。(直接执行)
当被调用时，位于 head 部分的 JavaScript 才会被执行。
head 部分
包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。
5.
//分号的作用
//分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾,通过使用分号，可以在一行中写多条语句。
6。
//JavaScript 变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线开始
7。
//变量的声明
如果您所赋值的变量还未进行过声明，该变量会自动声明。
例:
x=5; carname="Volvo";
与后面的这些语句的效果相同：var x=5; var carname="Volvo";
8。
//比较运算符
运算符 描述 例子
=== 全等（值和类型） x===5 为 true； x==="5" 为 false
9。
//条件运算符(三目运算符)
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
name=("liuhuan"=="LH")?"刘欢":"歌星";
10。
//获得当前系统时间(小时数)
var d = new Date()
var time = d.getHours()
11。
//随机数
var num=Math.random();
产生的伪随机数介于 0 和 1 之间（含 0，不含 1），也就是，返回值可能为0，但总是小于1。在第一次加载 JScript 时随机数发
生器自动产生 。
12。
//获取今天的星期数(星期日为0，星期1-6为1-6)
var d = new Date()
theDay=d.getDay()
13。
//按钮的触发事件
<input type="button" onclick="disp_alert()" value="显示警告框" />
14。
//弹出框内容换行
alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
15.
//确认框(删除方法)
//confirm("文本")
<script type="text/javascript">
function show_confirm()
{
var r=confirm("确认删除?");
if (r==true) {
alert("删除成功!");
}
else{
alert("删除失败!");
}
}
</script>
16.
//于用户交互的弹出框(可输入文字的提示框)
//prompt("文本","默认值")
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!=""){
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
17。
//带有参数并返回值的函数
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
</body>
18。
//for循环 (本例中动态生成html中的h标签)
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++){
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</script>
</body>
19。
//break跳出语句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){break}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：循环会在 i=3 时中断。</p>
20。
//continue跳出语句
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：当 i=3 时，会中断循环，并从下一个值开始继续循环。</p>
值为:01245678910
21。
//for in循环(相当于.net中的foreach循环)
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write("x的值为"+x+ "<br />");
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
22。
//javascript事件
onload 某个页面或图像被完成加载 //页面加载
onunload 用户退出页面
onfocus 元素获得焦点
onblur 元素失去焦点 //表单验证
onchange 用户改变域的内容
onreset 重置按钮被点击
onsubmit 提交按钮被点击 //用于在提交表单之前验证所有的表单域。
例如:
(当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。checkForm() 函数的返回值是 bool类型,如果返回值为true，则
提交表单，反之取消提交。)
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住 //键盘操作
onkeyup 某个键盘的键被松开
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmousedown 某个鼠标按键被按下 //鼠标操作
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onabort 图像加载被中断
onerror 当加载文档或图像时发生某个错误
onresize 窗口或框架被调整尺寸
onselect 文本被选定
23。
//js中的错误提示 err.description及其try...catch 语句
例如:
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本页中存在错误。\n\n"
txt+="错误描述：" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt);
}
}
</script>
24。
//带有确认框的 try...catch 语句
<head>
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}
catch(err){
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页，\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt))
{
document.location.href="../index.html"
}
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
25。
//创建 exception（异常或错误）。(配合try...catch语句使用)
例如:
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er){
if(er=="Err1")
alert("错误！该值太大！")
if(er == "Err2")
alert("错误！该值太小！")
if(er == "Err3")
alert("错误！该值不是数字！")
}
</script>
26。
//return true和return true的用法
(它可以返回一个bool型的参数,继续用于判断)
function jiance(msg,url,l){
alert("你确定吗?")
return true
}
function jieguo(){
if(jiance()){
alert("是");
}
else{
alert("否");
}
}
27.
//onerror 事件
<html><head>
<script type="text/javascript">
//当出现错误时触发onerror事件
onerror=handleErr;
var txt=""
function handleErr(msg,url,l){
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
function message(){
adddlert("确定吗?")
}
</script>
</head><body>
<input type="button" value="查看消息" onclick="message()" />
</body></html>
28。
//JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
例如:
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
29。
//javascript注意事项
1。JavaScript 对大小写敏感
2。JavaScript 会忽略多余的空格
3。在编写代码时可以使用反斜杠进行换行
例:
document.write("Hello \
World!");
(二)
1．
//使用变量的属性
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
2。
//把字符串中的所有字母都被转化为大写字母。
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
3。
//js中个变量添加超链接
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>超链接为:
" + txt.link("http://www.w3school.com.cn") +
"</p>")
</script>
4。
//indexOf方法(定位字符串中某一个指定的字符首次出现的位置。如果没有查到返回-1，区分大小写)
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />") //1
document.write(str.indexOf("World") + "<br />") //-1
document.write(str.indexOf("world")) //6
</script>
5。
//match() 方法
//使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />") //world
document.write(str.match("World") + "<br />") //null
document.write(str.match("worlld") + "<br />") //null
document.write(str.match("world!")) //world!
</script>
6。
//replace() 方法在字符串中用某些字符替换另一些字符。
var str="Visit Microsoft!"
document.write(str.replace("Microsoft","W3School"))
7.
//合并两个数组
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
(三)
1.js正则表达式(RegExp对象)
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
①test()方法
//test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
②exec()方法
//exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 菜鸟的js学习笔记
- 菜鸟学习js
- javaScript菜鸟：学习js继承后的总结（参考大师示例）
- 菜鸟学习Node.js--express（一）
- 小菜鸟的JS学习之路——No.4（数据类型 2）
- cocos-js 菜鸟学习笔记1
- JavaScript菜鸟教程学习 http://www.runoob.com/js/js-tutorial.html
- Node.js 菜鸟教程学习
- vue.js 菜鸟学习
- 菜鸟学习React Native for Android 之通讯原理分析（JS调用Native）
- 菜鸟之js事件学习
- augular.js 菜鸟学习笔记 （三）
- 菜菜鸟学习Vue.js
- 小菜鸟的JS学习之路——No.3（数据类型 1）
- augular.js 菜鸟学习笔记 （二）
- 菜鸟学习React Native for Android 之通讯原理分析（JAVA调用JS）
- javaScript菜鸟：学习js的Sort()排序的总结（参考大师示例）
- augular.js 菜鸟学习笔记 （一）
- 小菜鸟的JS学习之路——No.1（使用JS）
- 菜鸟学习Node.js--express（一）