1.书写位置

2.标识符

3.变量

var：声明变量。

（1）.变量的重新赋值

（2）.变量的提升

打印结果：console.log(变量名)

第一个是你写在里面的。

第二个是实际运行的先后之分，变量名字在最前面。变量提升。

最后打印出来的结果

4.js引入到文件。

（1）嵌入到html

（2）引入本地独立的js文件 

（3）引入网络来源文件

5.注释与输出方式

注释

//和/* */

输出

alert：输出弹出框。

 <script>

    alert("我是懒羊羊")

  </script>

<script>

    document.write("我是输出到页面")

  </script>

console.log:输出在控制台。

6.数据类型

null、字符串、undefined、数值、boolean、对象

（1）原始数据类型：boolean、字符串、数值。

所有被双引号或者单引号包裹的都是字符串。

注意：下方单引号和双引号使用。

2.合成数据类型

null和undefined代表空值。

7.typeof运算符

控制台看运行结果。

8.算数运算符

++在后面先打印出来在自增。

9.赋值运算符

10.比较运算符

==：比较数值相等。

===：比较数值和类型相等。

11.boolean运算符

（2）&&且运算

都要

（3）||或运算

一个也行

12.条件语句-if语句

得出结果：x=2

（2）if  else

（3）条件语句之switch

如果不加break，他会把符合那个值得结果以及下面的都打印出来。

13.三元运算符

14.for循环

表达式可以省略，但是；不可以省略。

15.while循环

  var  i = 0;while(i <= 100){console.log(i);i++}

 var sum = 0;var i = 0;while(i <= 100){sum += i ;i++}console.log(sum);

16.break语句和continue语句

所以当前就不打印5，就打印6...了。

 17.字符串

只能单双嵌套或者双单嵌套。不能双双嵌套或者单单嵌套。

 var str4 = "懒羊羊当'好的'大厨"document.write(str4)

（2）如果非要单单或者双双使用。

 var str4 = "懒羊羊当\"好的\"大厨"

          document.write(str4)

（3）字符串非要换行呢？

18.字符串方法charAt（）：返回指定字符

19.字符串方法concat（）：拼接字符

concat：合并多个数组; 合并多个字符串

多个参数，逗号隔开。

 var i = "hello";var a = "world";var d = "!"var num = 100;var s = i.concat(a,d,num);console.log(s);

（2）简便方法：直接用+

但是他不会改变数值类型，如果是数字相加就是普通加法，若果是字符串相加就是拼接在一起。

20.substring：取出子链

substring：子链。

包头不包尾。

21.substr（）：取出字串

22.indexOf（）：出现的位置

23.trim（）去除两旁空格、制表符等

不能去除中间的空格。

24.split：分割字符

26.数组

（2多维数组）

（3）下标读取

有括号叫方法，没有括号叫属性。

（4）数组越界，返回undefined

27.数组遍历

（1）遍历数组三种方法：for 、while

   var username = ["amy" , "frank" , "ime" , "bob"];for(var i =0; i < 4 ; i++){console.log(username[i]);}console.log(username.length)// 改良for(var i =0; i < username.length ; i++){console.log(username[i]);}//whilevar i = 0;while(i < username.length){console.log(username[i]);i++;}

（2）for in

不用定义var i= 0；

28.数组静态方法Array.isArray()判断是否为数组

判断是否为数组。

30.数组方法push（）和pop（）：添加删除数组，会改变原数组。

（2）push方法：可同时添加多条数据。

（3）pop：删除最后一个。

      var username = ["amy" , "frank" , "ime" , "bob"];username.pop()console.log(username);

31.数组方法shift（）和unshift（）。

可以打印出删除后的结果和删除的东西。

（2）shift可以遍历和清空数组。

这个打印出结果是undefined。

（3）unshift（）

      var username = ["amy" , "frank" , "ime" , "bob"];username.unshift("xhh" , "htl");console.log(username);

32.数组方法join（）：把数组变成字符串。

（1）常见分割

（2）如果是null或者undefined

（3)join和split可以实现数组和字符串的互换。

33.数组方法concat。--合并数组。 

（1）+和concat的区别

      var username = ["amy" , "frank" , "ime" , "bob"];var i = ["123" , "ABC"];console.log(i + username);//用+打印出来是数组console.log(username.concat(i));//这才是拼接

不仅可以合并一个，可以合并多个。

（2）可以合并其他参数

eg：

         var i = ["123" , "ABC"];

    console.log(i.concat(20 ,30));

结果：

34.数组方法reverse（）：反转。

// var username = ["amy" , "frank" , "ime" , "bob"];// console.log(username.reverse());// console.log()

(2)字符串反转

先分割字符spilt成数组，在反转数组revers，在join他成字符串。

      var i = "helloworld";var o = i.split("");o.reverse();console.log(o.join(""));

35.数组方法indexOf

返回第一次出现的位置，就算数组中有很多个，返回结果是第一次出现的位置

      var username = ["amy" , "frank" , "ime" , "bob"];console.log(username.indexOf("ime"));console.log(username.indexOf("30"));

