JavaScript发展史
JavaScript介绍
JavaScript
(
简称
JS):
是一种轻量级客户端脚本语言，通常被直接嵌入
HTML
页面，在浏览器上执
行。
JavaScript
的主要用途
:
- 使网页具有交互性（如果不去使用js，只是使用html css那么只是一些死的页面，那么你去点击一个按钮，你去做一些相关的动作，点击一个按钮，发起一个请求除了form表单提供发起请求的能力，那么别的就没有了，动作这一块全部都是使用js去控制），例如响应用户点击，给用户提供更好的体验
- 处理表单，检验用户输入，并及时反馈提醒
- 浏览器与服务端进行数据通信，主要使用Ajax异步传输
- 在网页中添加标签，添加样式，改变标签属性等
基本使用
内部方式
(
内嵌样式
)
，在
body
标签中使用
<script type="text/javascript">
<!--
javaScript语言
-->
</script>
外部导入方式
(
推荐
)
，在
head
标签中使用
<script type="text/javascript" src="my.js"></script>
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body>
<p>在html中如何使用javascript</p>
<script type="text/javascript">
var name = "hello" //变量定义
alert(name) //警告框方法，浏览器提示信息
</script>
</body>
</html>其实js这部分的语言其实和后端是有点类似的，它也可以去做变量的定义，也有固定的方法，也有我们写的方法函数等。
事件
- 事件指的是当HTML中发生某些事件时所调用的方法(处理程序)。 例如点击按钮，点击后做相应操作，例如弹出一句话
- 用法：< some-HTML-element some-event ='JavaScript 代码'>
和css一样，在学css的时候一定要学选择器，在学js的时候，我们一定要学事件。
在前端页面来说，大部分动作都是绑定在事件上面去，事件会绑定在dom节点，或者html标签也好。
- 常用事件
上面这些事件都是绑定到某个元素上面去的。
onchange：比如input输入框里面输入的内容有变化了，那么这就是一个change事件，然后有js方法去监听这个事件。其实也就是输入了某些内容，然后触发了change事件。
每个html元素id的值都是唯一的，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body>
<button type="button" onclick="alert('onclick')">onclick</button>
<button type="submit" onmouseover="alert('onmouseover')">onmouseover</button>
<br/>
输入你的名字:<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框的时候，小写字母将转化为大写字母</p>
<script>
window.onload = f;
function f() {
alert("页面加载完毕");
}
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</body>
</html>window.onload = f;整个浏览器窗口的一个概念，当你浏览器整个窗口加载完成时。
var x=document.getElementById("fname"); 拿到HTML元素，可以去操作它的值，并且改变它的值。
上面的id选择器是给js去使用的，它是一个唯一的值，如果好几个地方都定义id的值，那么都会发生变化。所以id一般是唯一的，并且给到某个js去使用，在某个特定的场景下去使用。
选择器
JS选择器主要用来获取HTML页面中的元素,将页面中的元素保存到一个对象中,然后就可以对这些对象的属性值进行相应操作,以实现一些动态效果,以达到页面的生动,易用。（不仅仅可以改变HTML中的值，属性也可以去改变，甚至可以去绑定这些东西的css）
需要注意的一点是操作的一定是对象
,
直接将元素当做对象使用是不行的。（得先通过js方法去获取到id对象）
常见选择器
:
标签选择器、类选择器、
ID
选择器
在最初期的时候，使用js html以及css去写前端，你需要自己去维护所有的动态操作，那么这些工作量是巨大的，自从高度封装的框架以及组件库出现了之后，它其实帮助我们代替了很多很多的工作。
后面大部分的动态操作框架都提供给你了，你只需要维护你的数据就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
</head>
<body>
<button type="button" id="btn">点我-id</button>
<div id="main">
<p>Hello world!1</p>
<p>Hello world!2</p>
<p>Hello world!3</p>
</div>
<script type="text/javascript">
var z = document.getElementById('btn'); //获取id为btn的元素
z.onclick = function () {
alert('亲，有什么可以帮助你的-id?')
}
var x = document.getElementById('main'); //获取id为main的元素
var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
console.log(z, y)
document.write('div中的第二段文本是:' + y[1].innerHTML); //向当前文档写入内容
</script>
</body>
</html>首先是去获取了button的dom对象，获取之后在button上面绑定了事件。
上面是标签选择器和id选择器的一个例子。
JS操作HTML
- 插入内容
document.write(“<p>
这是
JS
写入的段落
</p>”)
;
//
向文档写入
HTML
内容
x = document.getElementById(‘demo’)
;
//
获取
id
为
demo
的元素
x.innerHTML=“Hello” //
向元素插入
HTML
内容
- 改变标签属性：
document.getElementById(“image”).src=“b.jpg“ //
修改
img
标签
src
属性值
- 改变标签样式
x = document.getElementById(“p”) //
获取
id
为
p
的元素
x.style.color=“blue” //
字体颜色
- 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
</head>
<body>
<input id="input"></input>
<p id="demo"></p>
<script type="text/javascript">
//直接写入到body中
document.write('<p>这是JS写入的段落</p>')
//通过id选择器写入
x = document.getElementById('demo')
x.innerHTML = "Hello"
//修改标签属性
document.getElementById('input').type = 'button'
console.log(document.getElementsByClassName('p1'))
//修改标签样式
x.style.color = "blue"
</script>
</body>
</html>
