菜鸟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编程起步(第四课)
Feb 27 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
vue编写简单的购物车功能
Jan 08 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 批量删除 sql语句
2009/06/05 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python reques接口测试框架实现代码
2020/07/28 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
初一体育教学反思
2014/01/29 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书