<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

// 此处可调用 carName 变量
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

<script>
  let text=`Nice!`;
  document.getElementById("demo").innerHTML=text;
</script>

`\`` === "`"; // true

<script>
const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
document.getElementById("demo").innerHTML = message;
</script>

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

new Date();  var today = new Date()
new Date(value); var d1 = new Date("October 13, 1975 11:13:00")
new Date(dateString); var d2 = new Date(79,5,24)
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);var d3 = new Date(79,5,24,11,33,0)

var myDate=new Date();
myDate.setFullYear(2010,0,14);// 第二个参数为月份， 0 到 11 之间的整数值，表示从一月到十二月

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>

break labelname;
continue labelname;

cars=["BMW","Volvo","Saab","Ford"];
list:
{
    document.write(cars[0] + "");
    document.write(cars[1] + "");
    document.write(cars[2] + "");
    break list;
    document.write(cars[3] + "");
    document.write(cars[4] + "");
    document.write(cars[5] + "");
}

for(var i=0; i<10; ++i)
{
    continue list;
}

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

typeof undefined    // undefined
typeof null         // object
null === undefined  // false
null == undefined   // true

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

var fruits=["banana","orange",'apple'];
document.getElementById("demo").innerHTML=checkArray(fruits);
function checkArray(Array){
  return Array.constructor.toString().indexOf("Array")>-1;
}

document.getElementById("demo").innerHTML = Array.isArray(fruits);

var myDate = new Date();
if (myDate instanceof Date) {
    console.log('myDate 是一个 Date 对象');
} else {
    console.log('myDate 不是一个 Date 对象');
}

语法：/正则表达式主体/修饰符(可选)

function myFunction(){
  var str="Visit runoob";
  var n=str.search(/Runoob/i);
  document.getElementById("demo").innerHTML=n;
}

function myFunction(){
  var str=document.getElementById("demo").innerHTML;
  var txt=str.replace(/die/i,"happy");
  document.getElementById("demo").innerHTML=txt;
}

console.log(regex.flags);

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

<script>
  var txt="";
  function message(){
    try {
      adddlert("Welcome guest!");
    }
    catch(err) {
      txt="本页有一个错误。\n\n";
      txt+="错误描述：" + err.message + "\n\n";
      txt+="点击确定继续。\n\n";
      alert(txt);
    }
  }
</script>
<input type="button" value="点击查看消息" onclick="message()"/>

<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>

<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>

<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>

function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}

var person={
    firstname:"Sherlock",
    Lastname:"Holmes",
    id:5566,
    fullname:function(){
      return this.firstname+" "+this.Lastname;
    }
  };
  document.getElementById("demo").innerHTML=person.fullname();

var x = this;
document.getElementById("demo").innerHTML = x;
//返回的结果是：[object Window]

//"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}

<body>
<button onclick="this.style.display='none'">点我后我就消失了</button>
</body>

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 

{ 
    let x = 2;
}
// 这里不能使用 x 变量

var x = 2;       // 合法
let x = 3;       // 不合法
{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误
car.color = "red";
car.owner = "Johnson"；
document.getElementById("demo").innerHTML = "Car owner is " + car.owner;

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1]

void(func())
javascript:void(func())

<body>
    <a href="javascript:void(0)">单击此处什么也不会发生</a>
</body>

<body>
<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

<script>
  setTimeout(function(){
    document.getElementById("demo").innerHTML="Messi!";
  },3000);
</script>

setTimeout(function, milliseconds);

<script>
  setTimeout(function(){
    document.getElementById("demo").innerHTML="Messi!";//子线程
  },3000);
  document.getElementById("demo2").innerHTML="MCI!";//主线程
</script>

<script src="myscript.js">

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

(function() {
  // 在这里编写函数体
})();

<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

(单一参数) => {函数声明}
单一参数 => {函数声明}

<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值

<script>
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
document.getElementById("demo").innerHTML = x;
</script>

<script>
function myFunction(arg1, arg2) {
	this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

<script>
var myObject;
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);    // 返回 20
document.getElementById("demo").innerHTML = myObject; 
</script>

<script>
  var add=(function(){
    var counter=0;
    return function(){return counter +=1;}
  })();
  function myFunction(){
    document.getElementById("demo").innerHTML=add();
  }
</script>

class ClassName {
  constructor() { ... }
}

