➜  php git:(master) ✗ cd /Users/tianzi/Desktop/时间复杂度/js  
进入环境
➜  js git:(master) ✗ node js.js
输出
hello world

Document root is /Users/tianzi/Desktop/时间复杂度/js
Press Ctrl-C to quit.
sudo apachectl start
/系统/图书馆/ LaunchDaemons / org.apache.httpd。服务已经加载
浏览器中直接使用127.0.0.1/js.js




Last login: Fri Sep  6 09:08:58 on ttys001
<前往文件夹>，输入这个地址:/资源库/WebServer
➜  ~ git:(master) ✗ cd /Library/WebServer/Documents/js文件 
➜  js文件 
http://127.0.0.1/js文件/js.js
这个就是本地服务器

➜  js git:(master) ✗ npm install -g nodemon
这个不行犯错（安装nodemon）

➜  js git:(master) ✗ npm install nodemon --save
（安装到本地）
> fsevents@1.2.9 install /Users/tianzi/node_modules/fsevents
> node install
+ nodemon@1.19.2
added 281 packages from 144 contributors and audited 2301 packages in 21.153s
found 0 vulnerabilities
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.9.0 → 6.11.3       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.11.3   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

➜  js git:(master) ✗ npm install -g npm
更新不了你
➜  js git:(master) ✗ npm -v            
6.9.0

1、如何在终端运行js文件
 
      node 文件名(没有后缀)，如果使用该方法，每当代码改变时，都要重新运行
 
2、安装supervisor  实现热更新
 
(一般使用node 文件名  来运行文件，但是当文件发生变化时必须重启文件才能刷新，安装好supervisor后，用supervisor 文件名  来运行文件，当文件发生变化后，不需要再次运行，即可刷新页面)
 
安装：
    cnpm install supervisor -g
 
 运行：
    supervisor 文件名称
-----    
    
mac 自带服务器实现本地文件访问

重启apache：sudo apachectl restart
失败的时候重启；
关闭apache：sudo apachectl stop

开启apache：sudo apachectl start
输入密码；浏览器输入127.0.0.1或者localhost；表明服务器已经启动了
It works!
打开Finder，右键打开<前往文件夹>，输入这个地址:/资源库/WebServer，这个文件夹就是本地服务器的文件夹，然后你就可以把你自己的文件放入到其中的Documents文件夹中,他的路径对应的就是127.0.0.1/你的文件名,例如我在Documents中放了个文件夹myTest,其中有个文件demo.html, 那么我就可以在浏览器中直接使用127.0.0.1/myTest/demo.html访问。

注意：上述/资源库/WebServer／Documents下的文件，启动本地服务在浏览器中“127.0.0.1/你的文件名”访问时，如果是zip压缩文件是直接就开始下载的，如果是图片会直接打开。
如果把刚才路径下的本机地址换成网络分配的ip，同局域网下其他设备均可访问此文件。

➜  js git:(master) ✗ php -S localhost:8000
PHP 7.1.23 Development Server started at Fri Sep  6 09:02:42 2019
Listening on http://localhost:8000

restartable-设置重启模式 
ignore-设置忽略文件 
verbose-设置日志输出模式，true 详细模式 
execMap-设置运行服务的后缀名与对应的命令 
{ 
“js”: “node –harmony” 
} 
表示使用 nodemon 代替 node 
watch-监听哪些文件的变化，当变化的时候自动重启 
ext-监控指定的后缀文件名

记得注稀最后一行的：module.exports = app;

console.log('hello world')

　　　　　 document.writeln("打印三角形</br>");
         for(var i=0;i<5;i++){
            for(var j=5;j>i;j--){
               document.writeln("&nbsp");
            }
            for(var k=0;k<2*i+1;k++){
               document.writeln("*");
            }
            document.writeln("</br>")
         }

