js学习

## js学习

### 1.概念

```js
js一种直译型脚本语言，一种动态语言、弱类型语言、支持内置类型。它的解释器被称为javascript引擎。它浏览器的一部分。用于客户端的脚本语言，最早是html网页上使用用来给HTML增加动态效果。
1995年，网景首次设计实现的 。因为网景跟sun合作的，因此才起名叫javascript，它除了语法风格跟java有点接近，其他跟java没有任何关系，目前js版权属于oracle公司。
```

### 2.作用

```bash
    1、嵌入文本到我们的HTML页面上
	2、对浏览器事件作出响应
	3、读写HTML
	4、在数据提交到服务器之前先做数据验证
	5、检测访客的浏览信息
	6、控制cookie
	7、基于nodeJs技术进行服务端的编程
```

### 3.语法

```js
js可以有几种写法：
1、写在script标签内
<script type="text/javascript" >
var core=123;
document.write(core);
</script>
2、写在外部js文件里面
<script type="text/javascript" src="b.js">
</script>
vim b.js
var core=123;
document.write(core);
3.建议html、css、js分别写在不同的文件中，在html直接引入即可。
```

#### js数据类型

```bash
js基本的数据类型 ：数字类型，字符串型，布尔型，undefined，null,对象类型 数组;在使用时直接 var 变量名 =值
1、数字类型（Number）
	只有一种数字类型，数字 可以是小数 ，也可以是整数
	var core =123；
	document.write(core);//打印core
	
2、字符串型（string）
	字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串;
	var core ="123"；
	document.write(core);//打印core
	
3、布尔类型（boolean）
	一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false,这两个个值一般用于说明某个事物是真或者假,js一般用布尔类型来比较所得到的结果;
	var core =(1<3)；
	document.write(core);//打印core
	
4、null（空）
	null
	关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
	如果试图去引用一个没有定义的值，就会返回一个null。
	这里注意一点：null并不等于"" 或者0
    var exp=null;
    if(exp==null){
        alert("is null");
}
5、undefined（未定义）
	这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值
	var core;
	document.write(core);//打印core
	！null和undefined区别：
	null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值
```

#### 运算符

```js
用于执行程序代码运算，会针对一个以上操作数来进行	
	1、算术运算符
	+   -   *   /   %  ++  --		
	字符串拼接使用“+”
	var core = "ab"+"c";
	2、比较运算符	
	< > == ！= <= >= === 全等于：将数值以及数据类型一并比较
	！==不全等于：将数值以及数据类型一并比较
	3、赋值运算符
	=	+= -= *= /= %=
	a=a+2;==>a+=2
	a=a-2;==>a-=2
	a=a*2;==>a*=2
	a=a/2;==>a/=2
	a=a%2;==>a%=2	
	
	4、逻辑运算符
	 &&  全真为真
	||  一个为真就是真
	！  取反
	
	5、三元运算符（三目运算符）
	表达式1?表达式2:表达式3
	当我的表达式1成立时  执行表达式2  否则执行表达式3
    var a=10,b=20;
    a > b ? alert("a大"):alert("b大");
```

#### 数据类型间转换

```js
1.查变量类型
var a=123;
document.write(typeof(a));
2.数据类型间转换
var a="123";
var b=parseInt(a);//字符串a转换为整数b
document.write(b);
```

#### 条件语句

```js
if语句
	if(条件){
		函数体
	}
	
	if else语句
	if(条件){
		函数体1
	}else{
		函数体2
	}
	
	if.....else if......else语句
	if(条件1){
		
	}else if(条件2){
		
	}else if(条件n){
		
	}else{
		
	}
	举例：
	var a=3;
	if(a>4){
	document.write("a>4");
	}else{
	document.write("a不大于4");
	}
	switch语句:多分支语句
	
	switch(变量){
		case a:
		.....
		break;
		case b:
		.....
		break;
		case c:
		...
		break;
		........
		default:
			....
			break;
	}
	举例：
	var core=parseInt(window.prompt('input'));//键盘录入整形
	switch(core/10){
		case 9:
		document.write("优秀");
		break;
		case 8:
		document.write("一般");
		break;
	    default:
			document.write("不行");
			break;
	}
	
	循环结构：
	1、while循环：先判断条件 当条件成立 再执行
	while(循环成立条件){
		....
	}
	
	2do...while循环:不论条件成不成立 先执行一遍 再判断
	do{
		.....
	}while(循环成立条件)

3、for循环
	4、for in循环
	
	continue：
	跳过当前循环，直接进入循环的下一个步骤
	
	break:
	结束循环
```

