https://www.w3school.com.cn/js/js_output.asp

一.javascript数据类型：

String :字符类型

ver a1="a",
    a2="4",
    a3="true"   //只要是绿色都是字符类型

number 数值类型(没有二进制，且含小数位的减法不靠谱)

var b1=1,
    b2=-2,
    b3=0xFF,  //16进制
    b1=067, //八进制
    b1=1.2e-5

Boolean 布尔类型

var c1=true,
	c2=false

undefined 未定义类型

var d1;  //未给变量复制的情况下

null 空值

object 对象类型

var obj={
    a:1, //a和b是属性
    b:2
    
};
console.log(obj,obj.a);  //打印obj和obj中a的值

var goods={
    name:"超强笔记本"，
    system:"window 10",
    price:"6000元"
}
console.log(goods["price"]); 
//等价于console.log(goods.price)  使用点（.）的属性必须固定，使用中括号的属性可以是变量
goods["price"]=8000元；修改price的值

var s="name",
console.log(goods[s]);  //相当于调用的是goods中的name属性的值

二.数据类型的转换

数值型数据颜色：蓝色

字符型数据颜色：黑色

// n.toString(参数)   
var n=35;
console.log(n.toString())  //转换为字符型
console.log(n.toString(16)) //toSring(r)  r只能介于2——36之间（不包括36，不然会报错）;转换为16进制

var color=0xFF0000;
console.log(color.toString(16)); //设置一种颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        background-color:#00
        }
    </style>
</head>
<body>
<div id="div0"> </div>
    <javascript>
        var n=35;
        var div = document.getElementById("div0");
        var color = "#0x000000";
        setInterval(function() {
        color+=2;
        div.style.backgroundColor = "#"+color.toString(16);        
        },5)
        
<!--        for (var i = 0; i < n; i++) {-->
<!--            div.appendChild(document.createElement("div"));-->
<!--        }-->
    </javascript>
</div>
</body>
</html>

toString()的作用：将类型转换为字符型，并按照参数（进制）进行转换

toFixed(r)的作用：保留小数点后几位，r属于0----100之间

转换为数值型

console.log(parseFloat("3.145"));   //将字符型转换小数型