//7,5,3,1...

        for (var i = 3; i >= 0; i--) {
            for(var j = 2 * i + 1; j > 0; j--){
                document.write("⚫");
            }
            document.write("<br />")
        }
        
        document.write("===============<br>")
        document.write("===============<br>")
        
        //1,3,5,7...
        for (var i = 0; i <= 3; i++) {
            for(var j = 0; j < 2 * i + 1; j++){
                document.write("⚫");
            }
            document.write("<br />")
        }
        
        document.write("===============<br>")
        document.write("===============<br>")
        
        //1,3,5,7,5,3,1
        for (var i = 0; i <= 3; i++) {
            for(var j = 0; j < 2 * i + 1; j++){
                document.write("⚫");
            }
            document.write("<br />")
        }
        for (var i = 2; i >= 0; i--) {
            for(var j = 2 * i + 1; j > 0; j--){
                document.write("⚫");
            }
            document.write("<br />")
        }

1 1 1 1 1 1 *
1 1 1 1 1 * * *
1 1 1 1 * * * * *
1 1 1 * * * * * * *
1 1 * * * * * * * * *
1 * * * * * * * * * * *
1 1 * * * * * * * * *
1 1 1 * * * * * * *
1 1 1 1 * * * * *
1 1 1 1 1 * * *
1 1 1 1 1 1 * 

我们把 空格=不间断空格（Non-breaking Space）=nbsp ；
两次循环，循环空格or'1'
同时循环*



<script type="text/javascript">

document.writeln("打印菱形</br>");
         for(var i=0;i<6;i++){
            for(var j=6;j>i;j--){
               document.writeln("&nbsp");
            }
            for(var k=0;k<2*i+1;k++){
               document.writeln("*");
            }
            document.writeln("</br>");
         }

         for(var i=5;i>0;i--){
            for(var j=6;j>=i;j--){
               document.writeln("&nbsp");
            }
            for(var k=0;k<2*i-1;k++){
               document.writeln("*");
            }
            document.writeln("</br>")
         }
</script>

b = b||"abc" es5
b="abc" es6  多肽 重载；
b = "abc" ,  es7
(a,b,..c)   =(1,2,3,4,5). c就是一个数组，是3，4，5
Var [a,,b] = [1,2,3]  a= 1 b= 3 ，是占位符  对象的结构

va r obj = {color: rol , size : "man"}
Var [color,size] =obj
也就是color = rol，size= man

va r obj2 = {...obj，heighet ：18} 对象的扩展。js的基础语法。。。
这些可以用在 服务端 浏览器 node中；jQuery就不要用，转换机制无。

var s = "abcdefg";
alert(s.substring(1,2));

var str="123";

var num=parseInt(str);

<script type="text/javascript">

	
var today;

today=new Date( );

document.write("今天是"+today.getFullYear( )+"年"

        +(today.getMonth( )+1)+"月"+today.getDate( )+"日");

</script>

var arr = [2,3,4,5,6];
var sum =0;
for (var i = 1; i <= arr.length; i++) {
	sum+= arr[i];
}
console.log(sum);

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

var User = {
 count: 1,
 getCount: function() {
  return this.count;
 }
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?
问两处console输出什么？为什么？
答案:是1和undefined。
　　func是在window的上下文中被执行的，所以不会访问到count属性。

for(var i = 1; i <= 3; i++){  //建议使用let 可正常输出i的值
  setTimeout(function(){
      console.log(i);   
  },0); 
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。

var a = null;
alert(typeof a);
答案：object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

var reg=/^[a-zA-Z]\w{5,29}$/;

<script>
     var a = 100;  
     function test(){  
        alert(a);  
     a = 10;  //去掉了var 就变成定义了全局变量了
        alert(a);  
}  
test();
alert(a);
</script>
正确答案是： 100， 10， 10

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr] 
}

}

var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
  var obj = inputs[i];
  if(obj.type=='checkbox'){
     checkboxArray.push(obj);
  }
}

String.prototype.trim= function(){

return this.replace(/^\s+/,"").replace(/\s+$/,"");

}