（2）从指定位置后开始搜索：搜索的东西，指定的位置。

      var username = ["amy" , "frank" , "ime" , "bob" ,"amy"];console.log(username.indexOf("amy" , 2));

36.函数

定义：可反复调用代码块。

（1）函数声明

        function add(){console.log("结果");}// 调用函数add();

（2）函数名的提升

可以先调用，后创建

（3）函数参数

function add( x , y ){console.log( x + y);}add(5,5);add(2,8);

（4）函数返回值

return后面的代码无效。

function  add(x , y){return x + y}var i = add(2,8);console.log(i);

37.对象：object

数字13也要加‘’

var i = {age:'13',name:'xhh'};

（2）在里面可调用方法、数组等。

调用数组时变量名+function

var i = {age:'13',name:'xhh',arry:["xhh" , "htl" ,"lyy"],flag:true,getname:function(){console.log("iwen");}}

（3）对象的调用：对象名.属性

        var i = {age:'13',name:'xhh',arry:["xhh" , "htl" ,"lyy"],flag:true,getname:function(){console.log("iwen");}}console.log(i.age);// 方法的调用不同于以上i.getname();

（4）链式调用

        var i = {o:{p:[10 ,20],a:[30 , 40]}};console.log(i.o.p); 

38.Math对象

(1)Math.abs()          绝对值的英文是 "absolute value"。

      var i =-100 ;console.log(Math.abs(i));

(2)Math.max()  \   Math.min()

      console.log(Math.max(10 ,29));

（3）Math.floor()  \   Math.ceil()

      console.log(Math.floor(10.29));console.log(Math.ceil(11.5));

（4）Math.random()

console.log(Math.random());

（5）生成一个10-20的随机数

      function i(min ,max){var re = Math.random() * (max - min) + min ;re = Math.floor(re);console.log(re);}i(10,20);

38.DATE对象

（1）Date.now()

      console.log(Date.now());//1716623007895console.log(Date(1716623007895));// 或者直接new进去，获取一个最新的。第二种方法console.log( new Date);

\

月份要加一

      // 月份从0-11.0是一月，11：是12月。所以要在后面加一console.log(new Date(1716623007895).getMoth() + 1);

打印结果：2024-5-25

      var year = new Date(1716623007895).getFullYear();var moth = new Date(1716623007895).getMonth() + 1;var day = new Date(1716623007895).getDate();console.log(year +"-" + moth + "-" + day);

更准确的一点

39.DOM

(1)节点

（2）节点类型

（3）节点数

（4）document

代码：

结果：

（5）三层节点关系

(6)Node.nodeType属性

40.document对象 --方法/获取元素

（1）document.getElementsByTagName()

类似数组

<body><div>hello</div><div>world</div><script>var divs = document.getElementsByTagName("div");console.log(divs);console.log(divs[0]);console.log(divs[1]);</script></body>

（2）document.getElementsByClassName()

例子二：

（3）document.getElementsByName()

（4）document.getElementById()

只读一个，不是一群

（5）H5之后的新的：document.querySelector()

跟id差不多，只返回第一个

注意，打印nav时候前面有.

    <div class="nav">1</div><div class="nav2">2</div><script>var nav = document.querySelector(".nav");var nav2 = document.querySelector(".nav2");console.log(nav);console.log(nav2);</script>

（6）获取多个

41.document--创建元素

（1）document.createElement()

    <script>var text = document.createElement("p");console.log(text);</script>

(2)document.createTextNode()

    <div class="nav">111</div><script>var text = document.createElement("p");var content = document.createTextNode("我是威威");console.log(text);console.log(content);</script>

(3)将文本放入标签中text.appendChild(content);

    <div class="nav">111</div><script>var text = document.createElement("p");var content = document.createTextNode("我是威威");console.log(text);console.log(content);text.appendChild(content);console.log(text);</script>

（4）document.createAttribute()

只有属性才是添加才是：setAttributeNode。其他都是appendChild

     <script>var id = document.createAttribute("id");//赋值id.value = "root";console.log(id);</script>

    <div id="container"></div><script>var text = document.createElement("p");var content = document.createTextNode("我是威威");//创建属性var id = document.createAttribute("id");//赋值id.value = "root";//将文本塞进标签：将子元素放进容器里面text.appendChild(content);// 将属性放进标签text.setAttributeNode(id);console.log(text);// 将这些放进页面里面var container = document.getElementById("container");// console.log(container);container.appendChild(text);</script>

42.Element对象_属性

（1）Element.id

    <div class="box"  id ="root">hello</div><script>var root = document.getElementById("root");// console.log(root.id);//rootroot.id = "roots";//将root变为roots</script>

（2）Element.className

（3）Element.classList

<div class="box"  id ="root">hello</div><script>var root = document.getElementById("root");console.log(root.classList.add("mybox")); root.classList.remove("box");if(root.classList.contains("box")){console.log("you");}else{console.log("meiyou");}</script>

