JavaScript学习笔记（第二天）

时间：2022-01-04 16:32:22

今天我们继续学习Javascript。

Js运算符

js运算符感觉跟java一样，其实没什么好讲。

1算术运算符：
JavaScript学习笔记（第二天）

加减乘除，递增递减。一样一样。

2赋值运算符：

JavaScript学习笔记（第二天）

还是跟java一样，略过。

关于+运算符提一下，其实也跟java一样，可以做加法运算，也可以连接两个字符串。当然，跟java不一样的是当数字跟字符串进行加法运算，结果是做字符串的拼接。

3一元运算符：

delete：删除对象属性或者方法引用。

举个列子：

    <script>
var o=new Object();
 o.name="David";
 alert(o.name);
delete o.name;
 alert(o.name);
</script>

定义一个对象o以及其属性name，先弹出name，然后删除name属性，在弹出。

结果：第一个弹窗弹出undefined

js验证

js验证一般是对form表单进行验证，验证内容其实跟android登陆一样，是否为空，格式是否正确等等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js验证</title>
<script>
function validate_required(field,txt) {
with(field){
if(value==null||value==""){
 alert(txt);
return false;
 }
 }
 }
function validate_form(thisform) {
with (thisform){
if(validate_required(email,"Email must be filled out!")==false){
 email.focus();
return false;
 }
 }
 }
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
             Email:<input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

这里以一个例子来讲述我的理解。定义两个带参函数validate_required，validate_form。

validate_required函数参数分别为一个对象和字符串，通过with方法来引用field对象的value属性，进行非空判断，如果为空弹出txt，返回false。

validate_form函数传入表单对象，通过with方法来引用表单对象的email属性，调用validate_required方法传入email对象以及字符串，如果为false，让email获取焦点，返回false

在标签中创建一个form表单。action表示提交动作，一般会使用服务器脚本来处理提交表单。

onsubmit等号右边可以理解为一个函数，在web开发中onsubmit必须有2返回值，返回true允许提交表单，返回false则不允许提交表单，说明提交的表单有问题。

是最重要的表单元素，type=txt表示输入框，名称是email，size是输入长度。type=”submit”则表示为提交按钮。

实际效果，点击submit会弹出Email must be filled out!，然后email输入框获取焦点。

下面来一个完整的邮箱验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js验证</title>
<script>
function validate_required(field,txt) {
with(field){
if(value==null||value==""){
 alert(txt);
return false;
 }else {
var apos=value.indexOf("@");
var dot=value.lastIndexOf(".");
if(apos<1||dot-apos<2){
 alert(txt)
return false;
 }else {
return true;
 }
 }
 }
 }
function validate_form(thisform) {
with (thisform){
if(validate_required(email,"Email must be filled out!")==false){
 email.focus();
return false;
 }else {
 alert("输入正确");
 }
 }
 }
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
             Email:<input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>

在前面的基础上稍加修改，添加一些对邮箱的验证逻辑，如果包含@，和点，且@的坐标应该大于1，点的坐标应该比@坐标大2，验证结果

JavaScript学习笔记（第二天）

反之，

JavaScript学习笔记（第二天）

JavaScript HTML DOM

通过上面的一翻学习，我们会思考如何操作HTML中那么多的标签，那就是通过HTML DOM 来访问的。
先来看一下HTML DOM（文档对象模型）的结构

JavaScript学习笔记（第二天）

其实这些就是html中的结构标签头部，内容区域等

js能够做什么？js能够改变页面所有的html元素，属性，css，以及各种事件，例如点击事件。

查找HTML元素

1：通过id查找

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
<p id="name">张三</p>
<script>
var x=document.getElementById("name");
 document.write("元素值为："+x.innerHTML);
 alert(x.innerHTML);
</script>
</body>
</html>

通过id=name找到p标签里的内容

2通过标签名找html元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签名查找HTMl元素</title>
</head>
<body>
<div id="main">
<p>通过标签名查找HTMl元素1</p>
<p>通过标签名查找HTMl元素2</p>
<p>通过标签名查找HTMl元素3</p>
<p>通过标签名查找HTMl元素4</p>
</div>
<div id="main2">
<p>通过标签名查找HTMl元素</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
 alert(y[0].innerHTML);
</script>
</body>
</html>

这里只讲为啥y是数组，因为div标标签下可以包含多个标签。

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1改变HTML输出流。

