<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--script标签内，写JavaScript代码，可以放在head标签里，也可以放在body标签里--> <script> <!--弹窗，打开页面时弹出一个窗口，并显示有hello，world--> alert('hello,world'); </script></head><body></body></html>
方式二：新建一个js文件，在HTML中连接该文件也可以实现，就像css一样和HTML分开
注意script标签必须是成对出现，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--Javascript严格区分大小写--> <script> //单行与多行注释与Java中注释的方式一样 /*1.定义变量 变量类型 变量名 = 变量值；*/ var score =100;//这里不写分号也没事 var name = "twq";//这里不写var也没事，就算不写变量名都可以，是不感觉可以随心所欲了 if(score>60 && score <70){ alert('小子，你很危险呀'); }else if(score > 70 && score < 80){ alert('革命尚未成功，同学 仍需努力呀！！'); }else{ alert('不要骄傲哦！'); } </script></head><body></body></html>
123//整数123123.1//浮点数123.11.123e3//科学计数法-99//负数NaN/ot a numberInfinity//表示无限大
须知：
如果数组下标越界会报undefined
<script> console.log((1/3)===(1-2/3)); console.log(Math.abs(1/3-(1-2/3))<0.00000001); //保证代码的可读性，尽量使用[] var arr=[1,2,3,4,5,'hello',null,true]; new Array(1,12,3,4,5,'hello'); var person ={ name:"Twq", age:23, tags:['js','java','web','...'] } </script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /*前提是IDEA需要设置支持ES6语法 *'use strict'严格检查模式，预防Javascript的随意性导致产生的一些问题如： * ①定义变量不写变量类型在没有写严格检查时不会报错，但是加上这严格检查之后就会报错 * 必须要写在JS的第一行 * 局部变量建议都使用let去定义 */ 'use strict'; /*let是块作用域，就会好比在for循环里用let定义了一个块变量 在循环的外部则无法使用该变量，var是函数作用域，在循环里面定义的 变量在循环外面也可以可以访问*/ let i = 1; </script></head><body></body></html>④41 Ascll字符
<script> //tab 上面 esc下面 let name = "Twq"; var msg =`你好呀，${name}`//在Java中连接两个字符串用加号，二JS可以使用$符号连接 </script>
注意:假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
在数组里字符串的1和数字1是不同的
注意:concat()并没有修改原来的数组的值，只是会返回一个新的数组
<script> var map = new Map([['tom',100],['jack',900],['haha',80]]) console.log(map.get('jack')) map.set('admin',90);//新增或修改 map.delete('tom');//删除 for(let x of map){ console.log(x) } </script>
<script> var set = new Set([1,1,1,3]); set.add(2);//添加一个元素 set.delete(3);//删除一个元素 for(let x of set){ console.log(x) } console.log(set.has(1))//集合中是否包含1 </script>
<script> function abs(x){ if(x >= 0){ return x; } else{ return -x; } }</script>
一旦执行到return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
var abs = function(x){ if(x >= 0){ return x; } else{ return -x; } }<script> var abs = function(x){ if(typeof x !== 'number'){//如果参数x的类型不是一个数 //手动定义异常 throw 'Not a number'; } if(x >= 0){ return x; } else{ return -x; } }</script>
②假设参入的参数有多个
可以使用arguments关键词
arguments：代表传递进来的所有参数，是一个数组
<script> var abs = function(x){ if(typeof x !== 'number'){//如果参数x的类型不是一个数 //手动定义异常 throw 'Not a number'; } for(let i =0; i<arguments.length;i++){ console.log(arguments[i]) } // if(x >= 0){ // return x; // } // else{ // return -x; // } }</script>
③使用reset获取当前除已定义的参数以外的所有参数
<script> var abs = function(a,b,c,...rest){ console.log("a->"+a); console.log("b->"+b); console.log("c->"+c); console.log(rest); }</script>
<script> 'use strict' function twq(){ var x = 1; x = x+1; } function twq1(){ var x = x +1; } </script><script> 'use strict' function twq(){ var x = 1; function twq1(){ var y = x +1; } var z = y +1; } </script>
<script> 'use strict' function twq(){ var x = 1; function twq(){ var x = 'A'; console.log('inner'+x); } console.log('outer'+x); twq(); } twq(); </script>
<script> 'use strict' function twq(){ var x = 'x' + y; console.log(x); var y = 'y'; } twq(); </script>
由此结果可知JS执行引擎，自动提升了y的声明，但是不会提升y的赋值
<script> 'use strict' var x = 'xxx'; alert(x); alert(window.x); </script>
<script> 'use strict' function aaa(){ for (var i = 0; i < 100; i++) { console.log(i); } console.log(i+1); } </script>
let关键字，解决局部作用域冲突的问题
<script> 'use strict' function aaa(){ for (let i = 0; i < 100; i++) { console.log(i); } console.log(i+1); } </script>
<script> 'use strict' var PI = '3.14'; console.log(PI); PI = '213';//可以改变这个值 console.log(PI) </script>
在ES6引入了常量关键字const
<script> 'use strict' const PI = '3.14'; console.log(PI); PI = '213';//可以改变这个值 console.log(PI); </script>
<script> 'use strict' var person = { name:'唐', birth:1999, //方法 age:function (){ //今年-出生的年 为它的年龄 var now = new Date().getFullYear();//获取当前的年份 return now - this.birth; } } </script>
②方式二：
<script> 'use strict' function getAge(){ //今年-出生的年 为它的年龄 var now = new Date().getFullYear(); return now - this.birth; } var person = { name:'唐', birth:1999, //方法 age:getAge//这里只需要将方法名天在这里即可 } //kuangshen.age() ok //getAge() NaN 直接调用getAge()其内部的this指的是window </script>
格式：
<script> var user={ name:'twq', age:3, sex:'男' } //对象转化为JSON字符串{} var jsonUser = JSON.stringify(user); //JSON字符串转化为对象 参数为JSON字符串 var obj = JSON.parse('{"name":"twq","age":3,"sex":"男"}');</script>
<script> var student={ name:'twq', age:23, run:function (){ console.log(this.name+' is running.....') } } var xiaoming={ name:'xiaoming' } xiaoming.__proto__=student;</script>
<script> class Student{ constructor(name) {//构造器 this.name =name; } hello(){ alert('hello') } } var st1 = new Student("小明"); var st2 = new Student("小红");</script>
<script> class Student{ constructor(name) {//构造器 this.name =name; } hello(){ alert('hello') } } var st1 = new Student("小明"); var st2 = new Student("小红"); class primeStudent extends Student{ constructor(name,grade) { super(name); this.grade = grade; } myGrade(){ alert('我是一名小学生'); } } var st3 = new primeStudent("小刚",23);</script>
本质：查看对象原型
大多数时候，我们不会使用navigator对象，因为会被人为修改
host: "localhost:63342"href:"http://localhost:63342/Java02/JavaScript/tang/%E5%86%85%E9%83%A8%E5%AF%B9%E8%B1%A1/class%E7%BB%A7%E6%89%BF.html?_ijt=sibusl004num53m4li95rdnuvg"protocol: "http:"reload: ƒ reload()//刷新页面//设置新的地址location.assign('https://www.cnblogs.com/twq46/')
获取具体的文档树节点
<body><dl id="app"> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd></dl><script> var dl = document.getElementById('app');</script></body>
获取cookie
劫持cookie原理：对于有病毒的网站，可能就会存在获取你的cookie的JS代码，一旦他们获得你的cookie值，就可以登录的你的账号进行操作，比如你在登录淘宝账号之后，天猫网站也会自动登录上，这就是因为天猫会获取你登录淘宝账号的cookie值，从而用这些信息自动去登录天猫网站
服务器端可以设置cookie：httpOnly,就可以保证信息安全
<body><div id="father"> <h1>标题</h1> <p id="p1">段落1</p> <p class="p2">段落2</p></div><script> var h1 = document.getElementsByTagName('h1');//获取标签选择器 var p1 = document.getElementById('p1');//获取id选择器 var p2 = document.getElementsByClassName('p2');//获取类选择器 var father = document.getElementById('father');//获取id选择器 console.log(father.children);//获取父节点下的所有子节点 // console.log(father.firstChild);//获取父节点下的第一个节点 // console.log(father.lastChild);//获取父节点下的最后一个节点</script></body>
<body><div id="div"></div><script> var div1 = document.getElementById('div'); console.log(div1); div1.innertext='123'//修改网页内容的值</script></body>div1.innerHTML='<strong>123</strong>'
操作JS：属性使用字符串包裹
还可通过数组来删除
注意:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意
<body><p id="js">TWQ</p><div id="div"> <p id="'se">javaSE</p> <p id="ee">JavaEE</p> <p id="me">javaME</p></div><script> var js = document.getElementById('js'); var div = document.getElementById('div');</script></body>
<body><!--<p id="js">TWQ</p>--><div id="div"> <p id="'se">javaSE</p> <p id="ee">JavaEE</p> <p id="me">javaME</p></div><script> // var js = document.getElementById('js'); var div = document.getElementById('div'); var newp = document.createElement('p')//创建一个p标签 newp.id = 'newp';//设置id选择器的名称,等价于<p id="newp"></p> newp.innerText="Twqwq123"//等价于<p id="newp">Twqwq123</p></script></body>
目的：实现创建一个标签自带属性和值，并加入到div标签中
<body><div id="div"> <p id="'se">javaSE</p> <p id="ee">JavaEE</p> <p id="me">javaME</p></div><script> var div = document.getElementById('div'); //创建一个带值的标签 var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript');</script></body>
原文出处:JavaScript详解
群主管理都是支付大佬