(4).Element.innerHTML

<div class="box"  id ="root">hello</div><script>var root = document.getElementById("root");console.log(root.innerHTML);//读取console.log(root.innerHTML = "大家好全啊");//改写内容</script>

43.Element获取元素位置

（1）Element.clientHeight  ,    Element.clientWidth

  <title>Document</title><style>.box{width: 200px;height: 200px;border: 5px  solid red;padding: 10px;margin: 20px;background: green;}</style>
</head>
<body><div class="box" id="box"></div><script>var box = document.getElementById("box");console.log(box.clientWidth);console.log(box.clientHeight);</script>

(2)Element.scrollHeight  ,    Element.scrollWidth

(3)Element.scrollLeft , Element.scrollTop

(3)Element.offsetHeight    Element.offsetWidth

(4)Element.offsetLeft    , Element.offsetTop

44.CSS操作

（1）setAttribute

   <div class="box" id="box"></div><script>var box = document.getElementById("box")box.setAttribute("style","width:200px ; height:200px; background:red;" )</script>

(2)style属性

   <div class="box" id="box"></div><script>var box = document.getElementById("box")// box.setAttribute("style","width:200px ; height:200px; background:red;" )box.style.width = "300px";box.style.height ="300px";box.style.backgroundColor ="red";</script>

（3）cssText属性

   <div class="box" id="box"></div><script>var box = document.getElementById("box")// box.setAttribute("style","width:200px ; height:200px; background:red;" )//  box.style.width = "300px";//  box.style.height ="300px";//  box.style.backgroundColor ="red";box.style.cssText = "width:200px ; height:200px; background:red;"</script>

45.事件处理程序

（1）HTML事件处理

  <button  onclick="clickHandle()">按钮</button><script>function clickHandle(){console.log("点击了按钮");}</script>

（2）DOM0级事件处理

  <button id="btn">按钮</button><script>var btn = document.getElementById("btn");btn.onclick = function(){console.log("点击了吧");}

（3）DOM2级事件处理

  <button id="btn">按钮</button><script>var btn = document.getElementById("btn");btn.addEventListener("click",function(){console.log("点击了");})

46.事件类型之鼠标事件

前面要加on

    <button   id="btn1">单击</button><button   id="btn2">双击</button><button   id="btn3">鼠标按下</button><button   id="btn4">鼠标抬起</button><script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");var btn4 = document.getElementById("btn4");btn1.onclick = function(){console.log("单击事件");}btn2.ondbclick = function(){console.log("双击事件");}btn3.onmouseup= function(){console.log("鼠标抬起");}btn4.onmousedown= function(){console.log("鼠标按下");}</script>

  <style>.box{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div class="box" id="btn4"></div><script>var btn4 = document.getElementById("btn4")btn4.onmousemove = function(){console.log("内部移动");}</script>

47.Event事件对象

<button id="btn">按钮</button><script>var btn = document.getElementById("btn");//Even事件对象，其实就是参数btn.onclick = function(event){console.log(event);}</script>

（1）Event.target:点什么就返回什么

<button id="btn">按钮</button><script>var btn = document.getElementById("btn");//Even事件对象，其实就是参数btn.onclick = function(event){// console.log();event.target.innerHTML = "点击之后"//点击  按钮  变成  点击之后}</script>

（2）Event.type

<body>
<button id="btn">按钮</button><script>var btn = document.getElementById("btn");//Even事件对象，其实就是参数btn.onclick = function(event){console.log(event.type);//click    看添加的是什么事件}</script>

(3) 阻止浏览器跳转preventDefault();

    <a href="https://itbaizhan.com" id="it">itbaizhan</a><script>var it = document.getElementById("it");it.onclick = function(e){e.preventDefault();console.log("dianji ");}</script>

（4）stopPropagation();

  <style>.root{width: 200px;height: 200px;background-color: #999;}.box{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div class="root" id="root"><div class="box" id="box"></div></div><script>var root = document.getElementById("root");var box = document.getElementById("box");root.onclick = function(){console.log("root");}box.onclick = function(e){e.stopPropagation();console.log("box");}</script>

点击红色的盒子不加e 会显示root和box，但加了e只会显示box

48.键盘事件

49.表单事件

（1）input事件

    <input type="text" id="username"><script>
var username = document.getElementById("username");
username.oninput = function(e){console.log(e.target.value);
}</script>

（2）select事件

（3）change事件：不会连续触发，统一完成之后才会触发

（4）reset事件和submit事件

50.事件代理

51. 定时器setTimeout

  <script>setTimeout(function(){console.log("三秒之后打印");},3000)</script>

以下是举例说明

如果想要只想局部，将 var that = this

(2)取消定时器

  <script>var TIMER =  setTimeout(function(){console.log("三秒之后打印");},3000)clearTimeout(TIMER)</script>

52.定时器setlnterval()

    <script>
// 每间隔一秒打印一回var i = 0;setInterval(function(){i++console.log(i);},1000)</script>

53.防抖（debounce）

54.节流