一.初识JavaScript
1.什么是JavaScript?
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言
2.JS历史
在1995年时,由Netscape公司的Brendan Eich,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
3.了解前端三层:
结构层 :HTML
表现层 :CSS
行为层 : JS
4.JavaScript由哪部分组成:
ECMAScript(全称:欧洲计算机制造商协会)
DOM:(文本对象模型) document object model
BOM: (浏览器对象模型) browser object model *
5.JS与java的区别,与Jquery的关系
没关系
二.JS的放置位置
(如果用于写案例,写到body里面去)
1*.body标签里面**:可以!
<body>
<script>
alert(1);
</script>
</body>
2.head标签里面:可以!
<head>
<script>
alert(1);
</script>
</head>
3.html里面:可以!
<html>
<script>
alert('1');
</script>
</html>
4.html外面:可以!
<html>
</html>
<script>
alert(123)
</script>
ps:这样会默认写到body里面去
5.** :不可以。CSS样式里面 **
<style>
<script>
alert( 123 )
</script>
</style>
三.JS的样式分类
内嵌样式(调试)
<script>
alert(1);
</script>
内部样式(调试)
<div class="box" onclick="alert(222)"></div>
外部样式(代码可循环利用,多用于开发)
<script src='js/index.js'></script>
//index.js 文件
alert(123);
四、JS注释
单行注释 //
多行注释 /**/
五、打印
alert()
alert( 'GG' ) //弹框,弹出内容,里面有内容确定;
console.log
console.log( '我是小萌新!' ) //打印出来的内容在控制台里出来看到 -->可以查看属性;
confirm
confirm( '你了解了吗!?' ) //弹出内容 --> 里面有**确定**以及**取消**的按钮;
function fn(){}
console.dir(fn) //此方法为查看属性
六、如何获取元素?
<div id='btn'>抠jiou!!! </div>
//如何来获取元素?
alert('div');---> X X //文本通过ID来获取到元素;
//正确做法!
document.getElementById(‘btn’); ---> 文档通过ID来获取标签节点!
/* document 文档 get 获取 Element 元素 ById 通过id */
//弹出的样式如何?
alert(document.getElementById('btn'));
-->[ojbect HTMLDivElement]
-->获取到 HTML 里面叫作div标签对象;
//innerHTML 获取标签里面的文本;
alert(document.getElementById('btn').innerHTML); -->获取到HTML里面叫作div标签对象的文本;
七、常用获取元素(~)
document:文本所能看到的东西,代表着整个文档;有点类似于body;
一般标签
document.getElementById()
document.getElementsByTagName() 匹配标签名是…的集合
document.getElementsByName() 匹配name是…的集合
document.getElementsByClassName() 匹配class名称…的集合
特殊的标签
document.body
document.head
document.title
<div id='div1' class='div'>我是第1个样式</div>
// alert( 'div' )
/*
DOM操作:
document 文档
get 获取
Element 元素
ById 通过ID名
. 的
style 样式
*/
console.log( document.getElementById( 'div1' ) )
document.getElementById( 'div1' ).style.backgroundColor = 'deeppink'
八、事件(触发事件);
事件:谁,在什么时候发生了什么事情?
1.JS中的事件:元素.事件属性 = 事件函数;
点击盒子的时候,弹窗!
<style>
#box{width:100px;height:100px;background-color: #f90;}
</style>
<div id="box"></div>
<script>
//文本通过获取对象(box)来触发事件--> 这里触发的事件是点击事件;
document.getElementById('box').onclick = function(){
// ()小括号里面写的是参数
// {} 花括号里面是写逻辑代码
alert('你点到我啦~~');
};
document.getElementById('box').onmouseover = function(){
// onmouseover ———– 鼠标滑入事件
alert('JJ');
};
</script>
2.javascript中的事件[ 鼠标事件, 键盘事件, 表单事件, 系统事件]
onclick —————— 点击(单击)事件
onmouseover ———– 鼠标滑入事件(会冒泡)
onmouseout—————鼠标离开事件(会冒泡)
onmouseenter————鼠标滑入事件(不会冒泡,区别后面讲)
onmouseleave————鼠标离开事件(不会冒泡,区别后面讲)
ondblclick ——————- 双击(单击)事件
九.改变样式的属性;
ele.style.attr = 'value'; 改变元素的属性;
document.getElementById('box').onclick = function(){
//alert('this is a box!!!');
//添加内容样式 ele.innerHTML 获取元素HTML ,修改元素HTML
document.getElementById('box').innerHTML = '马小跳真帅!';
//修改样式;
document.getElementById('box').style.color = 'red' ;
//复合样式的写法,使用驼峰命名法;
document.getElementById('box').style.backgroundColor = '#0f0';
};
十.定义变量( var / let / const / float / import )
名字重复使用?可否保存起来?
//var 用于声明变量,注册变量;
var oBox =document.getElementById('box');
document.getElementById('box').onclick = function(){
//alert('this is a box!!!');
oBox.innerHTML = '马小跳真帅!';
oBox.style.color = 'red' ;
oBox.style.backgroundColor = '#0f0';
};
定义变量命名需注意:
//1.变量命名时无需过多修饰、太长;
var shuaidebuyaobuyao = 123; --> 不行!
//2.见名知义;
var jj = 18;
alert(jj);
//3.变量命名严格区分大小写;
var Candy = 1;
alert(candy); --> 报错,没有被定义!
//4.不能以数字开头(尽量少用杂乱的符号:@#¥%……& )
var 1Candy = 1; alert(1Candy); --> Invalid or unexpected token (不符合ECMAscript 标准 !)
//5.尽量不要使用中文作为变量名;
var 胖迪 = '帅帅哒!'; alert(胖迪);
//6.不能使用**关键字或保留字**;// 最新版本EC8 . //保留字:当前版本可能没有特殊含义,但是以后可能会有。
var let = 'hello'; alert(let);
定义变量注意问题:
//1.所有的变量要先声明再使用;
var Candy ;
alert(Candy); --> undefined;
//所有未赋值的变量名,后台都会赋值为 : var Candy = undefined ;
//2.同时定义多个变量,可以用逗号隔开;
var candy;
var wulala;
var yifang ;
var afeifei ;
--> var candy ,wulala , yifang ,afeifei ; //建议使用换行 --> 让代码更清晰更简单明了。
//3.一个变量只能声明一次;
var btn ;
alert(btn); --> undefined
btn = 123;
alert(btn); --> 123;
?能不能一开始写btn =123; --> //会产生变量的污染,而且这个变量是挂在了window上面去了,在严格模式下还会报错。
undefined 与 null 的区别
undefined ---->有定义 ,未赋值
null ------>获取不到 为空**
十一、innerHTML 与innerText
innerHTML: 获取标签节点的内容/获取标签节点内容的操作权限 --> 能解析标签;
var btn = document.getElementById('btn');
btn.onclck = function(){
btn.innerHTML = '<a href='javascript:;'> 我是a标签! </a>';
}
//注意:单引号与双引号,如果说不是用行字符串的拼接的话,要区别分开;
innerText :获取标签节点的内容/获取标签节点内容的操作权限 -->不可以解析标签,可以解析文本;
var btn = document.getElementById('btn');
btn.onclck = function(){
btn.innerText = '<a href='javascript:;'> 我是a标签! </a>';
}
十二、内部JS与外部JS。
//外部JS不需要写<javascript></javascipt>标签;
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
btn.innerText = '<a href="javascript:;"> 我是a标签 </a>'
}
</script>
//如果script标签作为引入样式路径的话:src='' ;
//那么里面的内容不会被解析 ,需要新起一个新的srcipt标签;
<script src="1.js">
var btn = document.getElementById('btn');
btn.onclick = function(){
btn.innerText = '<a href="javascript:;"> 我是a标签 </a>'
}
</script>
十三、解析顺序
正常写法:
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log( '我被点击了!' );
}
</script>
写在head里面的时候,有时候会报错。
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log( '我被点击了!' );
}
</script>
<div id="box"></div>
解决方法:window.onload
//1.等页面加载完之后,再执行window.onload的内容
<script>
window.onload = function(){
var oBox = document.getElementById('box');
oBox.onclick = function(){
console.log( '我被点击了!' )
}
}
</script>
<div id="box"></div>
defer延迟加载,只对外部样式有效
//解决方法: 延迟执行 defer (推迟到整个内容执行完之后进行加载,次于window.onload加载;)
#box{
width: 100px;
height: 100px;
background-color: deeppink;
}
<script src='1.js' defer></script>
<div id="box"></div>
执行顺序:先执行内部的script,再执行外部script,最后执行window.onload内容;
<script>
window.onload = function(){
console.log(123);
}
</script>
<div id="box"></div>
//外部样式:
console.log(456)