javaScript基础详解


Posted in Javascript onJanuary 19, 2017

首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中

JavaScript的六大作用:

1直接在script输出

document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效

2对事件作出反应

<button type="button" onclick="alert('Welcome!')"> //点击这里</button>//onclick代表当点击是触发事件,alert会弹框

3改变 HTML 内容                          

x=document.getElementById("demo") //查找元素 ,通过id得到某一个元素,就像我之前做的笔记说id只能用一次所以是唯一的。
x.innerHTML="Hello JavaScript"; //改变内容,通过触发事件会是这个元素的值发生改变

4改变 HTML 图像

element=document.getElementById('myimage') //得到img这个元素
element.src="/i/eg_bulboff.gif";  //改变Src属性,也就相当于给它换了张图片

5 改变 HTML 样式

x=document.getElementById("demo") //同样通过id找到元素
x.style.color="#ff0000";  //改变样式

6 验证输入

If( isNaN(x)) {alert("Not Numeric")}; // isNaN( ) 这是一个方法,专门用来判断括号中是否全为数字,是为true

javaScript查找元素常用的三种方法(不包括jquery查找元素)

1:通过id查找;

x=document.getElementById("demo") //通过id查询是唯一的,x也是代表唯一一个元素。

2:通过name查找:

X= document.getElementsByName("myInput");//这里是ments说明他返回的是一个集合,因为name属性可以重复定义
X[0].innerHTML="Hello JavaScript";//因为是数组,所以要指定第几个,就算只有一个也要写零

3:通过元素名称查找:

var x=document.getElementsByTagName("input"); //同样也是返回一个数组
alert(x.length); //这里有几个input标签就输出几
JavaScript的注释和java是一样的有//和/* */

JavaScript变量

javaScript数据有字符串、数字、布尔、数组、对象、Null、Undefined 但统一用 var

var cars=new Array(); cars[0]="Audi"; //数组表达式
var cars=["Audi","BMW","Volvo"]; //同样也是数组表达式
person=new Object(); //对象表达式

JavaScript函数

function getElements(){ } //可以带参数那就往里面传参(var1,var2),如果要返回值return,函数类型不变

JavaScript运算符,算数运算符,赋值运算符,比较运算符,逻辑运算符,条件运算符,IF语句,Switch语句,For循环,while  do-while,Break和Continue和java规则一样(有点不同的就是for (x in person))

接下来我们做几个小案例:

1:有户名验证,两次密码判断是否一致

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML >
<html>
 <head> 
 <title>雨点的名字</title>
 </head>
 <script>
 function checkForm(){
 var form=document.forms["form1"]; //根据表单的名字 获取指定的表单,这算第四种获得元素方法
 //根据表单获得username的value值,因为下面这个username只有一个那就默认就取这一个,不用form.username[0].value这样反而报错,因为不是集合
 var username =form.username.value;
 if(username.length<3 || username.length>12){
 alert("输入的用户名不合法..."); //.length是属性所以不能括号,这和String不同
 return false;
 }
 var password1 =form.password[0].value;//因为password下面有两个所以是一个集合所以要[0];
 var password2=document.getElementsByName("password")[1].value;//这是通过另一种方法获得
 if(password1!=password2){
 
 alert("两次密码不一致..");
 return false();
 }
 return true;
 } 
 </script>
<body> 
 <!--onsubmit只在form中使用,如果返回为false则不提交数据,否则提交数据-->
 <form action="" name="form1" onsubmit="checkForm()">
 用 户 名:<input type="text" name="username"/><br><br>
 密 码:<input type="password" name="password"/><br><br>
 确认密码:<input type="password" name="password"/><br><br>
 <input type="submit" value="提交"/> <!-- 这里定义了为submit类型,当点提交时,自动触发onsubmit方法 --> 
 </form>
</body>
</html>

运行结果如下:

javaScript基础详解

2:实现一个加法的小计算器

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML >
<html>
 <head> 
 <title>雨点的名字</title>
 <style type="text/css"> 
 input{ 
 width:50px;
 } 
 </style>
 </head>
 <script>
 function calc(){
 var form1 =document.forms["form1"]; 
 var x=form1["x"].value; //获取form1表单中name属性为x的值,又一种方法(其实[]和.是有点不同的这里不细讲)
 var y=form1["y"].value;
 var z=parseInt(x)+parseInt(y); //parseInt(x)类型转换,把String转成int
 var result=form1["result"]; //得到元素
 result.value=z; //value这里插入value值,不是用innerHTML,他们的使用类型不同
 }
 </script>

<body>
 <form action=" " name="form1" method="post">
 <input type="text"name="x"/>+<input type="text" name="y"/>=<input type="text" name="result"/><br/>
 <input type="button" value="计算" onclick="calc()" /> <!-- onclick监听事件改编属性 -->
 </form>
</body>

运行结果如下:

javaScript基础详解

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue+element实现打印页面功能
May 20 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
bootstrap css样式之表单
Jan 19 #Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 #Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 #Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 #Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 #Javascript
bootstrap组件之导航组件使用方法
Jan 19 #Javascript
bootstrap输入框组件使用方法详解
Jan 19 #Javascript
You might like
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Apache如何部署django项目
2017/05/21 Python
python实战教程之自动扫雷
2018/07/13 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
大专生自荐信
2013/10/04 职场文书
调查研究项目计划书
2014/04/29 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年会计工作总结
2014/11/27 职场文书
汽车转让协议书
2015/01/29 职场文书
综合实践活动报告
2015/02/05 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
如何写辞职书
2015/02/26 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书