菜鸟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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
jQuery选择器全面总结
Jan 06 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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函数常用用法小结
2010/02/08 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Python中集合类型(set)学习小结
2015/01/28 Python
python 全局变量的import机制介绍
2017/09/07 Python
分享6个隐藏的python功能
2017/12/07 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
用Python解决x的n次方问题
2019/02/08 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python3.6编写的单元测试示例
2019/08/17 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
教育教学工作反思
2016/02/24 职场文书