js
1.引入js的方式
2.基本数据类型
4.字符串的拼接
5.a++
6.数据类型转化
7.流程控制
8.switch
9.数组
10.字符串
11.date
12.函数
13.DOM使用
1.引入js的方式,写在标签最后
//外接样式 <script type="text/javascript" src="./index.js"></script> //内接样式 <script type="text/javascript">然后写里面</script>
JavaScript在网页中输出信息的写法
弹出警告框：alert("")
控制台输出：console.log("")
console.log("")表示在控制台中输出。console表示“控制台”，log表示“输出”。
控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。
用户输入：prompt()语句
prompt()就是专门用来弹出能够让用户输入的对话框。
代码如下：
<script type="text/javascript">
var a = prompt('今天是什么天气？');
console.log(a);
</script>
上方代码中，用户输入的内容，将被传递到变量 a 里面。
效果如下：
定义变量给变量赋值
var a = 100; //定义，并且赋值100 console.log(a); //输出100
变量的类型
变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。
数值型：number
如果一个变量中，存放了数字，那么这个变量就是数值型的
var a = 100; //定义了一个变量a，并且赋值100
console.log(typeof a); //输出a变量的类型
typeof()表示“获取变量的类型”，语法为：
typeof 变量
在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。
字符串型：string
var a = "abcde";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串
console.log(typeof a);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
连字符和加号的区别
键盘上的+可能是连字符，也可能是数字的加号。如下：
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
var a = "3"; var b = 2; console.log(a-b); 效果：（注意，字符串 - 数值 = 数值）
总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。
变量格式转换
用户的输入
我们在上面的内容里讲过，prompt()就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都是字符串。
parseInt()：字符串转数字
parseInt()可以将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写）。例如：
字符串转数字的方法：
parseInt(“5”);
parseInt()还具有以下特性：
（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("2018你真帅！！");
（2）自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7); console.log(a);
var a = parseInt(5.8 + 4.7); console.log(a);
2.基本数据类型
- number
var a = 123; //typeof 检查当前变量是什么数据类型 console.log(typeof a) //特殊情况 var a1 = 5/0; console.log(typeof e1) //Infinity 无限大. number类型
- string
var str = '123' console.log(typeof str)
- boolean
var b1 = false; console.log(typeof b1)
- null
var c1 = null;//空对象. object console.log(c1)
- undefined
var d1; //表示变量未定义 console.log(typeof d1)
3.Math内置对象
6.Math 内置对象
常用内置对象
6.1 Math.ceil() 向上取整，'天花板函数'
var x = 1.234; //天花板函数 表示大于等于 x，并且与它最接近的整数是2 var a = Math.ceil(x); console.log(a);//2
6.2 Math.floor 向下取整，'地板函数'
var x = 1.234; // 小于等于 x，并且与它最接近的整数 1 var b = Math.floor(x); console.log(b);//1
6.3 求两个数的最大值和最小值
//求 两个数的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2
6.4 随机数 Math.random()
var ran = Math.random(); console.log(ran);[0,1)
如果让你取100-200之间的随机数，怎么做？
背过公式：min - max之间的随机数： min+Math.random()*(max-min)
4.字符串的拼接
<script>
var name='吃饭';
var em='你好';
var x='今天'+name+'吃饭'+em;
console.log(x);
//$和``连用{}常用模板字符串
var y=`今天${name}吃饭${em}`;
console.log(y);
// 今天吃饭吃饭你好(都是)
var a1 = '1';
var a2 = '2';
console.log(a1-a2);
//-1
var b1 = 'one';
var b2 = 'two';
console.log(b1*b2); //NaN not a number
console.log(typeof(b1*b2)); //number
//就像形容一个人不是人,但他也是人
</script>
5.a++与++a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// a++: 先进行进行赋值计算,然后进行++
// alert弹出对话框
var a=5;
//先进行左端的a赋值输出,才执行++
// console.log(a++);
// 5
// console.log(a);
// 6
//需要把上面那句注释掉,因为那句已经进行a++的计算 var x=a++; console.log(x); // 5 console.log(a); // 6 //++a: 先进行++,然后才赋值 var b=2; var y=++b; console.log(b); // 3 console.log(y); // 3 </script> </body> </html>
6.数据类型转化
//将数值类型转化成字符串类型 //String() toString() 强制类型转换 /* let a=123; // let astr=String(a); // console.log(astr); // console.log(typeof astr) // 和上面那句一样 console.log(typeof String(a)); //不可以写成下面的 // string console.log(a.toString());*/ //将字符串类型转化成数值类型 var a='你好'; console.log(Number(a)); //NaN console.log(typeof Number(a)); // number var str='123456你好'; console.log(Number(str)); // NaN //自带净化功能,截断 console.log(parseInt(str)); // 123456 console.log(typeof parseInt(str)); // number console.log(parseFloat(str)); // 123456 console.log(typeof parseFloat(str)); // number //任何数据类型都可以转换成boolean类型 var b1 = '123'; //true var b3 = -123; var b4 = Infinity; var b5 = NaN; //false var b2 = 0; //false var b6; //undefined注意 var b7 = null; // 非0既真 console.log(Boolean(b7)); </script>
7.流程控制if和switch
<script>
//if (条件)后面没有:直接加{}
// 有else if
var a=13;
if(a>14){
console.log('a大于14了')
}else if(12<a<14){console.log('a大于12小于14')
}
else{
console.log('a没大于12')
}
</script>
<script>
// 这里和c语言的写法一样
// break关键字可以结束switch语句，
// 如果没有break，则从符合条件的case开始一直往下执行到switch结束或者遇到break。
var age=31;
//可以加判断条件
switch (age>10){
case 18:
console.log('18');
break;
case 19:
console.log('19');
break;
default:
console.log('不知道是多少')
}
</script>
8.循环
//while循环 // 1.初始化循环变量 // // 2.判断循环条件 // // 3.更新循环变量 var i=1; while(i<9){ console.log(i); i=i+1 } //for循环 for(var i=1;i<5;i++){ //直接打印打印机的那种 print(i) console.log(i)}
for(var i=1;i<6;i++){ for (var j=1;j<=i;j++){ document.write('*') } document.write('<br>') } //打印等腰三角形 for(var i=1;i<6;i++){ for (var a=i;a<6;a++){ document.write(' ') } for (var j=1;j<=2*i-1;j++){ document.write('*') } document.write('<br>') }
9.数组
3.数组的常用方法
3.1 数组的合并 concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
3.2 join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
3.3 将数组转换成字符串 toString()
var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每个元素之间使用逗号隔开
var str = score.toString();
console.log(str);//98,78,76,100,0
3.4 slice(start,end); 返回数组的一段，左闭右开
var arr = ['张三','李四','王文','赵六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]
3.5 pop 移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六']; var newArr = arr.pop(); console.log(newArr);//["张三", "李四"，"王文"]
3.6 push() 向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('哈哈');
console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"哈哈"]
3.7 reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names);
3.8 sort对数组排序
var names = ['xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// [, "angle", "tanhuang", "xiaoma"]
3.9 判断是否为数组：isArray()
布尔类型值 = Array.isArray(被检测的值) ;
10.字符串
<script>
字符串是不可变对象,所以改变都需要重新赋值
返回指定索引
var str='haha';
console.log(str.charAt(1));
concat 返回字符串的值,表示两个或多个字符串的拼接
replace替换
indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。
// 跟字符串里的find()方法用法一样
//正则里的search()没有返回None,找一一个就返回
//match()匹配开头的
//分割split()
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));
//trim()
</script>
11.date
创建日期对象只有构造函数一种方式,使用new关键字
//创建了一个date对象 var myDate = new Date();
//创建日期对象
var myDate=new Date();
//获取一个月中的某一天
console.log(myDate.getDate());
//返回本地时间
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
12.函数
<script>
//方式一 //声明函数 function add() { alert(111) ; return 111 } console.log(add()); // 111 // 可以传参,但是这个可以不用接受参数也可以接 function func() { console.log(arguments); // arguments不是一个数组,是一个伪数组,他有数组的索引和length return 1 } func('haha','hehe');
//方式二
//函数对象 var add=function () { return 1 }; console.log(add); console.log(add()) // ƒ () { // return 1 // } // 1 </script>
13.DOM使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*有一点我们要知道：js的加载是和html同步加载的。
因此，如果使用元素在定义元素之前，容易报错。
这个时候，onload事件就能派上用场了，
我们可以把使用元素的代码放在onload里，
加上onload之后变成异步的先执行页面加载完毕,触发onload事件
就能保证这段代码是最后执行。*/
///入口函数
// console.log(window.onload);
// null
//onload事件
var oDiv = document.getElementsByTagName('img');
console.log(oDiv);
// 当页面加载文本和图片完毕的时候,触发onload事件,如果图片有一个加载不出来就不能触发这个事件用户体验极差
window.onload=function(){
console.log('haha');
// 当页面加载完毕,打印字符串
}
</script>
<div id="box"></div>
<img src="../js第二天/7e104850-74f5-4123-971e-5fb1961ab4c0.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
<!--需求默认盒子是200*200 红色的点击盒子盒子变成绿色-->
<div id="box" class="box"></div>
<script>
//事件的三要素:事件源.事件,事件驱动程序
/*比如我用手去按开关,灯亮了,事件源是手,事件是按开关,
事件驱动灯的开和关
谁引发的后续事件,谁就是事件源*/
//获取事件源
//通过id获取事件源
var oDIV=document.getElementById('box');
console.log(oDIV);
//通过类名获取事件源,需加上索引
var oDIV2=document.getElementsByClassName('box')[0];
console.log(oDIV2);
//通过标签名,需加上索引,伪数组
var oDiv3 = document.getElementsByTagName('div')[0];
console.log(oDiv3);
//绑定事件,直接绑定匿名函数
oDIV.onclick=function () {
var isred = true;
}
//方式一:直接绑定
var div1=document.getElementById('box');
// 绑定事件的第一种方式
var isred = true;
div1.onclick=function () {
// 驱动程序
if (isred) {
//js的优先级最高权重最大
div1.style.backgroundColor = 'green';
isred = false;
} else {
div1.style.backgroundColor = 'red';
isred = true;
}
}
</script>
</body>
</html>
上方代码的注意事项：
- 在js里写属性值时，要用引号 css里是background-Color:red
- 在js里写属性名时，是
backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰
设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
下面分别介绍。
1、获取节点的属性值
方式1：
元素节点.属性;
元素节点[属性];
举例：（获取节点的属性值）
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
方式2：（推荐）
素节点.getAttribute("属性名称");
例子：
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
2、设置节点的属性值
方式1举例：（设置节点的属性值）
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
方式2：（推荐）
元素节点.setAttribute(属性名, 新的属性值);
方式2举例：（设置节点的属性值）
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
3、删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
浙公网安备 33010602011771号