菜鸟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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 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
终于听上了直流胆调频
2021/03/02 无线电
香妃
2021/03/03 冲泡冲煮
PHP+DBM的同学录程序(1)
2006/10/09 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
ajax异步请求详解
2017/01/06 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python结合API实现即时天气信息
2016/01/19 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
opencv python图像梯度实例详解
2020/02/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
机电系毕业生求职信
2014/07/11 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python的这些库,你知道多少?
2021/06/09 Python