前端开发基础javaScript的六大作用


Posted in Javascript onAugust 06, 2020

javaScript基础详解

首先讲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"> //点击这里</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=newArray(); cars[0]="Audi"; //数组表达式

var cars=["Audi","BMW","Volvo"]; //同样也是数组表达式

person=new Object(); //对象表达式

JavaScript函数

functiongetElements(){ } //可以带参数那就往里面传参(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作用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
JavaScript 基本概念
Jan 20 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 #Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 #Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 #Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
基于opencv实现简单画板功能
2020/08/02 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
志愿者活动总结报告
2014/06/27 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
心灵点滴观后感
2015/06/02 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python