console.log((parseInt("3.145"));    //转换为整数，不会四舍五入

console.log(parseFloat("3.145a")); //输出3

console.log(parseInt("3.145a"));    //输出3

console.log(Number("3.145a"));  //输出NaN
//使用parseFloat和parseInt时，转换根据第0 位开始到字符所在的位置的前一位，如果第0位就是字符型，将转换为NaN

Number() 函数只能将字符串转换为数字，而字符串 "3.145a" 中包含非数字字符 "a"，因此无法转换为数字。

"NaN" 是 JavaScript 中的一个特殊值，表示 "Not a Number"（不是一个数字）。它通常在数学运算中出现，当一个操作无法返回有效的数字结果时，就会返回 NaN。例如，当尝试将非数字字符串转换为数字时，结果就会是 NaN。NaN 是一个特殊的数值，它与任何其他值都不相等，包括它自己。

三.栈和堆详解

var a=4;
var b=a;
a=10;
console.log(a,b);  //输出 10    4

//当存储的数据达到某一限制时会造成堆栈溢出
//栈会自动清理，堆不会自动清理
//内存泄漏（造成堆栈溢出）：不断向堆中存储存储，而不清理便会造成内存泄露

四.垃圾回收机制（GC）

obj=null;  //达到一定的垃圾量，就会清理

用于防范内存泄漏的可能，有两种方法

自动清理：当内存达到一定限制时，会自动清理

js中只有自动清理

堆，栈，垃圾回收机制:就是将引用堆中地址的对象设置为null，并且讲所有引用该地址的对象地址都设置为null，不会及时清理，垃圾回收车会根据内存的情况在适当的时候清理堆中的孤儿

五.赋值运算符

var x=5;
x+=5; //x=x+5;
x%=5; //给x取5的余

var y="5";
y+=5;  //x+=n; n就是步长
console.log(y); //55

var a1="10";
a1++; //a1+=1或a1=a1+1类似
console.log(a1); // 12  ；使用一元运算符时，将会把所有内容转换为数值运算，不使用字符运算

++a1; //先加（+在前）
a1++; //后加（+在后）

六.进制

2进制，8进制 ，10进制，16进制

二进制与十进制的快速转换法

10=1010（2进制）     //十进制转换为2进制
1010=1*2（3）+0*2（2）+1*2（1）+0*2（0）=10  //2进制转换为2进制


8421
1010=10=8+2
1101=15=8+4+1

16(1)   16(0)
8421    8421
1001    1010  =9*16(1)+10=154

七.获取指定id的内容

获取指定id的该标签中的所有内容：
var x = document.getElementById("bkImg_370");

结果：
<img id="bkImg_370" title="371" src="http://img1-qn.bookan.com.cn/jpage7/231704/231704-674320/1d64badb_big.jpg" alt="" data-v-031c142a="">

获取指定标签中的指定内容

<img id="bkImg_370" title="371" src="http://img1-qn.bookan.com.cn/jpage7/231704/231704-674320/1d64badb_big.jpg" alt="" data-v-031c142a="">
获取中的src的值：
var x = document.createElement("EM").src;

结果：http://img1-qn.bookan.com.cn/jpage7/231704/231704-674320/1d64badb_big.jpg

八.常用代码

window.alert("公众号：村雨遥"); 弹窗
console.log("公众号：村雨遥");   打印

九.getElementsByTagName()

getElementsByTagName() 方法用于返回具有指定标签名的所有子节点。
var div = document.getElementById("myDiv");
var ul = div.getElementsByTagName("ul");
上面的代码将返回具有标签名为 "ul" 的所有子节点。

getElementsByTagName() 方法的语法如下：
element.getElementsByTagName(tagName)
其中，element 是 DOM 元素，tagName 是元素的标签名(如div)。

getElementsByTagName() 方法返回的是一个 HTMLCollection 对象，该对象包含具有指定标签名的所有子节点。

HTMLCollection 对象是一个类数组对象，它具有与数组相同的大部分方法，例如 length、item、indexOf 等。

HTMLCollection 对象还具有一些独特的方法，例如 querySelectorAll() 方法。

querySelectorAll() 方法用于返回具有指定 CSS 选择器的所有元素。
var div = document.getElementById("myDiv");
var ul = div.querySelectorAll("ul");
上面的代码将返回具有 CSS 选择器为 "ul" 的所有元素。

querySelectorAll() 方法的语法如下：
element.querySelectorAll(selector)
其中，element 是 DOM 元素，selector 是 CSS 选择器。

querySelectorAll() 方法返回的是一个 NodeList 对象，该对象包含具有指定 CSS 选择器的所有元素。

NodeList 对象是一个类数组对象，它具有与数组相同的大部分方法，例如 length、item、indexOf 等。

NodeList 对象还具有一些独特的方法，例如 forEach() 方法。

forEach() 方法用于遍历 NodeList 对象中的每个元素。
var div = document.getElementById("myDiv");
var ul = div.querySelectorAll("ul");

ul.forEach(function(element) {
  console.log(element);
});
上面的代码将遍历 NodeList 对象中的每个元素，并将每个元素的值打印到控制台。

十.获取标签中的内容

如何获取 Lil笑笑 - 山茶花读不懂白玫瑰中title中的内容

可以使用 querySelector() 方法来获取 <span class="audioName" title="Lil笑笑 - 山茶花读不懂白玫瑰">Lil笑笑 - 山茶花读不懂白玫瑰</span> 中的 title 中的内容。
var span = document.querySelector("span.audioName");
var title = span.getAttribute("title");
上面的代码将获取 <span class="audioName" title="Lil笑笑 - 山茶花读不懂白玫瑰">Lil笑笑 - 山茶花读不懂白玫瑰</span> 中的 title 中的内容，并将其赋值给 title 变量。

十一.向js文件中追加内容

js的部分基础_进制

3、向文件中追加内容

Node.js中，在使用文件写入的方法时，如果文件名存在，就会覆盖同名文件的内容。

fs模块中提供追加文件内容的方法。

js的部分基础_html_02

3.1、追加内容案例

js的部分基础_javascript_03

4、文件相对路劲

js的部分基础_选择器_04

/**
 * 向文件中追加内容
 */
var fs = require("fs");
/**
 * 文件绝对路径
 * 绝对(absolute): 盘符
 * eg: U:/wx/219302/workspace_nodejs/ProjectNodeJs_219302/day04/test.txt
 * 相对(relative): 相对当前你当前文件的路径
 * eg: test.txt
 * 路径：path
 * 思考：文件相对路径可以吗? 可以
 *      重点：相对路径【file/文件名】：file这个文件中创建文件。
 *            eg：file/test.txt
 *            ./file/test.txt 【./:表示当前路径下】
 *            ../day04/file/test.txt【../表示当前路径的上一级路径】
 *  */ 
fs.appendFile("U:/wx/219302/workspace_nodejs/ProjectNodeJs_219302/day04/file","Hello World",function(err){
 if(err){
 /**
         * 在程序报错以后，回调函数中代码就不要继续执行了。
         * 关键词：return 【结束回调函数，阻止代码的继续执行】
         * 
         */
 return console.log("文件追加失败！");
    }
 /**
     * 后续的这些代码，我们可以写一些：文件追加成功后要做的一些事情。
     */
 console.log("文件追加成功。");
});

一.使用getElenmentById("demo")

1.使用.innerHTML="",将内容插入id为demo的内容中

2.修改属性

通过修改标签的src属性（source）来改变html的图像：

<body>

<button   onlick="document.getElenmentById("myimage").src='/....gif'"  >  开灯<button>
    
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>    
    
 <body>

3.隐藏属性

document.getElementById("demo").style.display="none";  //与display有关

4.显示属性

document.getElementById("demo").style.display="block";

脚本可以放在或中都行

二.使用脚本的方法

1.直接写，将js代码写在标签中，并在本html源码中调用

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>


<button type="button" onclick="myFunction()">试一试</button>


<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>


</body>
</html>

2.使用scr连接脚本路径

<script src="myScript.js"></script> 
//可以是网站固有的js或自己的js

三.输出

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

四.关键字

break

终止 switch 或循环。

continue

跳出循环并在顶端开始。

debugger

停止执行 JavaScript，并调用调试函数（如果可用）。

do ... while

执行语句块，并在条件为真时重复代码块。

for

标记需被执行的语句块，只要条件为真。

function

声明函数。

if ... else

标记需被执行的语句块，根据某个条件。

return

退出函数。

switch

标记需被执行的语句块，根据不同的情况。

try ... catch

对语句块实现错误处理。

var

声明变量。

五.JavaScript 使用 Unicode 字符集