js脚本小笔记

整理一些自己写过的js笔记

什么是脚本语言

首先解释什么是脚本语言。

1、为了缩短传统的 编写——编译——链接——运行。过程而建立的计算机编程语言。
2、脚本语言（javascript, VBscript）介于html（格式化和链接文本）和c, c++, java 等变成语言之间，
   编程语言通常用于向机器发出一系列复杂指令。
3、脚本语言和编程语言有很多相似之处，函数和变量相似。与编程语言最大的不同是：编程语言的语法和规则更为严格和复杂。
4、脚本语言也是语言，由程序代码组成。
5、脚本语言是一种解释性语言，不同于其他语言可以编译成二进制代码，以可以执行的形式存在，脚本语言不用编译，可直接使用，
   由解释器负责解释。
6、脚本语言以文本形式存在，类似命令。

脚本语言的特点：快速开发，语言化，极大的简化了开发，部署，测试，和调试的周期过程。不需要耗时的编译/打包过程。

js的特点

js是一种基于对象(Object)和事件驱动(Event Driven)，并具有相对安全性的客户端脚本语言，是基于浏览器内核为html添加生命的语言。

特点：动态，弱类型，单线程，内置支持类

1、相对安全的脚本语言，因为不被允许访问本地的硬盘，且不会将数据存入服务器，只允许对网络文档进行修改和删除。
2、js方便操作html对象，控制页面中各元素的外观，状态，属性及运行方式。
3、是一种跨平台脚本语言，无需环境，只要浏览器即可运行。

js 定义变量基本规则：

1. 不能用数组开头；
2. 不能用 js 的关键字和保留字命名；
3. 可用 _ (下划线) 和 $ 开头是允许的；
4. 变量命名要有意义；
5. 变量名严格区别大小写；

1. js基本语句

<div class="box"></div>
<script>
// 获取 dom 元素
var box = document.getElementById("box"); // 通过 id ,获取的是页面上 id 为 box 的元素。
var box = document.getElementsByClassName("box"); // 通过 classname 获取到的值是数组，页面上所有 classname 为 box 的元素。
var box = document.getElementsByTagName("div"); // 通过标签元素，获取到的是页面里所有 div 元素。

var a = 'haha';
document.write(a);
// 将 a (haha)打印在页面上
console.log(a);
// 输出到控制台
box.innerHTML = a;
var c = box.innerHTML；
// 把 box 的 html 内容,赋值给 c ；box 的 html 内容为 a,会覆盖以前的内容

alert(a);
// 弹出层 警示框 !!! 会打断后面的程序运行
confirm("请确认");
// 弹出层 确认框 !!! 会打断后面的程序运行
prompt("请输入名字");
// 弹出层 输入框 !!! 会打断后面的程序运行

// 在 js 中操作 dom 元素的样式(css)
box.style.css("width", "40px");
// box 的 width 为 40px;
box.style.css("paddindTop", "40px");
// css中写法为：padding-top, js中写法为paddingTop,!! 首字母变大写,去掉 - ;box 的 paddind-top 为 40px;
box.style.css({
	"paddingTop":"40px",
	"marginTop":"40px",
	"background": "#f0f0f0"
});
// 同时在 js 中，操作 dom 元素的多个样式。像 json 对象格式的写法;

box.offsetLeft;
// 盒子 box 的左距离; 盒子的左边到 窗口边界的距离

var b = "哈哈哈哈你";
document.write(b.length);
// b.length  b 字符的长度
document.write( b.charAt(0) );
// 输出 b 的第一个字符;
document.write( b.charCodeAt(0) );
// b 的第一字符的编码,把汉字转化为编码;
document.write( b.fromCharAt("字符的编码") );
// 把字符编码转化为汉字;
document.write( b.indexof("你") );
// 找出 b 字符串中 "你" 字符的位置;
</script>

2.获取dom的子元素

分享一个面试题：获取div下的所有子集dom元素及其个数

<script>
var box = document.getElementById('box');
console.log(box.children); // 查看box下的子集元素;
var dom_obj = {};
function getTarName(rootElement){
	let currentName = rootElement.children;
	if(currentName){
		for(let i = 0; i < currentName.length; i++){
			getTarName(currentName[i]);
			if(dom_obj.indexof(currentName[i]) > -1){
				dom_obj[currentName[i]]++;
			}else {
				dom_obj[currentName[i]] = 1;
			}
			
		}
	}
}
getTarName(box);
console.log(dom_obj);
</script>

3.关于字符串的截取和拼接

<script>

var b = "哈，你吃饭了吗";
b.split("你"); // 用 "你" 字符来 分割字符串，得到的是一个数组； 结果是: ["哈，", "吃饭了吗"]

// 字符串的截取方式
b.slice(2); // 分割下标 2 以后的字符 结果是："你吃饭了吗？"
b.slice(2 , 5); // 分割下标 2 到 下标 5 以后的字符；结果是 "你吃饭"

b.substr(0, 5); // 从哪里开始到什么长度（长度）。eg：从 0 位置开始，5 个字符长度
b.substring(0, 5); // 从哪里开始到哪里结束（位置）。eg：从 0 位置开始，到下标为 5 的位置结束
b.substring(7); // 截取到下标为 7 的位置
b.substring(-10, 5); // 自动截取到 0 - 5

// 拼接字符串的方式 直接使用 + 就行
var bb = "我没吃呢。一起吗？"
console.log(b+bb); // 结果为：哈，你吃饭了吗？我没吃呢。一起吗？

</script>

4.数组的分割

<script>

// 数组的截取
var c = ["1","2","3","4","5"];
c.slice( 2 , 5 ); // 从下标 2 到 下标 5 , 结果为：["3" ,"4", "5"]
// 这个方法可以用在：做数据分页
var curr_list = all_list.slice( ( curr_page - 1 ) * pages , curr_page * pages );
// 当前数据页 = 总数据量.slice( ( 当前页 - 1 ) * 每页的个数 , 当前页 * 每页的个数 );
// curr_list = all_list.slice( (2 - 1) * 20, 2 * 20 ) ; <==> curr_list = all_list.slice( 20 , 40 );
// 每页 20 页数据, 当前为第 2 页，得到的数据是 下标 20 - 40 的数据列表;

c.pop(); // 截取 数组 c 的最后一个值; 
c.shift(); // 截取 数组 c 的第一个值; 
c.push("6"); // 给数组 c 的末尾后添加一个 6 ;
c.unshift("0"); // 给数组 c 的首位前添加一个 0;

c.sort(); // 数字 数组的自动排序

</script>