JavaScript 基础
来源：互联网 发布：网络推广招聘 编辑：程序博客网 时间：2024/06/07 00:06
Hello, JavaScript !
<!DOCTYPE HTML><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hello, JavaScript!</title></head><body> <p id="p1">我是第一段文字</p> <p id="p2">我是第二段文字</p> <script type="text/javascript"> document.write("hello, JavaScript!"); document.getElementById("p1").style.color="blue"; document.getElementById("p2").style.color="red"; </script></body></html>运行效果：
我是第一段文字
我是第二段文字
hello,JavaScript!
HTML引用JS：
- 在HTML中添加由JavaScript标签包裹的JS代码：
<script type="text/javascript">... ...</script>- HTML引用独立的JS文件：
<!-- index.html --><script src="zms.js"></script>// zms.jsdocument.write("Hello, JavaScript!");这样JS代码就直接运行了。
注意：
- 可以将JavaScript代码放在html文件中任何位置，一般放在网页的head或者body部分。
- 放在head部分:最常用的方式是在页面中head部分放置script元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
- 放在body部分:JavaScript代码在网页读取到该语句的时候就会执行。
- 也就是说， javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
每行语句的末尾一般加上分号，也可不加。不过用分号结束的话，可以在同一行写多条语句。
注释
单行：//
多行：/* */
变量
定义变量：
var 变量名
命名规则：
- 变量必须使用字母、下划线(_)或者美元符($)开始。
- 然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
- 不能使用JavaScript关键词与JavaScript保留字。
注意：
- 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
- 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
判断语句(if…else)
<script type="text/javascript"> var score =80; //score变量存储成绩，初值为80 if(score>=60){ document.write("很棒，成绩及格了。"); } else { document.write("加油，成绩不及格。"); } </script>函数
基本语法：
function handleTask(){ var number = 5; alert("number is" + number);}函数定义好，需要在对应的地方调用才会执行：
<form> <input type="button" value="点击" onclick="handleTask()" /> </form>警告
<script type="text/javascript">alert("hello, javascript !");</script>会出现一个带有确认按钮的信息提示框。
注意：
- 在点击对话框”确定”按钮前，不能进行任何其它操作。
- 消息对话框通常可以用于调试程序。
- alert输出内容，可以是字符串或变量，与document.write 相似。
确认（confirm 消息对话框）
<script type="text/javascript"> var mymessage=confirm("你喜欢JavaScript吗?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能强大，要学习噢!"); }</script>注意:
提问（prompt 消息对话框）
弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法:
prompt(str1,str2);参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
- 点击确定按钮，文本框中的内容将作为函数返回值
- 点击取消按钮，将返回null
示例:
var name=prompt("请输入你的姓名:","默认值");if(name!=null) { alert("你好"+name); }else { alert("你好."); }打开新窗口（window.open）
语法：
window.open(<URL>, <窗口名称>, <参数字符串>)参数说明：
URL：打开窗口的网址或路径。
窗口名称：被打开窗口的名称。可以是”_top”、”_blank”、”_selft”等。
参数字符串：设置窗口参数，各参数用逗号隔开。
参数字符串：
参数取值说明topNumber窗口上边距leftNumber窗口左边距widthNumber窗口宽度heightNumber窗口高度menubaryes,no是否有菜单toolbaryes,no是否有工具条scrollbarsyes,no是否有滚动条statusyes,no是否有状态栏示例：
<script type="text/javascript"> function Wopen(){ window.open('http://blog.csdn.net/zhoumushui','_blank','width=600,height=400,top=100,left=0'); } </script>关闭窗口（window.close）
window.close(); //关闭本窗口<窗口对象>.close(); //关闭指定的窗口示例：
<script type="text/javascript">// 将新打的窗口对象，存储在变量mywin中var mywin=window.open('http://blog.csdn.net/zhoumushui'); mywin.close();</script>编程练习
<!DOCTYPE html><html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> function openWindow() { // 通过输入对话框，确定打开的网址，默认为 http：//www.zms.com/ var myurl = prompt("输入要打开的网址", "http://www.zms.com") // 新窗口打开时弹出确认框，是否打开 var wantopen = confirm("确认打开" + myurl + "?"); if (wantopen) { //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。 window.open(myurl, '_blank', 'width=400,height=500,menubar=no,toolbar=no'); }} </script> </head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body></html>···················· 低调的分割线 ····················
DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。2. 文本节点:向用户展示的内容，如<li>...</li>中的文本。3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.zms.com"。通过ID获取元素
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>document.getElementById</title></head><body><p id="con">JavaScript</p><script type="text/javascript"> var mychar= document.getElementById("con"); ; document.write("结果:"+mychar); //输出获取的P标签。 </script></body></html>运行结果：
JavaScript
结果:[object HTMLParagraphElement]
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法：
Object.innerHTML示例代码：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>innerHTML</title></head><body><h2 id="con">javascript</H2><script type="text/javascript"> var mychar= document.getElementById("con"); document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML= "Hello world!"; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容</script></body></html>改变 HTML 样式
语法：
Object.style.property=new style;基本属性表（property）:
属性描述backgroundColor背景颜色height高度width宽度color文本颜色font字体fontFamily字体系列fontSize字体大小
示例代码：
<p id="pcon">Hello World!</p><script> var mychar = document.getElementById("pcon"); mychar.style.color="white"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue";</script>显示和隐藏（display属性）
语法：
Object.style.display = valuevalue取值：
取值说明 none隐藏 block显示（块级元素）
示例代码：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>display</title> <script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display = "none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display = "block"; } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form></body> </html> 控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
示例代码：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>className属性</title><style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style></head><body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script></body></html>编程练习
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;}p{ line-height:18px; text-indent:2em;}</style></head><body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮，执行相应操作，为按钮添加相应事件--> <input type="button" value="改变颜色" onclick="changeColor()"> <input type="button" value="改变宽高" onclick="changeSize()"> <input type="button" value="隐藏内容" onclick="hideContent()"> <input type="button" value="显示内容" onclick="showContent()"> <input type="button" value="取消设置" onclick="resetStyle()"> </form> <script type="text/javascript"> var txtObject = document.getElementById("txt");//定义"改变颜色"的函数function changeColor(){ txtObject.style.color="#00bb77";}//定义"改变宽高"的函数function changeSize(){ txtObject.style.width="255px"; txtObject.style.height="255px";}//定义"隐藏内容"的函数function hideContent(){ txtObject.style.display="none";}//定义"显示内容"的函数function showContent(){ txtObject.style.display="block";}//定义"取消设置"的函数function resetStyle(){ var isconfirm = confirm("取消设置？"); if(isconfirm){ txt.removeAttribute('style'); }} </script></body></html> 0 0
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- javascript基础
- JavaScript基础
- javascript基础
- javascript基础
- Javascript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- javascript基础
- SAT数学：练习题一道
- FMDB官方使用文档 G-C-D的使用 提高性能（翻译）
- 关于intelliJ idea14.1创建servlet提示cannot resolve symbol‘servlet’的问题
- LeetCode OJ 之 Copy List with Random Pointer（复制含有随机指针的链表）
- HEVC 学习简介
- JavaScript 基础
- gcc 参数 -fprofile-arcs -ftest-coverage作用
- C++9.3.5容器大小的操作
- JFileChooser (Java Swing提供的文件选择对话框)
- 一分钟掌握Android spinner下拉框
- 非计算机专业无实习项目相关性不大怎么拿到 BAT offer?
- 数字取值，精确到小数点后n位
- iOS zbar扫描二维码
- 精通 Groovy
