JAVAScrip 介绍 DOM对象 BOM对象
来源:互联网 发布:进销存哪个好 知乎 编辑:程序博客网 时间:2024/06/16 10:17
1. JavaScript的概述
是基于对象和事件驱动的语言,应用于客户端(浏览器)
解释: 对象的概念的源于java,但是java 需要自己去创建,但是在JS的编程中已经提供的许多对象 比如有 Array Boolean Date Math Number String RegExp 等对象 ,类如还有BOM对象 Window Location Screen 等对象的存在
特点
- 安全性 目前我还没有看出到底怎么安全
- 跨平台 (多个浏览器都可用支持)
- 互动性 (就是可用看到被)
JS的引入方式 (2种)
第一种方式
<script type="text/javascript" src="js文件的路径"></script>
第二种方式<script type="text/javascript" >自己去写函数</script>
2. JS的语法介绍
基本语法
定义的变量是区分大小的 类型统一var变量 因为是属于弱类型语言 var aa=”aaa”; //分号有无都可以
在定义变量的 只能以 字符 下划线 $ 开头
数据类型
1.Undefined
定义的一个变量但是没有赋值 var a;
2.String3.Boolean
4.Number
5.Null
表示的代表引用的对象位空 var a= null;
类型转换
1.Boolean (Value)
2.Number(Value)
parseInt(Value) parseFloat(value) 都可以转为数字类型
3.String(Value) 都可以转换为指定的类型
注意事项 : 在执行类型转换的时候
比如 Boolean类型进行加减 是0 或者1 的运算
比如 字符串跟数字 进行比较的时候 将字符串转数字 如果字符串不是数字显示的NaN
比如 对象跟字符串 进行比较的时候 将对象转数字
运算符注意事项
==和===区别
==比较的是值
=== 比较的是值和类型
逻辑运算判断代码示例
(1)if 语句 * 代码 //if语句 var a = 10; if(a==10) { alert("10"); } else { alert("other"); } (2)switch语句 * 在java里面 switch(a) { case 10: break; case 20: break; default: .... } * 代码 var b = 5; switch(b) { case 4: alert("4"); break; case 5: alert("5"); break; default: alert("other"); } (3)while循环语句 * 代码 //while语句 var i = 4; while(i<6) { alert(i); i++; } (4)for循环语句 * 代码 //for语句 for(var i=0;i<3;i++) { alert(i); }
常用的事件
onclick :鼠标单击事件
ondblclick :鼠标双击事件
onmouseover :鼠标悬停事件
onmousemove :鼠标移动事件
onmouseout :鼠标离开事件
onkeyup :键盘抬起事件
onload :页面加载事件
onfocus :获得焦点事件
onblur :失去焦点事件
onchange :下拉列表改变事件
onsubmit :表单提交事件
事件的用法 (3种)
(1)使用事件属性 调用 JS方法
<input type="button" value="第一种方式" onclick="add1();"/>
(2) 使用事件属性获取标签ID,调用事件属性
document.getElementById("buttonid").onclick = add1;
(3) 获取事件属性标签id,自己写function
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
JavaScript 函数定义
**第一种匿名函数**var sum = function( ){}**第二种函数**function fun(var par) {}使用对象定义函数var pp = new function(“参数1”,”参数2”,”方法体”);
JS种的全局函数
1. eval( )将字符串转为js代码执行
var str = “alert(‘123456’);”;
//alert(str);
eval(str);
2. isNaN ( )检查某个值是否为数字
如果是数字返回 false,如果不是一个数字返回 true。
3. encodeURI() 把字符串编码为 URI
var str2 = “abc测试中文”;
var encodestr2 = encodeURI(str2);
4. decodeURI() 解码某个编码的 URI
var decodestr2 = decodeURI(encodestr);
Document对象
document代表整个文档对象
使用方法案例
第一种
document.write("aa");
第二种
var input1 = document.getElementById("textid");
document.write(input1.value);
第三种
getElementsByName(): 根据标签里面name属性的值得到标签对象,返回数组
var inputs1 = document.getElementsByName(“name1”);
alert(input1.value);
第四种
innerHTML属性不是dom里面属性
var span1 = document.getElementById(“spanid”);
alert(span1.innerHTML);
表单的提交
第一种方式 正常表单提交
<form method="get"> username: <input type="text" name="username"/> <br/> password: <input type="password" name="password"/> <br/> <input type="submit" value="提交" /> </form>
第二种方式
通过button的点击事件提交
<head> <meta charset="UTF-8"> <title>ddd</title> <script type="text/javascript"> function form01() { //得到form标签 var form01 = document.getElementById("form01"); //提交form表单 form01.submit(); alert("ni") } </script> </head> <body> <form id="form01" method="get"> username: <input type="text" name="username"/> <br/> password: <input type="password" name="password"/> <br/> <input type6="button" value="提交" onclick="form01()"/> </form>
表单校验提交
表单提交的校验基于 input type=”submit” value=”提交”
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function pp(){ var username = document.getElementById("usernameID").value; var password = document.getElementById("passwordID").value; alert(password); if(password != "" && username != "" ) alert("数据可以提交"); return true; }else { alert("数据不能提交"); return false; } </script> </head> <body> <form method="get" action="#" onsubmit="return pp();"> username: <input type="text" id="usernameID" name="username"/> <br/> password: <input id="passwordID" type="password" name="password"/> <br/> <input type="submit" value="提交"/> </form> </body>
Window 常用的一些方法
· window.location="http://www.baidu.com"; window.open(); //打开一个新的界面 // 确认框 var flag = window.confirm("您确定要删除该记录吗?"); history.go(-1); //返回上前一页 window.setTimeout("alert('hello')",3000); window.setInterval("alert('hello')",5000); window.clearInterval(); window.clearTimeout();
- JAVAScrip 介绍 DOM对象 BOM对象
- 内置对象 DOM BOM
- Bom和Dom对象
- BOM对象和DOM对象
- 15.BOM&DOM-Window对象
- 16.BOM&DOM-History对象
- 17.BOM&DOM-Location对象
- 18.BOM&DOM-Document对象
- JavaScript中的BOM对象和DOM对象
- JavaScript对象,BOM对象,DOM对象速查手册
- javaScript中的对象、BOM、DOM知识点总结
- JavaScript、ECMAScript、DOM和BOM对象
- JavaScript进阶(对象、BOM、DOM、事件)
- DOM对象介绍
- DOM对象介绍
- 常用dom对象介绍
- DOM(一)-05-(BOM&Navigator对象&History对象)
- document对象(dom)和window对象(bom)
- Android Studio 单元测试之简单版
- 95后实习生的远程办公体验(asp.net mvc-C#技术栈)
- thinkphp 中__construct与_initialize()的区别
- JS小数精度加减法
- 小白学分布式程序开发8-二阶段提交的缺点
- JAVAScrip 介绍 DOM对象 BOM对象
- Bellman-Ford(最短路)
- 【数学分析】Codeforces Round #426(Div.2)C[The Meaningless Game]题解
- zte me3xxx 4g调试
- 一个m*n的矩阵,从左到右从上到下都是递增的,给一个数x,判断x是否在矩阵中。
- SVN客户端重新设置用户名和密码
- 新三峡艺术采风团摄制组走进汪国新湖北诗书画院
- Object-C 内存管理
- CoreData编译报错