JavaScript
来源:互联网 发布:unity3d真机调试 编辑:程序博客网 时间:2024/04/25 08:37
转载请标明出处:http://blog.csdn.net/wu_wxc/article/details/50933373
本文出自【吴孝城的CSDN博客】
现在基本上所有浏览器都支持javascript
它是一种轻量级的编程语言,可以给网页添加各种动态效果,使网页更加美观
可放在<head></head>和body></body>,一般放在<head></head>中
放在<head></head>中浏览器解析head时就会执行
放在<body></body>中页面读取到该语句时就会执行
javascript是一种区分大小写的编程语言
javascript的注释有
//单选注释/*多选注释*/
使用javascript我们可以使用<script></script>在Html页面中插入javascript代码
<script type="text/javascript">这里是javascript内容</script>type="text/javascript"是告诉浏览器,<script>中的文本内容(text)是javascript语言
也可以使用外部文件来引用,当用外部文件写js时,js文件不需要添加script标签
<script src="myjs.js"></script>javascript中每个语句用";"分隔开,";"可以不写,建议写上
变量:
声明变量用关键字:var
如:
var myVar;var myVar="javascript";var myNum=6;var myChar="name", age="20";var arr=[1, 2, 3, 4];var arr=["wu", "xiao", "cheng"];var arr=new Array("wu", "xiao", "cheng");var arr=new Array();arr[0]=20;arr[1]="Hello World"'当声明一个变量,但没有赋值时,其值为“undefined”
如:
var str;当然,变量可以不声明,直接使用,但这样做并不规范,建议声明后再使用
变量名的命名:
必须以字母、下划线(_)或美元符($)开始,可以使用多个字母、数字、下划线(_)或美元符($)
但不能使用javascript关键词和javascript保留字
当声明多个变量时,用","隔开
局部变量和成员变量
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><script>var n=1;//全局变量,任何地方都可用m=2;//全局变量,任何地方都可用function fun(){var x = 1;//局部变量,当前函数可用y = 2;//全局变量,任何地方都可用,但要调用本函数才会成为全局变量}fun();alert(x)</script></body></html>函数:
javascript中定义函数的方法:
function 函数名(){函数代码;}
function是定义函数的关键字
函数名为给该函数起的名字
()括号里可以传递参数,也可以不传递参数,参数可以传递任意多个,当有多个参数时,用","分隔开
函数代码是要完成特定功能的代码
函数的调用:
函数定义好后要调用才会执行
调用方法:<script>标签内调用,Html文件内调用
在<script>中调用
<script>function demo(){代码内容;}demo();//调用函数</script>在html中调用
<script>function demo(){代码内容;}</script>//这里使用按钮来调用函数<input type="button" onclick="demo()" value="按钮">
输出:
可以使用document.write()向Html直接输出内容,输出多项内容用"+"连接
如:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript">var mystr="world"document.write("Hello"+"<br/>"+mystr);</script></head><body></body></html>
确定:
function con(){var showMessage=confirm("点击确定还是取消?");if(showMessage==true){document.write("你点击了确定");}else{document.write("你点击了取消");}}
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript">function con(){var showMessage=confirm("点击确定还是取消?");if(showMessage==true){document.write("你点击了确定");}else{document.write("你点击了取消");}}</script></head><body><input type="button" onClick="con()" value="按钮" /></body></html>点击按钮后会在页面打印出相应的内容
提问:
带文本输入框的消息对话框
prompt(str1,str2);
str1为提示的内容,不可修改
str2为输入框中提示的内容,可修改
function pro(){var showMessage=prompt("显示内容","输入内容");if(showMessage>100){document.write("你输入的内容大于100");}else{document.write("你输入的内容小于100");}}
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript">function pro(){var showMessage=prompt("显示内容","输入内容");if(showMessage>100){document.write("你输入的内容大于100");}else{document.write("你输入的内容小于100");}}</script></head><body><input type="button" onClick="pro()" value="按钮" /></body></html>
警告:
alert(字符串或变量);
如
alert("Hello World");
异常处理:
如下,
<script>function demo(){alert(message)}demo();</script>message是没有声明的,所以运行该函数时会有错误,但没胡任何提示,这时可以用try catch来捕获异常
function demo(){try{//执行的语句alert(message);}catch(err){//对错误的处理,弹出提示alert(err)}}demo();也可以用throw来捕获异常,它可以用来自定义一个错误,可以与try,catch一起使用
throw的使用
throw "输出的内容";
Javascript-DOM
DOM是文档对象模型(Document Object Model)
当页面加载时,用来访问和处理Html文档的标准方法,DOM以树结构呈现html文档中的元素属性等
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 Html
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
DOM操作Html
document.write();要注意的是不要在加载完文档后用例document.write();,这样会覆盖掉该文档
寻找元素:
通过ID找到Html元素
<p id="pid">原来内容</p><script>function demo(){var n=document.getElementById("pid").innerHTML="新内容";}</script><button onclick="demo()">按钮</button>通过标签名找到Html元素,当有多个同样的标签名时,只会执行第一个
<script>function demo(){document.getElementsByTagName("button");alert("通过标签名找到")}</script><button onclick="demo()">按钮</button>attribute,用来获得标签的属性值
<a id="aid" href="http://www.google.com">谷歌</a><button onclick="demo()">下次点击"谷歌时将跳转到www.wuxiaocheng.cn"</button><script>function demo(){document.getElementById("aid").href="http://www.wuxiaocheng.cn";}</script>DOM操作CSS:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style >.c{background: red;}</style></head><body><div id="divid" class="c">Html</div><button onclick="demo()">按钮</button><script>function demo(){/* 通过ID用javascript修改CSS样式*/document.getElementById("divid").style.background="blue";}</script></body></html>
- Javascript
- JavaScript
- javascript
- javascript
- javascript
- javascript
- javascript
- JavaScript
- javascript
- JavaScript
- Javascript
- javascript
- javascript
- JavaScript
- javascript
- javascript
- JavaScript
- javascript
- 大数据量高并发访问的数据库优化方法
- 创建第一个Spring MVC程序helloworld
- 公告 我的另外一个博客
- 别傻了,人家离职你也离
- Flexpaper播放swf的问题
- JavaScript
- Java单例你所不知道的事,与Volatile关键字有染
- CAS Server 如何连接WebService验密
- HDU 4766 模拟退火(最小圆覆盖) + 二分
- 随机数
- 计算某一个字符串中的大小写与其它字符
- IndentationError: unindent does not match any outer indentation level
- zjnu 1744 EKSPLOZIJA(模拟栈)
- lua 调用.so 和 require 使用