WEB程序设计之javascript
来源:互联网 发布:威海博优化纤 编辑:程序博客网 时间:2024/04/29 10:44
WEB程序设计之javascript
一、javascript的使用
1、在页面中放置javascript脚本方法
1)将javascript脚本放置在<script> 与 </script> 标签之间,script标签可以放置在页面任何地方,但通常我们会放置在页头或页脚中。
2)外部javascript:将脚本保存为单独的javascript文件(扩展名为js),然后通过<script src='js'文件位置></script>来将脚本引入页面。要注意外部脚本不能包含 <script> 标签
2、注意事项:
1)每句后面使用分号结束
2)大小写敏感
二、变量
1、声明
javascript变量可以不声明直接使用,但是使用前先声明,将是一个良好的习惯。
var username; //声明后未赋值的变量,其值为undifined
如果重复声明变量,该变量的值不会丢失
2、变量作用域
全局变量:在函数外声明的变量是全局变量或在函数内没有用var声明的变量,网页上的所有脚本和函数都能访问它。
局部变量:在函数内声明的变量(使用var)是局部变量,只能在函数内部访问它。
3、变量的生存期
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
4、运算符
+ 字符串连接,如果把数字与字符串相加,结果将成为字符串。
==等于,值相等即为true
===全等,值相等,类型相同才为true
五、数据类型
javascript是弱类型语言,变量具有动态类型
1、undefined:表示变量不含有值,未声明的变量或者用var声明但未初始化的变量
2、null:空,可以将变量的值设置为null来清空变量
3、数字:isNaN()判断是否为数值、parseInt()、parseFloat()
4、布尔:true(非空字符串、非零数值、非空对象)、false(空字符串、0、null和undefined)
5、字符串:使用单引号或双引号包括
六、String对象
属性:
length:字符串长度
方法:
charAt(index):返回指定位置的字符
indexOf(searchvalue,fromindex):返回某个指定的字符串值在字符串中首次出现的位置,未找到返回-1
lastIndexOf(searchvalue,fromindex):反向检索
replace(regexp/substr,replacement):在字符串中用一些字符替换另一些字符
split(separator,howmany):把一个字符串分割成字符串数组
substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
toLowerCase():把字符串转换为小写
toUpperCase():把字符串转换为小写
七、数组
1)创建数组
<span style="font-family:FangSong_GB2312;font-size:18px;"> var city=new Array(); city[0]='北京'; city[1]='上海'; city[2]='广州';</span>
<span style="font-family:FangSong_GB2312;font-size:18px;">var city=new Array('北京','上海','广州');</span>
<span style="font-family:FangSong_GB2312;font-size:18px;"> var city=['北京','上海','广州'];</span>
2)增加数组元素:使用"[ ]"运算符置顶一个新下标
(1)push() :在数组末尾添加元素
(2)unshift():在数组头部添加元素
(3)concat():合并数组
3)删除数组元素:delete 数组名[下标];
(1)pop() : 删除并返回数组最后一个元素
(2)shift():删除并返回数组第一个元素
3)遍历数组
(1)for(var i=0;i<arr.length;i++){}
(2)for(var 数组元素变量 in 数组)
4)获取数组片段
slice(start,end):从数组中返回选定的元素
splice() :方法向/从数组中添加/删除项目,然后返回被删除的项目
删除任意数量的项:splice(要删除的起始下标,要删除的项数)
在指定位置插入指定的项:splice(起始下标, 0 , 要插入的项)
替换任意数量的项:splice(起始下标, 要删除的项数 , 要插入的项)
5)其他
join(separator):把数组中的所有元素放入一个字符串
reverse() : 颠倒数组中元素的顺序
sort(sortby): 方法用于对数组的元素进行排序。
八、对象
<span style="font-family:FangSong_GB2312;font-size:18px;">var stu={id:"20120101", name:"胡悦"};</span>
九、javascript的使用
1、在页面中放置javascript脚本方法
1)将javascript脚本放置在<script> 与 </script> 标签之间,script标签可以放置在页面任何地方,但通常我们会放置在页头或页脚中。
2)外部javascript:将脚本保存为单独的javascript文件(扩展名为js),然后通过<script src='js'文件位置></script>来将脚本引入页面。要注意外部脚本不能包含 <script> 标签
2、注意事项:
1)每句后面使用分号结束
2)大小写敏感
十、网页特殊显示效果制作
1)改变HTML内容
- var header=document.getElementById('header');
- header.innerHTML='新内容'
2)改变HTML属性
- var img=document.getElementById('image');
- img.src='new.jpg';
3)改变HTML样式
- header.style.color='blue';
十一、浏览器对象的调用
- window.open('http://www.baidu.com');
十二、浏览器事件的触发
- var header=document.getElementById('header');
- header.onclick=function(){alert('你好!');}
- header.onmouseover=function(){header.innerHTML='鼠标移入!';}
- header.onmouseout=function(){header.innerHTML='鼠标移出!';}
十三、表单验证:
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
1) 用户是否已填写表单中的必填项目?
2)用户输入的邮件地址是否合法?
3)用户是否在数据域 (numeric field) 中输入了文本?
1、在表单的onsubmit事件中验证
- <form name="myform" action="abc.asp" method="post" onsubmit="return checkdata()">
- <label for="username">
- <input type="text" name="username" id="username" />
- </label>
- <input type="submit" value="提交">
- <input type="button" value="提交2" onclick='checkdata2()'>
- </form>
- <script>
- function checkdata(){
- with(document.myform){
- if (username.value.length==0) {
- alert('用户名不能为空!');
- username.focus();
- return false;
- }else{
- return true;
- }
- }
- }
- </script>
2、在按钮的click事件中进行验证,验证通过后使用form.submit()发送
- <input type="button" value="提交2" onclick='checkdata2()'>
- function checkdata2(){
- with(document.myform){
- if (username.value.length==0) {
- alert('用户名不能为空!');
- username.focus();
- return false;
- }else{
- myform.submit();
- }
- }
- }
常用验证:
1、必填(或必选)项目
- //if(value==null||value=="")
- if(value.length==0){
- alert('必须输入');
- }
2、长度验证
- if(value.length>50){
- alert('不能超过50个字符');
- }
3、是否全是数字
- function isNumber(String){
- var Letters = "1234567890"; //可以自己增加可输入值
- var i;
- var c;
- for( i = 0; i < String.length; i++){
- c = String.charAt( i );
- if (Letters.indexOf( c ) < 0)
- return false;
- }
- return true;
- }
4、email验证
- function isEmail(value){
- apos=value.indexOf("@")
- dotpos=value.lastIndexOf(".")
- if (apos<1||dotpos-apos<2) {
- return false}
- else {return true}
- }
- WEB程序设计之javascript
- web程序设计之javascript基础(2)
- web前端之JavaScript高级程序设计八:JavaScript 与 XML
- web前端之JavaScript高级程序设计一:变量、作用域
- web前端之JavaScript高级程序设计二:引用类型
- web前端之JavaScript高级程序设计四:函数表达式
- web前端之JavaScript高级程序设计五:客户端检测
- web前端之JavaScript高级程序设计六:事件
- web前端之JavaScript高级程序设计七:表单脚本
- web前端之JavaScript高级程序设计九:JSON
- web前端之JavaScript高级程序设计三:面向对象的程序设计
- WEB程序设计之DOM
- javascript之高级程序设计
- WEB程序设计之HTML(一)
- JavaScript程序设计之语法基础
- javascript之高级程序设计二
- JavaScript之面向对象程序设计
- WEB程序设计之web服务器与Asp
- 8 cocos2dx添加场景切换效果,控制场景切换彻底完成之后再执行动画
- 拦截器与过滤器的区别
- 实验三: 栈和队列实验
- ibatis+spring+springmvc+easyui 批量添加
- C语言开发环境设置Cook
- WEB程序设计之javascript
- java身份证验证
- C++STL::string实例化
- object-c多个对象的内存管理
- mac 使用过程中的遇到的一些问题
- 蛋蛋的问题(二)
- ImageLoader加载图片以及清理缓存
- HDU 1992 Tiling a Grid With Dominoes
- 基于thinkphp建站第二天