html5-JavaScript初始js（获取元素，再修改；事件；修改样式；数据类型）

JavaScript的作用：

                  页面特效

                  前后交互

                  后台开发（node）

 

/*多行注释*/

//单行注释

 

1.JavaScript 是一种脚本语言，是一种动态类型、弱类型
2.JavaScript通常用来操作HTML页面的 html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

 

 JS代码写在哪里：
     1. script标签里面
      2.写在外部.js后缀文件里面，通过script标签引入<script src="路径"></script>
      3. 写在标签里面 

 

注意：在引入js文件的script里面，一定不能再写js代码
           标签里面写js代码一般情况下不推荐(指行内的样式)

          1. 严格区大小写

           2.每一行完整语句后面加分号

          3.变量名不能使用关键字和保留字

           4.代码要缩进，保持可读性

 

 

script标签的位置：
         head或者body里面（一般在body）
         要注意是否需要加上window.onload = function（）{ alter（）}  在最后执行（先执行body，在执行head）（一个页面只能出现一个）
         如果说没有什么特别的要求，一般script标签放

 

alter（"  "）；以弹窗的形式表现

console.log（"  "）；以打印的方式呈现（f12）   一般这两个用来调试代码哪里出问题

 

获取元素：

“=”代表赋值

 //修改别的标签的内容时，得用innerHTML（会解析标签）innerText（不会解析标签）

 

修改内容：

  也可以写做document.getElementByTd("txt").innerHTML="<h1>我还是我</h1>"

1. 首先获取id为xxx的元素     document.getElementById(“”);

2. var 是 js 定义变量的关键字

3. innerHTML 和 innerText 可以修改/获取

 

 

 

object    oBox 通常用来表示唯一的变量   如 id  只能有一个为box

array      aBox通常用来表示多个的变量    如class  box可以有多个 

var  定义变量，变量名不能为关键字和保留字。 

id

        document.getElementById(“”); 通过id获取元素

class

       document.getElementsByClassName(“”); 通过class名字获取元素

   例  var  aBox = docution.getElementsByClassName("box");(获取了 所有的class名为box的元素)

       aBox[1] .innerHTML = "内容"；

tagName（通过标签获取）

        document.getElementsByTagName(“标签，如div”); 通过标签获取元素

name

        document.getElementsByName(“”); 通过 name的属性获取元素，一般用于input'

selector

        document.querySelector (“路径，如#warp p i ，为id为warp下的p标签下的i标签”);  通过CSS选择器获取第一个

        document.querySelectorAll(“”);通过CSS选择器获取所有 ，然后 需要通过下标去选择

 

 

 

事件：

   是指JavaScript捕获到用户的操作，并做出正确的响应

   在事件函数里面，有一个关键字this，代表当前触发事件的这个元素（如下例图中的，btnDom，addressDom）

   事件：用户的操作

   元素.事件 = 函数；

     鼠标事件：

          左键单击 onclick

          左键双击 ondblclick

          鼠标移入 onmouseover/onmouseenter ***

          鼠标移出 onmouseout/onmouseleave ***

例如：

 

 

修改样式：

  js操作元素的标签属性： input 标签 value
            规范的标签属性：
                . 符号直接操作（可读可写）
            不规范（自定义）的标签属性：
                获取：.getAttribute()
                设置：.setAttribute(“定义名”,‘"什么文件如py)
                移除：.removeAttribute()

          注意：
          所有的 路径、颜色 获取的结果不一定是你写的内容
          通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
          自定义标签属性的操作方式，同样可以操作符合规范的标签属性（a.getAtteibute("定义的变量名")）

 

  行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的

例：

也可以为
            oBox.style.cssText = "width: 300px;height: 300px;background: red;"
加边框   oBox.style.marginLeft = "100px"(.后边不能加变量，如果是变量的话采用第二种方法，如var qq = “background”   oBox.style[qq] = "red";)

         或oBox.style.["margin-top"] = "50px"

 

数据类型：

js六大数据类型
	number——数字 在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确
	string——字符串
	boolean——布尔值 true false
	null
	undefined——未定义 一个变量声明之后没有赋值就是undefined
	object——对象
	在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null

定义变量：

         var   可以重复定义

         let   不能重复定义      const（常量不改变的）