一、javascript引入方式:
<!-- 第三种页面引入JavaScript的方式:外链式,推荐 -->
<!-- 如果作为引用时标签对里的代码无效-->
<script src="../vscode/js/hello.js">
//这里写的js代码无效
</script>
<!-- 第二种页面引入JavaScript的方式:内嵌式,部分推荐 -->
<script>
//这里的代码就有用了
alert(‘hello world ,again‘)
</script>
</head>
<body>
<!-- 第一种页面引入JavaScript的方式:行间事件,不推荐使用 -->
<div onclick="alert(‘hello world‘)">这是一个div</div>
</body>
二、JavaScript基本语法:
1.定义:
var iNum01 = 12,sTr =‘abc‘,bisMove = true;
// 如果没有定义类型和值,默认就是undefine
var iNum02;
2.js基本类型:
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，
可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
3.函数:
<script>
// js用分号的原因是,将来调用的时候回压成一行,为了区别代码所以用了分号
// 如果函数执行在函数的定义上面,这个是函数的预解析,都是可以用的
// 函数调用
fnMyalert();
//定义函数
function fnMyalert() {
// 函数体可以包裹其他函数,如下的alert函数
alert(‘ok‘)
}
// 调用函数
// fnMyalert();
// 变量的预解析,变量在下面定义,在上面调用,变量的值是undefined.
alert(iNum01);
var iNum01 = 211;
var a = 10,b = 20 ;
alert("a + b = " +a + b)
</script>
4.条件语句if:
<script>
var iNum01 = 12;
var sNum01 = ‘12‘;
if(iNum01==12){
alert(‘相等! ‘);
}
else{
alert(‘不相等! ‘);
}
// ‘==‘符号会将符号两边的变量转换成数字类型再进行对比,这个叫做隐式转换
if(sNum01==12){
alert(‘相等! ‘);
}
else{
alert(‘不相等! ‘);
}
// ‘===‘不会做隐式转换
if(sNum01===12){
alert(‘相等! ‘);
}
else{
alert(‘不相等! ‘);
}
if(10>5 && 20>15 && 2>3){
alert(‘都大于‘);
}
else{
alert(‘至少有一个不大于‘)
}
if(10>5 || 20>15 || 2>3){
alert(‘至少有一个不大于‘);
}
else{
alert(‘都不大于‘)
}
if(!10>5){
alert(‘大于‘);
}
else{
alert(‘不大于‘);
}
</script>
5.获取元素:
<script>
//window.onload表示窗口的载入事件,这样可以进行预加载,直白一点就是说可以写上面
window.onload = function(){
// 因为document.getElementById(‘div01‘)的返回值是一个对象
var oDiv = document.getElementById(‘div01‘)
oDiv.style.color = ‘red‘;
oDiv.style.fontSize = ‘30px‘;
oDiv.style.width = ‘200px‘;
oDiv.style.height = ‘200px‘;
oDiv.style.background = ‘gold‘;
}
</script>
<body>
<div id="div01" >这是一个div</div>
</body>
6.操作元素属性:
<script>
window.onload = function(){
// 获取
var oDiv = document.getElementById(‘div01‘);
var oA = document.getElementById(‘link01‘)
// 独缺属性值
var sId = oDiv.id;
alert(sId);
// 写属性值,也叫做设置属性值
oDiv.style.color = ‘red‘;
oDiv.style.fontSize = ‘30px‘;
// 操作class属性,class属性名要写成className
oA.className = ‘sty02‘;
// 操作元素包裹的内容
// 读取内容
var sTr = oA.innerHTML;
var sTr2 = oDiv.innerHTML;
alert(sTr);
// 修改内容,写入内容
oA.innerHTML = ‘改变文字‘;
oDiv.innerHTML = ‘<a href = "http://www.itcast.cn">创中国</a>‘
oDiv.innerHTML = ‘<ul><li>变成列表了</li><li>变成列表了</li><li>变成列表了</li></ul>‘
}
</script>
<body>
<div id="div01">这个还是一个div</div>
<a href="#" class="tay01" id="link01">这厮一个链接</a>
</body>
6.点击事件:
<script>
window.onload = function(){
var oBtn = document.getElementById(‘btn‘);
var oDiv = document.getElementById(‘div01‘);
// function fnChange(){ 改写成下面的匿名函数
oBtn.onclick = function(){
oDiv.style.width = ‘300px‘;
oDiv.style.height = ‘300px‘;
oDiv.style.background = ‘gold‘;
}
// 点击事件关联函数
// oBtn.onclick = fnChange;
}
</script>
<body>
<input type="button" value="改变元素" id="btn">
<div id="div01">这是一个div</div>
</body>
7.数组:
<script>
// 第一种创建数组的方法
var aList01 = new Array(1,2,3);
// 第二种创建数组的方法:直接量的方式
var aList02 = [‘a‘,‘b‘,‘c‘,‘d‘]
// 获取数组成员的个数
var iLen = aList02.length;
// alert(iLen)
// 操作数组的某个成员
alert(aList02[2]);
//在数组后面增加成员
aList02.push(‘e‘)
alert(aList02);
// 在数组后面删除成员
aList02.pop()
// alert(aList02)
// 将数组反转
aList02.reverse();
// alert(aList02);
// 将数组转换成字符串
var sTr = aList02.join(‘-‘);
var sTr2 = aList02.join(‘‘);
// alert(sTr);
// alert(sTr2);
var aList03 = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘a‘,‘b‘];
// 在数组中增加或者删除成员
// 从第4个(‘e‘)开始删除,删除两个,得到abcdb
aList03.splice(4,2);
// alert(aList03);
// 从第四个开始删除,删除一个,任何增加‘e‘,‘f‘两个元素
aList03.splice(4,1,‘e‘,‘f‘);
alert(aList03);
// 获取某个成员在数组中第一次出现的索引值
var aList04 = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘a‘,‘b‘,‘b‘,‘a‘,‘c‘] ;
var iPost = aList04.indexOf(‘c‘);
alert(iPost);
</script>
8.循环(for):
<script>
var aList = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘];
var iLen = aList.length;
//遍历
for(var i = 0;i<iLen;i++){
alert(aList[i]);
}
var aList01 = [‘a‘,‘b‘,,‘a‘,‘c‘,‘d‘,‘b‘,‘e‘,‘f‘];
var aList02 = [];
//去重
for(var i=0;i<aList01.length;i++){
if(aList01.indexOf(aList01[i])==i){
aList02.push(aList01[i]);
}
}
alert(aList02);
</script>
9.将数组载入页面中:
<script>
window.onload = function(){
var oList = document.getElementById(‘list‘);
var aList = [‘七龙珠‘,‘高达‘,‘火影‘,‘海贼‘,‘死神‘,‘鲁路修‘,‘‘];
var sTr = ‘‘;
//遍历数组内容,存放在空字符串中
for (var i = 0;i<aList.length;i++){
sTr += ‘<li>‘ + aList[i] + ‘</li>‘
}
//替换页面内容
oList.innerHTML = sTr;
}
</script>
</head>
<body>
<ul class="list" id="list">
<li>电影排行</li>
<li>电影排行</li>
<li>电影排行</li>
<li>电影排行</li>
<li>电影排行</li>
</ul>
</body>
10.字符串反转:
<script>
var sTr1 = ‘afuiajflasjfl230893482‘;
var sTr2 = sTr1.split(‘‘).reverse().join(‘‘);
alert(sTr2);
</script>
11.字符串:
<script>
var iNum01 = 12;
var sNum01 = ‘12‘;
var sNum02 = ‘26‘;
var sNum03 = ‘88.90‘;
// ‘+‘符号两遍如果都是数字,就做加法运算,如果有一个是字符串,就做字符串拼接操作
alert(iNum01 + 10);
alert(iNum01 + sNum01);
// parseInt方法将整数的字符串转化为整数,如果是小数的字符串会将小数去掉
alert(parseInt(sNum02) + iNum01);
alert(parseInt(sNum03) + iNum01);
// parseFloat会将小数字符串转换为小数
alert(parseFloat(sNum03) + iNum01);
// 将字符串转换为数组
var sTr = ‘2018-06-14‘;
var aList = sTr.split(‘-‘)
var aList2 = sTr.split(‘‘);
alert(aList);
alert(aList2);
var sTr2 = ‘jdfafka11hk2332akfh‘;
var iPos = sTr2.indexOf(‘888‘);
alert(iPos);
// 切取字符串,从11开始切,到16结束
var sTr3 = sTr2.substring(11,16);
alert(sTr3);
// 如果不写结束就直接切到结尾
var sTr4 = sTr2.substring(11);
alert(sTr4);
</script>
12.定时器(setInterval):
<script>
function fnMalert(){
alert(‘上床了!‘);
}
// fnMalert();
// 创建只执行一次的定时器
// 第一个参数是要调用的函数名称,第二个参数是间隔时间,单位是毫秒,我们不用写单位
// setTimeout(fnMalert,2000);
var oTimer01 = setTimeout(fnMalert,2000);
// 关闭只执行一次的定时器
// clearTimeout(oTimer01);
// 创建反复执行的定时器
var oTimer02 = setInterval(fnMalert,2000);
// 关闭反复执行的定时器
// clearInterval(oTimer02);
</script>
-----------------
<style>
.box{
width: 200px;
height: 200px;
background: gold;
margin-left: 10px;
position: fixed;
top: 100px;
left: 0px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById(‘box‘);
var iLeft = 0;
function fnMove(){
iLeft += 3;
oDiv.style.left = iLeft + ‘px‘;
}
// for(var i = 0;i < 19;i++){
// fnMove();
// }
setInterval(fnMove,30);
}
</script>
<body>
<div class="box" id="box"></div>
</body>
13.变量定义域:
<script>
// 定义全局变量
var iNum01 = 12;
function fnMyalert(){
//定义局部变量
var iNum02 = 24;
// 调用全局变量
alert(‘函数里面弹出：‘+iNum01);
//调用局部变量
alert(‘函数里面弹出：‘+iNum02);
// 在函数内部修改全局变量
iNum01 = 13;
alert(‘函数里面弹出：‘+iNum01);
// 函数内部定义变量时，如果不用var关键字，那么它使用一次之后，就会变成全局变量
iNum03 = 48;
}
fnMyalert();
// 函数外部调用全局变量
alert(‘函数外面弹出：‘+iNum01);
alert(‘函数外面弹出：‘+iNum03);
alert(‘函数外面弹出：‘+iNum02);
</script>
14.封闭函数:
function fnWrap(){
function fnTouzi(){
alert(‘亲，请关注我们新的产品！‘);
}
fnTouzi();
}
fnWrap();
简写方式1:
;~function(){
function fnTouzi(){
alert(‘亲，请关注我们新的产品！‘);
}
fnTouzi();
}();
简写方式2:
;!function(){
function fnTouzi(){
alert(‘亲，请关注我们新的产品！‘);
}
fnTouzi();
}();
15.