#### 节点操作

```js
#增删改查
	一、获取节点：
	1、通过id获取
	document.getElementById("id")
	节点.getElementById("id值")
	！返回的是一个具体的节点
	
	2、通过标签名来获取节点
	getElementsByTagName("div")
	！返回的是一个节点数组,即使只有一个
	
	3、通过标签的Name值来获取
	getElementsByName("标签的name值")
	!返回的是一个节点数组
	
	4、通过class值来获取节点
	getElementsByClassName("类名")
	!返回的是一个节点数组
	二、创建插入节点
	1、document.createElement("div")//创建一个元素节点
	2、document.createTextNode("文本文本")//创建一个文本节点
	
	被插入的节点.appendChild(创建的节点)//在节点后面添加
	
	父节点.insertBefore(创建的节点，被插入的节点)//在已知父节点的某个孩子前面添加内容
	改变文本内容：
	选中的元素.innerText='';//直接将HTML代码当做字符来处理
	选中的元素.innerHTML='';//可以识别HTML代码
	删除：直接设置为空（""）
	
	替换节点：
	父节点.replaceChild(新节点,老节点)
	
	克隆(复制节点)
	
	选中的元素.cloneNode(true/false):
	当clone参数为true的时候：选中元素里面所有懂得内容克隆
	当clone参数为false的时候：选中元素本身克隆
	
	删除节点：
	父节点.removeChild(子节点)
	
	节点的属性操作
	如何来获取属性：
		选中的元素.getAttribute("属性名")
	更改属性：
		选中的元素.setAttribute("属性名","新的属性值")
	新增属性
		选中的元素.setAttribute("原本没有的属性名","属性值")
	删除属性
		选中的元素.removeAttribute("属性名");

```

#### 浏览器输出

```js
#JavaScript 能够以不同方式“显示”数据：
1.使用 window.alert() 写入警告框
<script>
    window.alert(7 + 6);
</script>
2.使用 document.write() 写入 HTML 输出
<script>
　　document.write(7 + 6);
</script>
3.使用 innerHTML 写入 HTML 元素
<p id="demo"></p>
<script>
　　document.getElementById("demo").innerHTML = 7 + 6;
</script>
4.使用 console.log() 写入浏览器控制台
<script>
    console.log(7 + 6);
</script>
```

#### 函数

```js
1.js函数通过 function 关键词进行定义，其后是函数名和括号 (){}。

1).函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

2).圆括号["()"]可包括由逗号分隔的参数;

3).由函数执行的代码被放置在花括号中：{}

2、函数分为：有名函数和匿名函数。

有名函数：function funct_name(参数1，参数2，参数3){

要执行的代码
　　　}

匿名函数：function (参数1，参数2，参数3){

要执行的代码
　　　}

3.构造函数：

1)、在 js中，用 new 关键字来调用的函数，称为构造函数。

2)、常用的构造函数： 
　　　　var arr = []; var arr = new Array();

4.调用函数：

调用函数时【funct_name()】，一定加“()”；
　　<div class="box" onclick="funct_name()">点击</div>
   <script type="text/javascript">
    function  funct_name(){
        alert("111111");
    }
   </script>
5.自调用函数
   <div class="box2" id="box2"></div>
    <script type="text/javascript">
    (function() {
        document.getElementById("box2").innerHTML = "您好";
    })();
   </script>
6.返回函数
   <div class="box" id="box"></div>
   <script type="text/javascript">
    function funct_name(a, b) {
        return a * b;
    }
    var x = funct_name(9, 8);
    document.getElementById("box").innerHTML = x;
   </script>
```

#### js前后端交互

```html
https://www.cnblogs.com/gengzhen/p/12356367.html
```

### 4.参考

```html
https://blog.csdn.net/weixin_30917213/article/details/99330105?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2
```