菜鸟javascript基础整理1


Posted in Javascript onDecember 06, 2010

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!");

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
实例解析Array和String方法
Dec 14 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
js事件触发操作实例分析
Jun 21 Javascript
js 上传图片预览问题
Dec 06 #Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 #Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 #Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 #Javascript
jquery实现心算练习代码
Dec 06 #Javascript
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
linux下php上传文件注意事项
2016/06/11 PHP
根据配置文件加载js依赖模块
2014/12/29 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python中无限元素列表的实现方法
2014/08/18 Python
python轻松实现代码编码格式转换
2015/03/26 Python
Python中分数的相关使用教程
2015/03/30 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
预备党员政审材料
2014/02/04 职场文书
小学教师寄语大全
2014/04/03 职场文书
学校宣传标语
2014/06/18 职场文书
教师党员个人自我评价
2015/03/04 职场文书
实习感想范文
2015/08/10 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书