本文是初级JavaScript学习者的入门指南，介绍了JS的发展历程、ECMAScript标准的不同版本以及如何引入JS代码。同时，讲解了JS的基础知识，包括注释、输出方式、变量、数据类型以及如何操作DOM和BOM。此外，还探讨了变量声明、数据类型的检查方法以及如何控制元素样式。
作为资深菜鸟，我又得开始翻越另一座山——JS，没有付出就没有收获，希望自己记住typeof null，每天高效率完成每天的任务，老调重弹，上课认真听讲，勤动手敲代码。每天保证不熬夜，身体没了啥也没了。
好啦，我们来看看今天的内容：
JS简介
1995年时，由Netscape公司的Brendan Eich ECMAScript： 标准
- 组成部分
- ECMAScript 标准 ES3 ES5 ES6/ES2015 ES7 ES2017 ES2018
- DOM（document object model 文档对象模型）
- BOM （browser object model 浏览器对象模型）
历史版本
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony(和谐)。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6;一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准(ISO/IEC 16262:2011)。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。
ECMA的第39号技术专家委员会(Technical Committee 39，简称TC39)负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是，ES5与ES3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。
引入方式
- 内联引入：以HTML标签属性的方式加入JS
<button onclick="alert('hello world')">按钮</button>- 内嵌引入
- 在HTML中使用script标签引入JS代码，
- 引入位置： 理论上说位置没有严格限制，很多人会放到head标签中（为了外部文件CSS与JS都放到一起），规范推荐：放到结束标签之前。
<script> alert('你好，世界！')</script>- 外部引入
- 注意： CSS引入外部文件的时候用的是href属性，JS用的是src属性
<script src="js/01.js"></script>小知识点
- 后缀名 .js
- 注释
+ 单行注释 //……
+ 多行注释 /……/ 分号
- 每一行结束语句应该在后边加 ; ，表示语句的结束
- JS语法非常松散，可以加也可以不加;, 换行以后解释器自动认为是一个新的语句
四种输出方式
//1.弹窗 alert('')
alert('hello world')
//2.document.write('...')
document.write('<h1>Hello world!</h1>')
//3.document.title="..."
document.title="你好！"
//4.console.log('') 控制台打印
console.log('hello')获取元素
- 通过id获取 document.getElementById(‘id值’)
- 使用案例
document.getElementById('btn').onclick=function(){...}绑定事件
- onclick点击事件
- 元素 .οnclick=function(){
//…
}
- 元素 .οnclick=function(){
document.getElementById('btn').onclick = function(){
alert('btn 被点击了')
}- onmouseover鼠标移入
document.getElementById('btn').onmouseover = function(){
alert('鼠标移入了btn')
}变量
- JS是弱类型（动态类型）语言，变量是什么值，取决于 你给它赋的值的类型，是动态的可以改变的。
- 书写格式：var 变量名 = 值
- 命名规范
- 不能使用关键字 作为变量名，如：var function…（×）
- 不能以数字开头，如：var 3th=300（×） btn3（√）
- 可以以英文字母、_、
开头，后边可以是英文、数字、下划线、
开
头
，
后
边
可
以
是
英
文
、
数
字
、
下
划
线
、
，不要有以下特殊字符（, ; 。 =…） btn_link（√） $ btn（√） _btn3（√）
- 推荐驼峰命名法：从第二个单词开始，每个单词的首字母大写，如：btn_Click、redLinkBtn
数据类型
- 基本数据类型
- String 字符串
- Number 数字类型
- Boolean 布尔类型
- undefined
- null
- 对象Object
- typeof 检查数据类型的方法
- string 再引号里的东西都是string，单引号双引号都可以，但是一定要配对
var a='123'
//alert(typeof a) //string
var b="wally"
//alert(typeof b) //string
var e="true"
//alert(typeof e) //string- boolean
- true 真
- false 假
var c=true
alert(typeof c) //boolean
var d=false
alert(typeof d) //boolean- number
var f=1
alert(typeof f) //number
var g=0.123 //number
alert(typrof g)- undefined
变量声明，但是没有赋值就是undefined
var h;
//alert(typeof h) //undefined
alert(typeof undefined) //undefined- null
空的对象
typeof null 得到的是object，比较特殊，记住了
var i=null
alert(typeof i) //object
alert(typeof null) //object控制样式
- 元素.style.CSS属性名 = “CSS属性值”
<body>
<div id="box">鼠标移入 隐藏</div>
<p id="bar">我是被隐藏的内容</p>
<script>
var box = document.getElementById('box');
var bar = document.getElementById('bar');
box.onmouseover = function(){
bar.style.display = "none"
}
box.onmouseout = function(){
bar.style.display = "block"
}
</script>
</body>- 在CSS属性中的横杠-链接的属性，在JS中要转换成驼峰命名
box.style.background = '#f00'
box.style.width = '500px'
box.style.height = '300px'
box.style.color = '00f'
//在 CSS属性中的横杠-链接的属性，在js中要转换为驼峰命名
box.style.borderRadius = '4px'
box.style.fontSize = '40px'
box.style.fontWeight = '600'
//元素隐藏
box.style.display = "none"
//元素显示
box.style.display = "block"修改className
- class 是 面向对象中类的意思 要修改html元素的class属性 使用className
<head>
<meta charset="UTF-8">
<title>className</title>
<style>
div{width: 200px; height: 200px;background-color: #333;}
div.red{
background-color: #f00;
width: 500px;
height: 300px;
color: #fff;
}
div.yellow{
background-color: #ff0;
width: 400px;
height: 300px;
color: #333;
}
div.green{
background-color: #0f0;
width: 500px;
height: 400px;
color: #fff;
}
</style>
</head>
<body>
<button id="red" onclick="changeClass('red')">红色</button>
<button id="yellow" onclick="changeClass('yellow')">黄色</button>
<button id="green" onclick="changeClass('green')">绿色</button>
<div id="box">Hello</div>
<script>
var box = document.getElementById('box');
function changeClass(colorName){
box.className = colorName
}
</script>
</body>属性
- 获取标准属性值： 元素.属性名
- class, style, id, title, alt, href, src, name, value，type, width, height… 就是html标签本身就有的属性（非自定义属性 age lesson）
alert(box.className) //box red
alert(box.id) //box- 设置标准属性的值： 元素.属性名 = “属性值”
<button id="red" onclick="changeClass('red')">红色</button>
<img id="box" src="img/01.jpg" alt="01">
<script>
//获取元素
var box = document.getElementById('box');
var red = document.getElementById('red');
//修改属性
red.onclick = function (){
box.src = "img/02.jpg"
}
</script>innerText&textContent
- 都是获取元素文本内容， innerText是IE率先支持，但不在标准里，没有兼容问题
textContent 是标准写法，但是不兼容IE8- - 设置内容值的时候,标签会被当作文本渲染
var box = document.getElementById('box')
alert(box.innerText) //Hello JavaScript
alert(box.textContent) //Hello JavaScript
box.innerText = '<h1>你好，星期一</h1>'
//设置 全部显示出来
//<h1>你好，星期一</h1> innerHTML
- 获取元素中完整HTML内容，包含文本内容及标签
value
- 获取控件类元素的值
<body>
<input type="text" name="" id="ipt">
<select id="slt">
<option value="basketball">basketball</option>
<option value="volleyball">volleyball</option>
<option value="soccer">soccer</option>
</select>
<button id="btn">获取</button>
<script>
var ipt = document.getElementById('ipt');
var slt = document.getElementById('slt');
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(slt.value)
ipt.value = '选择'+ slt.value +'成功'
}
</script>
</body>字符串拼接
alert('hello'+'world') //helloworld
var str= 'Lia------Li'
alert('hellostr') //hellostr
alert('hello ' + str) //hello Lia------Li 小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ聊天框</title>
<style>
div{
width: 500px;
height: 500px;
margin-bottom: 20px;
border: 1px solid #333;
overflow: auto;
}
</style>
</head>
<body>
<div id="sh"></div>
<input id="incart" type="text">
<input id="btn" type="button" name="" value="发送">
<script>
var sh = document.getElementById('sh');
var incart = document.getElementById('incart');
var btn = document.getElementById('btn');
btn.onclick = function(){
var geit = incart.value;
sh.innerHTML += '<p>' + geit +'</p>'
incart.value = ''
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
