一、JS原生态
用途: 可以和web页面进行相互交互就是美化页面
JavaScript刚开始产生的试试主要为了解决表单的验证效果的
2.JavaScript 定义
JavaScript 缩写是JS 正式名字是ECMASCRIPT 这个标准 就是由ECMA阻止发展和维护
正式标准ECMA-262 由网景公司提供微软提出 javascript
JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言
事件: 当鼠标或者键盘操作文本文档的时候会产生 事件 事件就是用户的操作
事件驱动: 当产生一个事件的时候 调用程序处理事件达到一定效果的过程 我们叫做事件驱动
3.JavaScript特点（掌握）
i.JS是解析型语言
所有程序员编写代码 都需要转换为计算机的语言(2进制) 通过编辑器转换编译
js的转换为计算机语言的时候 通过解析器编辑解析 转换而来 所以叫做解析型语言
ii.JS结构和C++十分相似
iii.JS具有跨平台的性质
iv.具有安全性和简单性
v.基于对象
4.优点
5.缺点
浏览器兼容性问题
6.环境
编辑器: sublime vim np++ 记事本。。。。。
运行环境: 只要支持js 的各个浏览器都行: 例如: 火狐 chrome ie 360 猎豹 qq 欧朋 。。。。
7.JavaScript和java有关系吗？
雷锋和雷锋塔
8.JavaScript特效原理
找需求美化的元素或者对象 进行美化
找对象 改属性（重点重点重点）
9.JavaScript 不能做什么(重点重点)
a) 不能做操作数据库
b) 不能操作文件
10.如何学习JavaScript(重点重点)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- --> </body> <script> //alert(1); /* 这是js注释 alert(2); */ </script> </html>
11.JavaScript 语法(重点重点重点)
i.使用方式
1.写在script标签中
例如:<script>alert(1)</script>
2.通过事件的方式写js代码
例如: <button onclick=”alert(1)”>求虐</button>
<button onclick=”test()”>求虐</button>
如果在事件中写的值为return false 则可以阻止默认行为
例如:<a href="http://www.baidu.com" onclick="return false">去百度玩</a>
<a href="http://www.baidu.com" onclick="return check()">想去百度啦</a>
3.通过协议的方式写js代码
例如:<a href="javascript:alert(‘你想去百度？？？‘)">想百度一下</a>
4.通过外部引入的方式写js代码
<script src="./js.js">
一旦我们的script用于导入外部js文件的时候 那么这对标签里面的所有代码无效
alert(‘我是引入外部js的同时写的js代码‘);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 4.外部引入js代码 -->
<script src="./js.js">
一旦我们的script用于导入外部js文件的时候 那么这对标签里面的所有代码无效
alert(‘我是引入外部js的同时写的js代码‘);
</script>
</head>
<body>
<!-- 2.通过事件的方式写js代码 -->
<button onclick="alert(‘今天我要嫁给你妈？‘)">今天你要嫁给谁</button>
<button onclick="test()">求虐</button>
<!-- 在事件中return false 可以阻止默认行为 -->
<a href="http://www.baidu.com" onclick="return false">去百度玩</a>
<a href="http://www.baidu.com" onclick="return check()">想去百度啦</a>
<a href="http://www.baidu.com">百度一下你就知道</a>
<!-- 3.通过协议的方式写js代码 -->
<a href="javascript:alert(‘你想去百度？？？‘)">想百度一下</a>
</body>
<script>
//1.写在script 标签中
//alert(1);
function test(){
alert(‘好嘞，满足你！！‘);
}
function check(){
return false;
}
</script>
</html>
ii.js能在html中出现的位置
除了title和style里面
之外 js可以出现在html的所有位置
<script> //alert(1); </script> <!DOCTYPE html> <script> //alert(2); </script> <html lang="en"> <script> //alert(3); </script> <head> <script> //alert(4); </script> <meta charset="UTF-8"> <style> <script> alert(1); </script> </style> <!-- 除了title和style里面之外 js可以出现在html的所有位置 --> <title><script>alert(1);</script></title> </head> <body> </body> <script> //alert(1); </script> </html> <script> //alert(1); </script>
iii.js执行顺序
请各位以后将你所有的js代码都放置在body标签后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px;height:100px;background:yellow;}
</style>
<!-- <script>alert(3)</script> -->
</head>
<body>
<script>
//alert(2);
</script>
<div id="box" ></div>
</body>
<script>
//找对象 改属性
//1.找对象
//获取元素对象
//document.getElementById(‘元素的id值‘);就可以获取到当前的元素
var box = document.getElementById(‘box‘);
alert(box);
//2.改属性
//box.title="我们用js修改的属性";
box.style.background="red";
//alert(1);
</script>
</html>
iv.获取元素对象
document.getElementById(‘元素的id值’)->单个对象
v.js中严格区分大小写
vi.js调试方式
1. alert(1) 弹出窗口 相当于php中的exit 中断代码执行
2. document.write()类似于php里面echo 代码执行完毕之后 在执行会覆盖里面的内容
3. console.log() 记录到控制台 没有弊端
4. console.dir() 类似php print_r() 打印数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="test()">覆盖</button>
</body>
<script>
//1.alert(1) 弹出窗口 相当于php exit 中断代码执行
//alert(1);
//alert(2);
//2. document.write() 类似于php里面echo 代码执行完毕之后 在执行会覆盖里面的内容
document.write(‘<h2>何涛昨晚不知道和德宝干什么去了！！</h2>‘);
document.write(‘<h2>何涛昨晚不知道和德宝干什么去了！！</h2>‘);
document.write(‘<h2>何涛昨晚不知道和德宝干什么去了！！</h2>‘);
document.write(‘<h2>何涛昨晚不知道和德宝干什么去了！！</h2>‘);
function test(){
//一定不能出现的在事件里面 否则会进行覆盖操作
document.write(‘<h3>昨天晚上我看见他们两个进入如家宾馆多少号房间不知道</h3>‘);
}
//3. console.log() 记录到控制台没有弊端
console.log(‘我是在控制台里面的内容哈哈哈哈哈‘);
console.log(‘我要\r\n换行‘);
//3.1 console.dir() 类型php print_r()
var list =[1,2,3,4,5,6,7];
console.log(list);
console.dir(list);
//4. document.title 修改标题 调试动态数据比较方便
//document.title="我是用js修改的标题内容";
document.onmousemove=function(e){
//alert(e.clientX);
//console.log(e.clientX);
document.title="X:" + e.clientX + ‘Y:‘ + e.clientY;
}
</script>
</html>
vii.跟随图片鼠标特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{position:absolute;top:100px;left:100px;}
</style>
</head>
<body>
<img src="./1.gif" id="img" width="300">
</body>
<script>
//找对象
var img = document.getElementById(‘img‘);
//改属性
//鼠标移动内容
document.onmousemove = function(e){
document.title="X:"+e.clientX +‘Y:‘+e.clientY;
//将图片的style样式里面left属性的值修改为鼠标坐标的x轴坐标
img.style.left = e.clientX +"px";
//将图片的style样式里面top属性的值修改为鼠标坐标的y轴坐标
img.style.top = e.clientY +"px";
}
</script>
</html>
viii.运算符
1. 奇葩的加号 +
如果两边都是数字 那么就是数学运算
只要有任何一边是字符串 那就是拼接
2. += 同上
3. 对象成员访问符php中对象成员访问符(->)
a) .对象成员访问符
.成员访问符 不能解析变量
他会将变量直接变为属性来访问
如果这个变量在对象中不存在则返回undefined
b) []对象成员访问符
[]成员访问符 能解析变量
他会先解析变量 将变量里面的值去访问我们对象中的属性
如果这个解析之后的变量的属性不存在才会返回undefined
4.奇葩的分号; 命令执行符
换行符也是命令执行符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1 js所有内容严格区分大小写
//加号
//数学运算
//如果两边都是数字 那么就是数学运算
var num = 10 + 5;
//alert(num);
//字符拼接
//只要有任何一边是字符串 那就是拼接
//var str = ‘三皮‘+‘德宝很爱你！‘;
//var str = 10 + ‘小王子‘;
//alert(str);
document.write(10+10+10);// 30
document.write(‘<br/>‘);
document.write(10+‘10‘+10);//101010
document.write(‘<br/>‘);
document.write(10+10+‘10‘);//2010
document.write(‘<br/>‘);
document.write(‘10‘+10+10);//101010
document.write(‘<br/>‘);
//+=
var num =10;
num +=5;
num +=‘5‘;
//alert(num);
var obj = {name:‘球球‘,age:20};
//alert(obj);
//alert(obj.name);
//alert(obj[‘name‘]);
var str = ‘sex‘;
//alert(obj.str);
alert(obj[str]);
document.write(‘问:男生如何回答女生你为什么对我这么好！比较靠谱‘)
document.write(‘我敬你是条汉子‘)
//换行符如果会产生错误 那么就不作为命令执行符
//但是不要让我看见这样的代码 如果让我看见 我让你敲回车敲到死！！！！
var num
=
10
alert(num);
</script>
</body>
</html>
ix.定时器(延迟器)(非常非常非常非常重要的内容 超重点)
定时器时间单位毫秒 1000毫秒=1秒
第一种使用方式
setInterval(函数名，定时的时间)
第二种使用方式
setInterval(function(){},定时的时间)
清除定时器操作
clearInterval(变量)
2.单次定时器（一次性定时器）
第一种使用方式
setTimeout(函数名，定时的时间)
第二种使用方式
setTimeout(function(){},定时的时间)
清除定时器操作
clearTimeout(变量)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//多次定时1
function func(){
console.log(‘暧昧是什么?‘);
//清除单次定时器的效果
clearTimeout(timmer1);
}
//定时器
var timmer =setInterval(func,1000);
//多次定时2
// setInterval(function(){
// console.log(‘暧昧=爱日未日‘);
// },1000);
// 单次定时器
// 单次1
// function func1(){
// console.log(‘你们认为最奇葩的广告语是哪个？‘);
// }
// setTimeout(func1,5000);
//单次2
var timmer1 =setTimeout(function(){
alert(‘垃圾分类，从我做起‘);
//清除操作
//clearInterval(timmer);
},5000);
</script>
</html>
x.倒计时特效
innerHTML 获取元素对象的文本值 可读可写属性
读 对象.innerHTML
写 对象.innerHTML = 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#div{width:200px;height:50px;color:white;background:green;text-align:center;font:bold 26px/50px 微软雅黑;}
</style>
</head>
<body>
<div id="div">10</div>
</body>
<script>
//找对象
var box = document.getElementById(‘div‘);
// alert(box.innerHTML);
// box.innerHTML =20;
//改属性
m=10;
function func(){
m--;
console.log(m);
//把m的值赋值给div元素对象的文本值
box.innerHTML = m;
if(m == 0){
alert(‘放学啦‘);
clearInterval(timmer);
}
}
var timmer=setInterval(func,1000);
</script>
</html>
xi.轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./images/0.jpg" id="img" width="500">
</body>
<script>
//轮播图
//找对象
var img = document.getElementById(‘img‘);
//alert(img.src);
// img.src="./images/1.jpg";
// alert(1);
//改属性
m = 0;
function func(){
m++;
console.log(m);
//将m的值赋值给img src属性
img.src = ‘./images/‘+m+‘.jpg‘;
//超出范围
if(m==4){
m=-1;
}
}
//定时器
setInterval(func,3000);
</script>
</html>
xii.新消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//document.title=‘【新消息】‘;
//document.title=‘【 】‘;
m = 0
function func(){
if(m % 2 ==0){
document.title=‘【新消息】‘;
}else{
document.title=‘【 】‘;
}
m++;
//console.log(m);
}
setInterval(func,500);
</script>
</html>
原文：https://www.cnblogs.com/abinlulu/p/9939210.html