<script>
  class MNC{
    constructor(name,captain){
      this.name=name;
      this.captain=captain;
    }
  }
  let site=new MNC("MNC","鲁本");
  document.getElementById("demo").innerHTML=site.name+": "+site.captain;
</script>

// 未命名/匿名类
let Runoob = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// output: "Runoob"
 
// 命名类
let Runoob = class Runoob2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// 输出: "Runoob2"

<script>
  class King{
    constructor(name,year) {
      this.name=name;
      this.year=year;
    }
    age(){
      let date=new Date();
      return date.getFullYear()-this.year;
    }
  }
  let king=new King("Messi",2022);
  document.getElementById("demo").innerHTML="Messi is the king for "+king.age()+" years.";
</script>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let runoob = new Runoob("菜鸟教程", 2020);
document.getElementById("demo").innerHTML=
"菜鸟教程 " + runoob.age(year) + " 岁了。";
</script>

<script>
  class Who {
    constructor(name) {
      this.name = name;
    }
    present(){
      return '我喜欢' + this.name;
    }
  }
  class King extends Who{
    constructor(name,age){
      super(name);
      this.age=age;
    }
    show(){
      return this.present()+'，他成为球王'+this.age+'年了。';
    }
  }
  let king=new King("梅西",2);
  document.getElementById("demo").innerHTML=king.show();
</script>

<script>
class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  get sitename() {
    return this._sitename;
  }
  set sitename(x) {
    this._sitename = x;
  }
}
let noob = new Runoob("菜鸟教程");
document.getElementById("demo").innerHTML = noob.sitename;
</script>

<script>
class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello(x) {
    return "Hello " + x.name;
  }
}
let noob = new Runoob("菜鸟教程");
document.getElementById("demo").innerHTML = Runoob.hello(noob);
</script>

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 构造函数
   function Preson(name, age) {
     this.name = name;
     this.age = age;
   }
   // 所有实例共享的公共方法
   Preson.prototype.say = function (word) {
     console.log(`${this.name}说：${word}`);
   }
   const p1 = new Preson('张三', 18); // 创建一个Person实例对象
   const p2 = new Preson('李四', 20); // 新创建一个Proson实例对象
   p1.say('hello world'); // 调用公共方法
   p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
   p1.__proto__.do = function () {
     console.log('往原型对象中添加方法');
   }
   p2.do(); // 打印出了-往原型对象中添加方法

function Animal(name) {
  this.name = name;
}//构造函数
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}//构造函数

// 建立原型链，让 Dog 继承 Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + " is barking.");
};
var dog = new Dog("Buddy", "Labrador");
dog.eat();  // 调用从 Animal 继承的方法
dog.bark(); // 调用 Dog 的方法

Object.create(proto[, propertiesObject])

<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>

<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
</body>

<body onload="checkCookies()">
<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>//弹窗-提示浏览器 cookie 是否可用
</body>

<h1>开始测试</h1>
输入字母：<input type="text" id="demo" onchange="myFunction()">
<script>
  function myFunction(){
    var x=document.getElementById("demo");
    x.value=x.value.toUpperCase();
  }
</script>//焦点离开输入框后，函数就会被触发

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

<body>
<script>
function lighton(){
	document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
	document.getElementById('myimage').src="bulboff.gif";
}
</script>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>

<body>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
</body>

<button id="muBtn">点击</button>
<p id="demo"></p>
<script>
  document.getElementById("muBtn").addEventListener("click",showDate);
  function showDate(){
    document.getElementById("demo").innerHTML=Date();
  }
</script>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

let x=document.getElementById("muBtn")
x.addEventListener("click",showDate)
x.addEventListener("mouseover",first);
x.addEventListener("mouseout",second);
function showDate(){
  let date=Date();
  document.getElementById("demo").innerHTML+=date+"<br>";
}
function first(){
  document.getElementById("demo").innerHTML+="first<br>"
}
function second(){
  document.getElementById("demo").innerHTML+="second<br>"
}

<script>//重置窗口大小的时候会触发"resize" 事件句柄
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

let p1=5;
let p2=4;
document.getElementById("myBtn").addEventListener("click",function(){
  myFunction(p1,p2);
});
function myFunction(a,b){
  var result=a*b;
  document.getElementById("demo").innerHTML=result;
}