通过document.write(）；来写入内容

2改变html内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变 HTML 输出流</title>
<script>
function aa() {
 document.getElementById("p1").innerHTML="Hello world";
 }
</script>
</head>
<body onload="aa()">
<p id="p1">ni hao !</p>
<script>
 document.write(Date());
</script>
</body>
</html>

3改变html属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变html属性</title>
<script>
function aa() {
 document.getElementById('t1').type="button";
 document.getElementById('img').src="img/SAM_0371.JPG";
 }
</script>
</head>
<body onload="aa()">
<form name="form" onload="aa()">
<input type="text" id="t1">
<input type="button" id="btn">
</form>
<img src="img/SAM_0384.JPG" id="img">
</body>
</html>

改变 HTML 样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变 HTML 样式</title>
<script>
function aa() {
 document.getElementById("p1").style.color='red';
 }
</script>
</head>
<body onload="aa()">
<p id="p1">aaaaaa</p>
</body>
</html>

查找id為p1的標簽，改變樣式style中color為紅色。

可以這麽寫：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变 HTML 样式</title>
<script>
function aa() {
var x=document.getElementById("p1");
 x.style.color='red';
 x.style.backgroundColor='blue';
 }
</script>
</head>
<body onload="aa()">
<p id="p1">aaaaaa</p>
</body>
</html>

所以學習的時候可以發散了一下。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

通過對onlick=“函數”來處理點擊事件。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>
<script>
function aa() {
 alert("謝謝點擊");
 }
</script>
</head>
<body>

<img src="img/SAM_0371.JPG" onclick="aa()">
</body>
</html>

效果：點擊圖片，彈出彈窗

JavaScript学习笔记（第二天）

點擊修改元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>
<script>
function aa() {
 alert("謝謝點擊");
 }
function bb() {
 document.getElementById('p1').innerHTML="謝謝點擊";
 }
</script>
</head>
<body>

<!--<img src="img/SAM_0371.JPG" onclick="aa()">-->
<p id="p1" onclick="bb()">Hello wrold</p>
</body>
</html>

有參函數

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>
<script>
function aa() {
 alert("謝謝點擊");
 }
function bb() {
 document.getElementById('p1').innerHTML="謝謝點擊";
 }
function cc(a) {
 a.innerHTML='shui jiao le '
 }
</script>
</head>
<body>

<!--<img src="img/SAM_0371.JPG" onclick="aa()">-->
<!--<p id="p1" onclick="bb()">Hello wrold</p>-->
<p id="a" onclick="cc(this)">dian wo shi shi </p>
</body>
</html>

通過點擊事件修改標簽屬性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 事件属性</title>
<script>
function aa() {
 document.write(Date())
 }
</script>
</head>
<body>
<button onclick="aa()">dian ji wo</button>
</body>
</html>

onload 和 onunload 事件

分別在進入和退出頁面時被觸發。可用與處理cookie

onchange 事件

類似與android中對edittext輸入内容的監聽，儅輸入内容發生變化時調用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 事件属性</title>
<script>
function aa() {
 document.write(Date())
 }
function bb(a) {
 a.value++;
 }
</script>
</head>
<body>
<button onclick="aa()">dian ji wo</button>
<input type="text" id="txt" onchange="bb(this)">
</body>
</html>

每次改變内容+1。

onmouseover 和 onmouseout 事件與onmousedown、onmouseup

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。onmousedown鼠標點下，onmouseup鼠標擡起，跟onlick一起用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onfocus事件</title>
<script>
function aa(a) {
 a.style.backgroundColor='red';
 }
</script>
</head>
<body>
<input type="text" onfocus="aa(this)">
<p onmousedown="style.backgroundColor='red'" onmouseup="style.backgroundColor='blue'">onmousedown 和 onmouseup</p>
<p onmouseout="style.backgroundColor='red'" onmouseover="style.backgroundColor='blue'">onmouseout 和 onmouseover</p>
</body>
</html>

onload事件：

頁面加載結束調用

onfocus事件
獲取焦點時調用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onfocus事件</title>
<script>
function aa(a) {
 a.style.backgroundColor='red';
 }
</script>
</head>
<body>
<input type="text" onfocus="aa(this)">
</body>
</html>

獲取焦點時改變背景色。

十二點多了，睡覺！！！！
标签：

相关文章