JavaScript发展史
![](https://i-blog.csdnimg.cn/blog_migrate/6f0f0db85bfa88094538597028c40885.png)
JavaScript介绍
- 使网页具有交互性(如果不去使用js,只是使用html css那么只是一些死的页面,那么你去点击一个按钮,你去做一些相关的动作,点击一个按钮,发起一个请求除了form表单提供发起请求的能力,那么别的就没有了,动作这一块全部都是使用js去控制),例如响应用户点击,给用户提供更好的体验
- 处理表单,检验用户输入,并及时反馈提醒
- 浏览器与服务端进行数据通信,主要使用Ajax异步传输
- 在网页中添加标签,添加样式,改变标签属性等
JavaScript与ECMAScript的关系
ECMAScript和JavaScript的关系是,前者是后者的规格(规范),后者是前者的一种实现。在日常场合,这两个词是可以互换的。ES6其实就是js的一个新版本
基本使用
<script type="text/javascript">
<!-- javaScript语言 -->
</script>
<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 html以及css去写前端,你需要自己去维护所有的动态操作,那么这些工作量是巨大的,自从高度封装的框架以及组件库出现了之后,它其实帮助我们代替了很多很多的工作。
后面大部分的动态操作框架都提供给你了,你只需要维护你的数据就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<button id="btn">点击我id</button>
<div id="main">
<p>Hello world!1</p>
<p>Hello world!2</p>
<p><a>Hello world!3</a></p>
</div>
<script type="text/javascript">
var x = document.getElementById("btn")
x.onclick = function(){
alert("有什么可以帮助你的")
}
var y = document.getElementById("main")
var z = y.getElementsByTagName("p")
console.log(x,y,z,z[2],z[2].innerHTML)
document.write('div中的第二段文本是:' + z[2].innerHTML)
</script>
</body>
</html>
首先是去获取了button的dom对象,获取之后在button上面绑定了事件。上面是标签选择器和id选择器的一个例子。
如果是class的话而不是id,那么这里得到的就是一个数组。因为calss不是唯一的,那么返回的就是一个数组。
JS操作HTML
在js里面单引号和双引号都可以代表字符串,但是要区分如果里面有包裹的情况。,还是自己要区分好。
- 插入内容,在innerHTML里面可以插入元素的标签
- 改变标签属性
- 改变标签样式 ,其实也就是css
- 代码示例
<!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>