try{
 
}catch(e){
 
}finally{
 
}

(1)创建对象

var xhr = new XMLHttpRequest();

(2)打开请求

xhr.open('GET', 'example.txt', true);

(3)发送请求

xhr.send(); 发送请求到服务器

(4)接收响应

xhr.onreadystatechange =function(){}

(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。

(2)当readystate==4时，表示已经接收到全部响应数据。

(3)当status ==200时，表示服务器成功返回页面和数据。

(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()
分别alert出 undefined，lily，（变量声明提前问题）

冒泡排序
var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
if (array[j] > array[j + 1]){
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
 }
}

var oldObject ="sdf";
   var newObject = JSON.parse(JSON.stringify(oldObject));
   console.log(newObject);
或者
    var a = 'dddd';
    function cp(a){return JSON.parse(JSON.stringify(a))}
    console.log(cp(a));

               loading.style.display = "none"

            } else {

               alert("不能点击,哈哈哈!");

            }

   };

function getQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); 
  if (r != null) return unescape(r[2]); return null; 
} 

new Array(10000).fill('').map((_, index) => index + 1).filter(item => /0/.test(item)).reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

var arr=[[1,2],[3,4]];
function Jw(obj){
     return Array.prototype.concat.apply([],obj);
}
Jw(arr);

···
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([?&=]+)=([?&=]*)/g;
search.replace(reg, function (rs, ![1,](https://math.jianshu.com/math?formula=1%2C)2) {
var name = decodeURIComponent(![1); var val = decodeURIComponent(](https://math.jianshu.com/math?formula=1)%3B%20var%20val%20%3D%20decodeURIComponent()2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}
···

···
var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
···

    if(json[arr[i]]){
            arr2.push(arr[i]);
    }

function c () {
    console.log(a);
    function a() {};
    var a = 10;
    a = 100;
    console.log(a);
}
c();

(function d (num) {
    console.log(num);
    var num = 10;
}(100))

(function e (num) {
    console.log(num);
    var num = 10;
    function num () {};
}(100))

(function f (num) {
    function num () {};
    console.log(num);
    var num =10
    console.log(num);
}(100))

//仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
function m () {
    console.log(a1); // underfined
    console.log(a2); // underfined
    console.log(b1); // underfined
    console.log(b2); // underfined
    if(false) {
        function b1 (){};
        var a1 = 10;
    }
    if(true) {
        function b2 (){};
        var a2 = 10;
    }
    console.log(a1); // underfined
    console.log(a2); // 10
    console.log(b1); // underfined
    console.log(b2); // function
}
m();

function n() {
    if(2>1) {
        arr = 10;
        brr = 10;
        let arr;
        var brr;
        console.log(arr);
        console.log(brr);
    }
}
n(); // ReferenceError

    // 有一个构造函数A，写一个函数B，继承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

git stash       //将本次修改存到暂存区（紧急切换分支时）
git stash pop   //将所有暂存区的内容取出来

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({length: 100});

// 方法四 借助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
    var start = '' + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += ','
    }
    return start;
});
return str.split(',');

// 方法五（函数式，参考网络）
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。

攻击方法：
1\. 手动攻击:
编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等，
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2\. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等
防御方法：
1\. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2\. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3\. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4\. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5\. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6\. 设置浏览器的安全设置来防范典型的XSS注入

攻击方法：
编写恶意字符串，比如‘ or  1=1--等，
手动测试目标网站上所有涉及数据库操作的地方
防御方法：
1\. 禁止目标网站利用动态拼接字符串的方式访问数据库
2\. 减少不必要的数据库抛出的错误信息
3\. 对数据库的操作赋予严格的权限控制
4\. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等
5\. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符

就是攻击者冒用用户的名义，向目标站点发送请求
防范方法：
1\. 在客户端进行cookie的hashing，并在服务端进行hash认证
2\. 提交请求是需要填写验证码
3\. 使用One-Time Tokens为不同的表单创建不同的伪随机值  

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

[...new Set([1,2,3,1,'a',1,'a'])]

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
var ulNode = document.getElementById("ul");
    ulNode.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

JSON.stringify(obj)==JSON.stringify(obj);//true

router.go(1)
router.push('/')

function bind(fn, context){
  return function (){
     return fn.apply(context, arguments);
  }
}
// 柯理化函数思想   感谢pursuitTom的提出
Function.prototype.bind = function (context) {
    var args = Array.prototype.slice.call(arguments, 1);
    var _this = this;
    return function () {
        var thisArgs = [].slice.call(arguments);
        return _this.apply(context, args.concat(thisArgs))
    };
}
// ES6写法 感谢waterc的提出
Function.prototype.bind = function(context, ...res) {
    let self = this
    return function(...arg) {
        return self.apply(context, [...res,...arg])
    }
}

var a = (function(){return '1';}, function(){return 1;})();
console.log(typeof a); //number

__proto__是指内部原型，和Object.getPrototypeOf()结果等价
function f(){}
f.__proto__ === Object.getPrototypeOf(f); //true
f.prototype === Object.getPrototypeOf(f); //false

<a href="javascript:history.go(-1)">backward</a>
<a href="javascript:history.go(1)">forward</a>

var time = 400, times = 0, max = 10;
function func(){
  times++;
  if(times < max){
    //code here
    setTimeout(func, time);
  } else {
    console.log("finished");
  }
}
setTimeout(func, time);

var counter = 0;
var queryInterval = 30; //ms
var pics = document.getElementsByClassName("pics");

function singleQuery(i){
  if(pics[i].complete){
    counter++;
    console.log(i + " is loaded");
  } else {
    setTimeout(singleQuery, queryInterval, i);
  }
}

function allQuery(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(allQuery, queryInterval, callback);
  } else {
    console.log("All pics are loaded.");
    callback();
  }
}

for(var i = 0; i < pics.length; i++){
  setTimeout(singleQuery, queryInterval, i);
}

setTimeout(allQuery, queryInterval, callback);

var counter = 0, queryInterval = 50;
var pics = document.getElementsByClassName("pics");
for(var i = 0; i < pics.length; i++){
  pics[i].onload = function(){
    counter++;
    console.log(this.id + " is loaded");
  }
}

function queryPictures(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(queryPictures, queryInterval, callback);
  } else {
    console.log("All pics are loaded");
    callback();
  }
}

