JavaScript学习笔记

JavaScript

脚本语言

引入

• 内部引入

  <script>
      //……
  </script>
  

• 外部引入

  <script src=""></script>
  

基本语法

JavaScript严格区分大小写。

1. 定义变量

   变量类型 变量名 = 变量值

   变量类型：var

   局部变量：let

   • 数据类型

     • 数

       js不区分小数和整数

       123 //整数
       123.1 //浮点数           判断浮点数大小Math.abs()<0.0000001   其中Math.abs()是求绝对值
       1.123e3 //科学计数法
       -1 //负数
       NaN //not a number
       Infinity //无穷大（数值超范围）
       

     • 字符串

       'abc'

       "abc"

     • 布尔值

       true

       false

     • 数组

       不需要同类型对象

       如果越界会报undefined

     • 对象

       用大括号，每个属性之间用逗号隔开

       var person ={
           name:"abc",
           age:3,
           tags:['a','b','...']
       }
       

     • null（空）和undefined（未定义）

2. 运算符

   • 逻辑运算符

     • 和：&&
     • 或：||
     • 非：！

   • 比较运算符

     • == 等于（值一样即为true）
     • === 绝对等于（类型也需一样才为true）

     另：NaN===NaN结果为false

     ​ NaN与所有数值不相等，包括自己

     ​ 只能通过isNaN判断isNaN()

3. 条件控制

   if(){
      
      }
   else if(){
           
           }
   else 
   

4. 输出

   • 弹出警告框

     alert()

     window.alert()

   • 将内容写入HTML文档

     document.write()

   • 写入HTML元素

     innerHTML

   document.getElementById("id").innerHTML="内容"
   //document.getElementById("id")使用id属性查找HTML元素
   //innerHTML="内容"用于修改元素的HTML内容
   

   可以在文本字符串中使用反斜杠\对代码行进行换行。

   • 在浏览器控制台打印变量

   console.log(变量名)
   

操作BOM对象

BOM：浏览器对象模型

1. window：浏览窗口

2. Navigator：封装了浏览器的信息

   大多数时候不使用navigator

3. screen：代表屏幕尺寸

4. location：代表当前页面的URL信息

host："space.bilibili.com"
href：               // 网址
protocol："https:"
reload：f reload()   // 刷新网页
location.assign('网址') //重定位（跳转网页）

5. document：当前页面，HTML DOM文档树

   //获得具体文档树节点
   <dl id="app">
       <dt>java</dt>
   	<dd>javaSE</dt>
   	<dd>javaEE</dd>
   </dl>
   
   <script>
       var dl=document.getElementById('app');
   </script>
   //获取cookie
   document.cookie
   

6. history：浏览器的历史记录

操作DOM对象

浏览器网页就是一个DOM树形结构。

• 更新
• 遍历
• 删除
• 添加

要操作一个DOM节点，必须要先获得这个DOM节点。

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h1=document.getElementsByTagName("h1");
    var p1=document.getElementById("p1");
    var p2=document.getElementsByClassName("p2");
    var father=document.getElementById("father");
    //获取父节点下的所有子节点
    var children=father.children;

</script>

更新节点

id1.innerText='……'//修改文本的值
id1.innerHTML='<strong>123</strong>'//解析HTML文本标签

id.style.color='red';
id.style.fontSize='20px';

删除节点

先获取父节点，通过父节点删除子节点

father.removeChild();

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="me">javaME</p>
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);//移到节点
    `效果
	<div id="list">
    	<p id="me">javaME</p>
    	<p id="se">javaSE</p>
    	<p id="ee">javaEE</p>
		<p id="js">JavaScript</p>
	</div>`
    
    //创建一个新标签
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText="hello";
    list.appendChild(newP);
    
</script>

---

参考
[1]https://www.runoob.com/js/js-tutorial.html