javaScript基础详解

2024-12-23 10:11:22

首先讲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>

运行结果如下：

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>

运行结果如下：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

浅析JS中对函数function的理解(基础篇)

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参
JS基础随笔(菜鸟必看篇)

在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示复杂数据类型:在栈内存储引用,如下图在了解以上两种数据类型的存储方式之后可以区分
JavaScript基础重点(必看)

接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法常规语法省略重点强调: 1.原始值和对象:原始值包括布
Javascript基础学习笔记(菜鸟必看篇)

什么是变量? 变量是用于存储信息的容器变量的声明语法: var 变量名变量名 = 值; 变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾数据类型在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin
js 基础篇必看(点击事件轮播图的简单实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图
JavaScript基础知识点归纳(推荐)

定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob
JavaScript基础教程——入门必看篇

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS
js基础之DOM中document对象的常用属性方法详解

-----引入每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 do
javascript基础知识讲解

本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等小试牛刀连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连
js基础之DOM中元素对象的属性方法详解

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个文档节点 . 所有的HTML元素都是元素节点所有 HTML 属性都是属性节点文本插入到 HTML 元素是文本节点注释是注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',
Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a renderer 三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

javaScript基础详解

相关推荐

随机推荐