setTimeout(queryPictures, queryInterval, callback);

function isArray(arr){
    return Object.prototype.toString.call(arr) === '[Object Array]';
}

var img = new Image();
img.onload = function(){
  //code here
};
img.onerror = function(){
  //code here
};
img.src="http://server.com/data?query=3";

//source: http://test.org:4000
//get the window object of target origin
var win = window.open("http://target.com");
//or this, when a frame is used
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");

//target: http://target.com/tiny
function handleMessage(event){
  if(event.orgin!="http://test.org:4000")
    return;
  var data = event.data;
  //code here

  //event.source is window.opener
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});

function fn() {
           for (var i = 0; i < 2; i++) {
               (function () {
                   var variate = i;
                   setTimeout(function () {
                       console.log("setTimeout执行后:"+variate);
                   }, 1000);
               })();//闭包,立即执行函数,匿名函数

           }
          console.log(i);//2
          console.log(variate);//variate is not defined
       }
       fn();

document.body.addEventListener('touchstart', function () { //...空函数即可});

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); 

aa = JSON.parse( JSON.stringify(a) )

//输出0到n之间的偶数
function printNum(n){
// ...
}
printNum(20)


//⽤用switch将对应数字转为星期⼀一、星期⼆二、...
function week(n){
// ...
}
week(1)



//加法计算
function add(a, b){
//
}
var num = add("1", "3")
console.log(num) // 4


//输出当前时间，格式为 yyyy-mm-dd hh:ii:ss


//计算当前时间与 2019-08-05 12:01:59 间隔的秒数
//验证是否⼿手机号,规则为 "1开头，共11位"
流程控制训练
数据类型转换
⽇日期时间
正则
定时器器
// 做⼀一个10秒倒计时，计时完成后，输出ok
var s = 10;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button type = "button" onclick="test1()"> n</button>
<p id = "呀呀呀">
    啥东西呀
</p>
<script>
    // document.write("<h1>这是一个标题</h1>>");
    // document.write("<h1>这是一个标题</h1>>");
    // // document.write("<h1>这是一个标题</h1>>")
    // document.write("<h1>这是一个标题</h1>>")
    // document.write("<p>这是一个标题</p>>")
    //
    // document.write('fdfds')  //会有一个返回
    // function test() {
    //     alert('sss')
    // }
    // function test1 (){
    //     // x = document.getElementById('呀呀呀')
    //     // x.innerHTML = "heihei"
    //     x = document.getElementById('呀呀呀')
    //     x = document.getElementsByName('ss')
    //     x.innerHTML = "heiheisssss"
    // }
    //
    //
    // x = document.getElementById('呀呀呀')
    // x.innerHTML = "heihei"


    // function test2() {
    //     element = document.getElementById('why')
    //     if(element.src.match('pp')){
    //         element.stc = 'p.jpg'
    //     }else {
    //         element.src = 'pp.jpg';
    //     }
    // }
</script>


</body>
</html>

    <script>
        function changeImage()
        {
            element = document.getElementById('myimage')
            if (element.src.match("h"))
        {
            element.src="p.jpg";
        }
            else
        {
            element.src="h.jpg";
        }
        }
    </script>
<img id="myimage" onClick="changeImage()" src="p.jpg" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>


</script>



-----------
<img id ="why" onclick = "test2()" src = "f.gif"  >
<script>
  function test2() {
        element = document.getElementById('why')
        console.log(element.src.match(/pp/g))
    		 console.log(element.src.match('pp'))
        console.log(element.src)
        if(element.src.match('pp')){
            element.src = 'f.gif';
            console.log('sssss')

        }else {
            element.src = 'pp.gif';
            console.log('kkkkkk')
        }
    }
    </script>
    
    
    返回值：null
0.html?_ijt=c2icarfc0681q84272q2m1o7s1:42 http://localhost:63342/code%E4%BB%A3%E7%A0%81/%E6%B5%8B%E8%AF%95/f.gif

match匹配的是，这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

x = document.getElementById("demo")是 提取p段落标签中的
<p id = "demo" >啥东西呀</p>

x = document.getElementById('inp').value; 
取imput输入的值；不为空，或者要是数字
<input id = 'inp' type  = 'text'>
x == ""|| isNaN(x)

document.write(isNaN(123)+ "<br>");
document.write(isNaN(-1.23)+ "<br>");
document.write(isNaN(5-2)+ "<br>");
document.write(isNaN(0)+ "<br>");
document.write(isNaN("Hello")+ "<br>");
document.write(isNaN("2005/12/12")+ "<br>");

false
false
false
false

true
true

a=" 2"
a.replace(/(^\s*)|(\s*$)/g,'')       
返回 "2"

/^\d+$/.test(200000777)    
true


isNaN("2  2")  这不是数字
true

isNaN("22")
false

isNaN(" 22  ")
false

<button type = "button" onclick="test4()"> n</button>
<p id = "demo" >啥东西呀</p>
<input id = 'inp' type  = 'text'>
 
 下面是js的东西
 
 function test4(){
        var x = document.getElementById('inp').value;
        // if(x == ""|| isNaN(x)){
        // if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==false){ //这些都不行，
        console.log(x +'shi'+ x.length)
        // if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){  //不行
        if(isNaN(x)||/^\d+$/.test(x)==false){   //这个就可以输出不是数字的了
            console.log(x+x)
            alert('要输入数字')
        }
    }
    
//最后输入的是，空格，和 开头结尾不是数字。