javaScript基础案例
2014-08-08 20:43
204 查看
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
javascript可以向HTML中输入内容
同时可以使用javascript响应某些事件
javaScript还可以修改HTML中的文本和文本样式
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id)
方法。
相应的HTML标签需要使用id属性标识。
如果向HTML中写入的文本较长,可以使用反斜杠对文本进行换行。
例如:
JavaScript变量声明统一使用var进行声明。
例如:
JavaScript只支持一种数字类型,可以是整数,也可以是小数。
JavaScript支持函数的定义,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包围在花括号之间的代码块,前面使用function关键字定义。
例如:
再看赋值运算符,x = 10,y=5
比较运算符,给定x=5
逻辑运算符
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
javascript可以向HTML中输入内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> document.write("使用javascript向HTML中写入文本信息!"); </script> <title>向HTML写入</title> </head> <body> </body> </html>
同时可以使用javascript响应某些事件
<pre name="code" class="html" style="line-height: 18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <input type = "button" onclick="alert('弹窗测试!')" value = "按钮"></input> </body> </html>
javaScript还可以修改HTML中的文本和文本样式
<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function changeText(){ x = document.getElementById("demo"); x.innerHTML = "修改内容"; } function change2(){ y = document.getElementsByTagName("p"); y.item(0).innerHTML = "第一个p标签"; y.item(1).innerHTML = "第二个p标签"; } function changecss(){ z = document.getElementById("demo"); z.style.color = "#000000"; } </script> <style type="text/css"> #demo{color:#900}; </style> <title>修改HTML内容</title> </head> <body> <p id="demo">测试能否修改HTML内容</p> <p>测试p标签</p> <input type="button" value="按钮1" onclick="changeText()" /> <input type="button" value="按钮2" onclick="change2()" /> <input type="button" value="按钮3" onclick="changecss()" /> </body> </html>
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id)
方法。
相应的HTML标签需要使用id属性标识。
如果向HTML中写入的文本较长,可以使用反斜杠对文本进行换行。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试文档</title> <script type="text/javascript"> document.write("Hello \ world"); </script> </head> <body> </body> </html>JavaScript对大小写敏感,即y和Y是不同的变量。在书写JavaScript代码时一定要注意这一点。
JavaScript变量声明统一使用var进行声明。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试文档</title> </head> <body> <p id="demo"></p> <script type="text/javascript"> var text = "声明字符串变量!"; document.getElementById("demo").innerHTML = text; </script> </body> </html>变量申明也可以多条同时声明,变量之间用“,”隔开
var name="Gates", age=56, job="CEO";JavaScript支持多种数据类型,包括:字符串、数字、数组、布尔型、NULL和Undifined
JavaScript只支持一种数字类型,可以是整数,也可以是小数。
JavaScript支持函数的定义,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包围在花括号之间的代码块,前面使用function关键字定义。
function functionname() { 这里是要执行的代码 }函数定义时同时可以传递参数,多个参数之间使用“,”分隔。
function myFunction(var1,var2) { 这里是要执行的代码 }函数调用时,直接调用函数名即可。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试文档</title> <script type="text/javascript"> function test(name,age){ alert("姓名:"+name+" 年龄:"+age); } </script> </head> <body> <input type="button" value="弹窗测试" onclick = "test('小明',12)"/> </body> </html>对于带返回值的函数,我们可以通过return关键字返回指定的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试文档</title> <script type="text/javascript"> function test(){ var a = 5; return a; } var myvar = test(); document.write(myvar); </script> </head> <body> </body> </html>JavaScript支持多种运算符,假定y=5
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
+ | 加 | x=y+2 | x=7 |
- | 减 | x=y-2 | x=3 |
* | 乘 | x=y*2 | x=10 |
/ | 除 | x=y/2 | x=2.5 |
% | 求余数 (保留整数) | x=y%2 | x=1 |
++ | 累加 | x=++y | x=6 |
-- | 递减 | x=--y | x=4 |
运算符 | 例子 | 等价于 | 结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | x==8 为 false |
=== | 全等(值和类型) | x===5 为 true;x==="5" 为 false |
!= | 不等于 | x!=8 为 true |
> | 大于 | x>8 为 false |
< | 小于 | x<8 为 true |
>= | 大于或等于 | x>=8 为 false |
<= | 小于或等于 | x<=8 为 true |
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
相关文章推荐
- 05 JavaScript基础之--数组小案例
- 07 JavaScript基础之--数组案例(下)
- JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)
- JavaScript基础 鼠标事件案例
- 06 JavaScript基础之--数组案例(上)
- JavaScript基础案例实现
- [置顶] javascript入门基础小案例-----按键盘的方向键来控制块的移动z注释:
- JavaScript基础 鼠标事件案例
- javaScript--数组基础
- javascript基础知识
- javascript基础知识
- javascript基础的动画教程,直观易懂
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->add 函数
- JavaScript的继承(Ajax基础教程)
- javascript基础的动画教程,直观易懂
- AJAX基础:JavaScript中类的实现
- JavaScript基础知识
- JavaScript基础知识总结
- javascript基础知识
- 关于javascript的基础知识