JavaScript

脚本语言，可以插入进html

改变HTML内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>
id")```这个方法是 HTML DOM 中定义的。

DOM (**D**ocument **O**bject **M**odel)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

## 改变样式

```javascript
x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

验证输入

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

用法

必须位于 <script> 与 </script>之间

Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。

变量

var x=5;
//这是注释

在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。

  • **var**：ES5 引入的变量声明方式，具有函数作用域。
  • **let**：ES6 引入的变量声明方式，具有块级作用域。
  • **const**：ES6 引入的常量声明方式，具有块级作用域，且值不可变。

可以重复声明变量名，会覆盖

类型

**值类型(基本类型)**：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

你可以使用 typeof 操作符来检测变量的数据类型。

typeof

typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:’John’, age:34} // 返回 object

数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

支持不同类型在同一个数组

对象

var car = {name:"Fiat", model:500, color:"white"};
person.lastName;
person["lastName"];//可以使用两种方法访问对象属性
methodName : function() {
    // 代码 
}//创建对象方法

objectName.methodName()//访问对象方法

函数

function add(a,b){
	return a+b;
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

HTML事件

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 鼠标指针移动到指定的元素上时发生
onmouseout 用户从一个 HTML 元素上移开鼠标时发生
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

字符串

var carname = "Volvo XC60";
var carname = 'Volvo XC60';
var character = carname[7];

可以使用索引位置来访问字符串中的每个字符。

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;//计算长度
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为:

10
55
Hello5

for循环

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}
var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

break continue

label:
statements

break labelname; 
continue labelname;

表单验证

html5内置验证

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</form>

HTML5 提供了一些内置的表单验证功能，例如 required、pattern、min、max 等属性。这些属性可以简单地实现基本的表单验证。

js自定义验证

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}</script>
Property Description
checkValidity() 如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity() 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过id查找html元素

var x=document.getElementById("intro");

标签名

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

类名

var x=document.getElementsByClassName("intro");

改变HTML

改变HTML输出流

document.write(Date());

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变HTML内容

document.getElementById("p1").innerHTML="新文本!";

改变HTML内容

document.getElementById("image").src="landscape.jpg";

改变CSS

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

HTML DOM 事件

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

HTML DOM EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。击事件。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

HTML DOM元素节点

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

BOM

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
 
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

window screen

一些属性：

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

window Location

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http: 或 https:）

location.href 属性返回当前页面的 URL。

window history

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击向前按钮相同

window Navigator

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

window 弹窗

window.alert("sometext");//警告
window.confirm("sometext");//确认
window.prompt("sometext","defaultvalue");//提示

计时事件

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 在指定的毫秒数后执行指定代码。
setInterval(function(){alert("Hello")},3000);

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

document.cookie="username=John Doe";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
var x = document.cookie;//读取
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//修改
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";///删除
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}