初识js

JavaScript 是基于事件与对象驱动的解释性脚本语言。

js的组成

1 ECMAScript ：js的语法标准（规则）；
2. DOM： Document Object Model 文档对象模型 。
3. BOM：Browser Object Model 浏览器对象模型。

js 的引入方式

1.行间引入
例：<button onclick = "alert ('确定提交‘）”> `
注意：相同的引号不可以嵌套 。
2.内嵌式

 <script>
     document.getElementById("btn").onclick = function(){
         alert(" YOU ARE BEUITFULEF");
     }


</script>

Script标签可以有任意多个，可以存放在任意位置，但一般放在标签内 或body的末尾，不过建议加载body末尾。

3. 外链引入

   注意：若引入的是外部js文件，script 标签内就不要放其他的。

js执行顺序：从上到下，遇script标签以后会暂停，往下执行，先执行script标签中的额内容，等script标签中的内容执行完以后，才会继续执行。

js的使用

简单三部曲

   //通过获取元素的id值获取某个元素
1.找到元素。document.getElementById("id名") ；
2.添加什么事件  
  单击事件  标签 .onclick
        document.getElementById("id名").onclick
 3 添加事件后要做的事情
 document.getElementById("id名").onclick = function() {}

变量：存储数据的容器

声明变量：var 变量名；
注意：声明了但未赋值则是undefined；

关于变量的命名规则：

1.只能以字母、_、$ 开头。
2.不能使用关键字和保留字。如：var
3见名知意 ，并且遵循驼峰标识，第二个单词开始首字母大写。
4.尽量不要同名，否则会被覆盖。

关于js的鼠标事件

1.onmouseover:鼠标移入；
2. onmouseout :鼠标移出；
3. onmouseenter：鼠标移入；
4. onmouseleave：鼠标移出；
5. onmousemover：鼠标移动；
6. onmousedown：鼠标按下；
7. onmouseup：鼠标抬起；
8. ondblclick:鼠标单击；
9. oncontextmenu:鼠标右击；

注：1、2与 3、4的区别：1、2可以触发父元素事件。

操作内容

1.操作input标签
1）获取：标签.value
2)设置 input 的内容： 标签。value= 值。

<!--单击显示后，将前面的密码框的内容显示到 后面的框-->
   <input type="password" id="in" ><button id="btn">显示</button>
   <input type="text" id="out" >
  <script>
      var oIn = document.getElementById("in");
      var oOut = document.getElementById("out");
      var oBtn= document.getElementById("btn");
      oBtn.onclick = function(){
          oOut.value = oIn.value;
      }
  </script>

2.操作双标签内容
1 获取：标签.innerHtml
2.设置：标签.innerHTML = “值”
注意：innerHTML会覆盖，后面的会覆盖前面的 可以用 innerHTML += 标签.

 <div id="box"></div>
   <input type="text" id="in"/>
   <button id="sent" value="发送">发送</button>
   <script >
       var oDiv = document.getElementById("box");
       var oIn = document.getElementById("in");
       var oBtn = document.getElementById("sent");
   //       单击button按钮后 ，将input内的内容输入到div盒子中
       oBtn.onclick = function(){
   //           oDiv.innerHTML += "老师：";
   //           oDiv.innerHTML+=oIn.value + "<br>";
           oDiv.innerHTML += "老师：" + oIn.value + "<br>";
           oIn.value = " ";
       }

操作标签属性：

      1.获取：标签.属性名
      2设置：标签.属性名 = 属性值；

 var oImg = document.getElementById("img");
 var n = 1;
 oImg.onclick = function(){
     n++;
     oImg.src="./images/2.jpg";

 }

操作标签样式：

1.获取：标签.style.属性名
2设置：标签.style.属性名 = 属性值；
注意：标签样式只设置不获取。
若改多种属性是可改class 或
使用 属性名.style.cssText = “要改的属性的类名”；

  <p id="p">
            如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
            3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
            4、如果两个值都是true，或者都是false，那么[相等]。
            5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
            6、如果两个值都是null，或者都是undefined，那么[相等]。
            再说 ==，根据以下规则：
            </p>
              <script>
                <!-- 单击加号，字体字体逐渐变大 并且加粗-->
                var oBtn = document.getElementById("btn");
                var oP = document.getElementById("p");
                var n = 12;
                var a = 100;
                oBtn.onclick = function(){
                    oP.style.fontSize = n + "px";
                    oP.style.fontWeight = a;
                    n ++;
                    a += 100;
                }
            
            </script>