【自学笔记】前端02_JavaScript学习01_基础认知

JavaScript是一门跨平台、面向对象的脚本语言。用于控制网页行为的，能使网页可交互。

1 js基础语法

1.1 js引入方式

1. 内部脚本
   将js定义在html页面内部

js代码必须位于<script双标签之间
<script可以写在html文档任意位置，任意数量。 一般把脚本放在<body标签的底部，可以改善加载速度

2. 外部脚本
   将js定义在外部js文件里，然后通过<script src="路径"引入对应js

外部js文件里，只包含js代码，不包含<script标签
js不能自闭和（不能写成单标签）

1.2 js书写语法

1.区分大小写
与java一样，变量名，函数名等都区分大小写
2.行末尾分号" ; “可有可无，一般要写
3.注释：与java一样，单行” // " 多行" /* */"
4.大括号表示代码块

if(count==3){
	代码块
}

1.3 js输出语句

1.警告框

<script>
	window.alert("内容")弹出框，一般省略"window."
</script>

2.浏览器输出

<script>
	document.write("内容")改变浏览器内容，属于dom操作浏览器元素
</script>

3.控制台输出

<script>
	console.log("内容")写入浏览器控制台信息
</script>

1.4 js变量

1.变量的规则

变量类型：
js是一门弱类型语言，变量可以存放不同类型的值
变量名规则：
①组成字符可以是任意字母数字下划线美元符号（$）
②开头不能是数字
③建议用驼峰命名

2.声明关键字

var：最通用的声明关键字，作用域全局变量，而且可以重复声明（会覆盖上一个同名变量）
let：js6的新关键字，只在方法体{}内部有效的局部变量，不能重复声明
const：js6的新关键字，声明常量，变量值不能改变

1.5 js数据类型&运算符

1.数据类型

js中分为原始类型和引用类型

原始类型：number,string,boolean,null,undefined（声明的变量未初始化时默认值为undefined）

2.运算符

算术运算符：+，-，，/，%，++，–
赋值运算符：=，+=，-=，=，/=，%=
比较运算符：>，<，>=，<=，！=，== ， ===（三等号与二等号的区别是二等号会自动转换至类型相同再比较值，三等号不会）
逻辑运算符：&&，||，!
三元运算符：条件表达式？ture_value:false_value（如果条件真则执行ture_value否则执行false）

3.类型转换

字符串转化数字：parseInt(“被转换的变量”)
如果字符串字面值不是数值，则转化为NaN
其他类型转化为boolean：
number：0和NaN转化为false，其他均为ture
String：空字符串为false，
Null和undefined：均为false

1.6 函数

函数（方法）是被设计为执行特定任务的代码块
声明语法：

<script>
	function functionName(参数1，参数2..){无需声明类型与返回值，直接return返回
	方法体
	}
</script>

使用：方法名（实际参数）

1.7 js对象

1.7.1.Array

Array对象用于定义数组

定义1：var 变量名=new Array（元素1，2，3…）例var arr= new Array(1,2,3)
定义2：var 变量名=[元素1，2，3…] 例var arr[1,2,3]
访问：arr[索引] = 值;

常用属性：length:设置或返回数组长度

常用方法：

forEach()：遍历数组并调用
push()：将新元素加到数组末尾并返回新数组长度
splice()：从数组删除元素

1.7.2.String

定义1：var 变量名=new String（…）例var arr= new String(abc)
定义2：var 变量名=“…” 例var str=“abc”

常用属性：length:返回字符串长度

常用方法：

charAt()：返回指定位置字符
indexOf()：检索字符
trim()：去除字符串两边的空格
substring()：提取字符串中两个指定索引号之间的字符

1.7.3.JSON

js可以自定义对象类型

<script>
	var 对象名 = {
	属性名1：属性值1,
	属性名2：属性至2,
	方法名：function(参数1，参数2..){
	方法体
	};

例如
	var user = {
		name:Tom,
		gender:"male",
		eat：function(){
			alert("开香槟喽");
		}
	};
</script>

调用方式：

对象名.方法; 例如user.eat();

介绍完自定义对象现在正式介绍JSON（JavaScriptObjectNotation，JavaScript对象标记法）
JSON是通过JavaScript对象标记法书写的文本。作为一种数据载体在网络中进行数据传输

JSON的声明语法：

<script>
	JSON的声明语法：
	var 变量名  = '{"key1":value1,"key2":value2}';
	例如
	var userStr = '{"name":Tom,"age":18,"addr":["北京","上海","重庆"]}';
	这样就把userStr封装了JSON数据，然后对userStr进行操作即可
</script>

怎么把JSON字符串转为JS对象？

var jsObject = JSON.parse(userStr);

JS对象转JSON：

var jsonStr = JSON.stringify(jsObject);

1.7.4.BOM

BOM也就是浏览器对象模型，可以通过JS与浏览器对话，JS将浏览器各部分封装成了对象
主要有五个对象组成：
1.Window：浏览器窗口对象
方法：

<script>
用"window.方法名"调用，一般可省略window.
	alert():显示确认警告框
	confirm():显示确认取消对话框
	setInterval():按周期（毫秒）执行函数或表达式
	setTimeout():在指定时间后执行函数或表达式
</script>

2.Location：地址栏对象
方法：

<script>
用"window.location.属性"调用，一般可省略window.
	location.href:可以设置或返回完整的URL
	例如
	alert(location.href);弹出显示当前地址
	location.href = "https"//www.baidu.com";设置新地址，并会自动跳转该页面
</script>

3.Navigator：浏览器对象
4.Screen：屏幕对象
5.Histroy：历史记录对象

1.7.5.DOM

DOM也就是文档对象模型，可以通过JS修改HTML代码来实现效果变化，JS将html文档各部分封装成了对象
常见的DOM对象：

1.Document：整个文档对象
2.Element：元素对象
3.Attribute：属性对象
4.Text：文本对象
5.Comment：注释对象

JS通过DOM可以实现改变①页面内容，CSS样式②对DOM事件响应③添加删除元素

DOM使用方法:
1.获取要操作的元素对象

1.根据id获取单个对象
<script>var h1 = document.getElementById('h1');</script>
2.根据标签名称获取含对象的数组
<script>var divs = document.getElementsByTagName('div');</script>
3.根据name属性获取含对象的数组
<script>var hobbys = document.getElementsByName('hobby');</script>
4.根据class属性获取含对象的数组
<script>var clss = document.getElementsByClassName('cls');</script>

2.操作元素对象
以下是一些操作元素的示例

1.通过img属性修改图片标签
<script>
	var img = document.getElementById('img1');
	img.src = "../img02";
</script>
2.通过innerHTML在所有的div标签后面增加文本，且改为红色字体
<script>
	var divs = document.getElementByTagName('div');
	for(let i = 0; i<divs.length;i++){
	const div = divs[i];
	div.innerHTML += "<font color = 'red'>添加在后面的红色文本</font>";
}
</script>	

在节末附上js的学习笔记思维导图，包括了DOM增删查改操作，事件监听等：

1.7.6. js事件监听

1.事件绑定
方法1：通过标签事件属性绑定

<input type="button" onclick="on()" value="按钮1">
<script>
      function on(){
          alert('点击事件');
      }
</script>

方法2：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
     document.getElementById('btn').onclick=function(){
         alert('DOM绑定事件');
    }
</script>