05-运算符常用运算符
算数运算符
赋值运算符
比较运算符
逻辑运算符
// 赋值运算符
var money = prompt('请输入金额');
var saveMoney = money * (1+0.02);
console.log(saveMoney);
document.write(saveMoney);
// 算数运算
var a = 10;
var b = 4;
var sum = a + b;
document.write(sum);
var min = a - b;
document.write(min);
// 组合运算符
var c = 7 , d = 8;
// d = c + d;
// d +=c;
// console.log(d);
// 自增和自减
//x++就是先赋值后自增
var c1 = d++;
console.log(c1);
console.log(d);
// ++x就是先自增再赋值
var c2 = ++d;
console.log(c2);
// 比较运算符: > < = <= >= == ===
console.log(a > b);
// 浏览器解析的时候，存在隐式转换，比较的是值的大小，===是类型和值都进行比较
// 逻辑运算符
// && 和 || 或
// and就是都真为真，只要有一个为假就是假，两个都是假就都是假
06-字符串处理
很多时候的后台的运算采用的是数字运算，但是实际上展示的时候需要转换为字符串显示
<script type="text/javascript">
<script type="text/javascript">
// 字符串的运算
// 字符串的运算就是通过 '+' 来进行拼接
// 字符串只能是拼接，不能是加减运算
var firstName = 'panda';
var lastName = 'boy';
console.log(firstName+ ' ' + lastName);
var str = '2003啊'+firstName+'实打实大框架爱不是的gas打瞌睡的男篮的尴尬';
console.log(str);
var a1 = '1';
var a2 = 'panda';
var a3 = '4';
var a4 = '6';
// 不能对字符串进行加减运算，会报NaN -> Not a Number ->实际上NaN就是number类型
console.log(parseInt(a1) + parseInt(a2));
console.log(a3 * a4);
</script>
07-数据类型转换
<script type="text/javascript">
// 在JS中所有的数据类型，都被归为boolean
// 1.将数字类型转换为字符串类型
var n1 = 123;
var n2 = '';
var n3 = n1 + n2;
console.log(n3);
console.log(typeof (n3));
// 隐式转换 -> 数字和字符串相加会变成字符串优先变化，转换为字符串类型
// 强制类型转换 ->String(n1) -> num.toString()
var str1 = String(n1);
console.log(str1);
console.log(typeof (str1));
var num = 234;
console.log(num.toString());
console.log(typeof (num));
// 字符串转换为数字类型 -> Number(stringNum) -> parseInt(num3) ->parseFloat浮点数
// parseInt()可以解析一个字符串，并且返回一个整数
var stringNum = '789';
var num2 = Number(stringNum);
console.log(num2);
console.log(typeof (num2));
var num3 = '456';
console.log(parseInt(num3));
console.log(typeof (num3));
console.log(parseFloat(stringNum));
console.log(typeof (stringNum));
// -------------------------------------------------
// 布尔值 NaN 0 null undefined都是false 所有的数据类型都可以转换为数字类型
var b1 = '123';
console.log(Boolean(b1));
</script>
08-流程控制语句if
<script type="text/javascript">
// if 语句就是如果...然后...
/*
* var ji = 10;
if (ji >= 20){
console.log('恭喜你')
}else {
console.log('失败')
}*/
// 浏览器解析代码的顺序，是从上往下执行
// 考试系统录入
var math = 99;
var english = 85;
var sum = 485;
// 1. 模拟 总分大于400 并且数学成绩大于89分，被清华大学录取
// if (sum > 400 && math > 89) {
// console.log('恭喜你被录取了')
// }else {
// console.log('没有完成条件，不能被录取')
// }
// 2.模拟 如果总分大于400或者数学成绩大于85 就被复旦大学录入
// if (sum > 400 || math >=85){
// alert('你的成绩已经达标')
// }else{
// alert('成绩未达标')
// }
09-switch
<script type="text/javascript">
// switch 开关
var gameScore = 'better';
// switch 和 case做比较 ，遇到break就跳出，后面的代码会继续执行，
// 运行方式类型于if else,只不过用法比较单一
switch (gameScore){
case 'good':
alert('case用来做比较');
break;
case 'better':
alert('case就是比较对不对');
break;
}
</script>
10-while
<!--循环的时候一定有三个步骤-->
<!--1.要初始化循环变量-->
<!--2.判断循环条件-->
<!--3.更新循环变量-->
<script type="text/javascript">
// var i = 1;
// while (i < 10){
// i++;
// console.log(i);
// }
// 练习：将1到100之间所有的是3的倍数输出出来
var i = 100;
while (i >= 1){
if (i % 3 === 0){
console.log(i);
}
// console.log(i);
i--;
}
11-do_while
var i = 0;
do{
i++;
console.log(i);
}while (i < 3)
12-for循环
<script type="text/javascript">
// for 循环
// for(var i = 1;i <= 10;i++){
// console.log(i);
// }
// 打印1-100之间所有的偶数
// for (var i = 1; i<=100;i++ ){
// if(i % 2 ===0){
// console.log(i);
// }
// }
// 计算1-100之间的数字的和
// var sum = 0;
// for (var i = 1;i <= 100;i++ ){
// sum += i;
// }
// console.log(sum)
// 打印在页面上3行6个*
// for (var i = 0;i<=2;i++){
// document.write('******'+'<br>');
// }
// 在浏览器中输出直角三角形
// *
// **
// ***
// ****
// *****
// ******
String.prototype.times = function(n) {
return Array.prototype.join.call({length:n+1}, this);
};
for(var i = 1;i<=6;i++){
document.write('*'.times(i)+'<br>');
}
</script>
13-for循环练习
14-数组的创建和使用
<!--数组的含义就是存储数据用的一个容器，用来装载东西-->
<!--创建数组-->
<!--1.字面量方式-->
<script type="text/javascript">
// <!--推荐使用字面量方式创建数组-->
var colors = ['red','color','yellow'];
console.log(colors);
console.log(typeof (colors));
// 空数组
var emptyAray = [];
// 使用构造函数去创建，使用new关键词，对构造函数进行创建
var colors2 = new Array();
var col = new Array('red','123','yelow');
console.log(col);
// 数组的赋值
var arr = [];
arr[0] = 123;
arr[1] = '456';
console.log(arr);
15-数组的常用方法
<script type="text/javascript">
// 1.数组的合并
var north = ['beijing','shandong','tianjin1'];
var sorth = ['dong','xi','shanghai1','nanfang1'];
var newArray = north.concat(sorth);
console.log(newArray);
// 2.数组转换为字符串
var numArray = [100,101,102,103];
// toString直接转换为字符串,每个元素使用逗号隔开
var str = numArray.toString();
console.log(str);
// join方法 将数组中的方法是用指定的字符串连接，形成一个新的字符串
var str2 = numArray.join('|');
console.log(str2);
// 查找下标,如果查找的值不再数组内，则返回-1,正向查找
var index = numArray.indexOf(100);
console.log(index);
// 反向查找
var lastIndex = numArray.lastIndexOf(102);
console.log(lastIndex);
// 数组的排序
var names = ['panda', 'boy', 'zombie', 'engo'];
// 反向排序
var newName = names.reverse();
console.log(newName);
// 正向排序 sort按照26个字母顺序排序
var newName1 = names.sort();
console.log(newName1);
// 移除元素和添加元素,返回的结果是移除的第一个元素，原来数组中的第一个元素，被移除了
var firstName = names.shift();
console.log(firstName);
console.log(names);
// unshift()向数组添加一个元素,返回的新数组长度
var lastname = names.unshift(names);
console.log(lastname);
console.log(names);
// push()添加元素,往数组的最后一个位置添加元素
var newN = names.push('123');
console.log(newN);
console.log(names);
// pop()移除元素,从数组的最后去删除元素
var newN1 = names.pop();
console.log(newN1);
console.log(names);
16-函数的使用
函数是由事件驱动的，当它执行的时候是可重复使用的代码块
函数就是为了让代码更简洁
<script type="text/javascript">
// 函数的创建
// 有函数的声明就一定有调用
function add(){
alert('函数被调用')
}
add();
// 声明函数的时候带参数
function add2(a, b) {
alert(a + b)
}
add2(3, 4);
function add3(x,y) {
return x+y
}
n = add3(4,5);
alert(n)
17-Object_构造函数
<!--一切皆对象，没有对象就new-->
<!--JS是使用构造函数使用对象-->
<script type="text/javascript">
// 对象的创建
//字面量方式的创建，推荐使用
// 存储的方式就是key value
// var stu = {
// 'name':'panda',
// 'age':22,
// 'fav':'soup'
// };
// console.log(stu);
// 点语法,相当于get和set语法
// alert(stu.name);
// 使用Object创建对象
// function add() {
//
// }
// add()
// Object构造函数的特点
// 1.首字母大写
// 碰见构造函数，要想创建对象就是用new
// var obj = new Object();
// obj.name = 'xiaoming';
// obj.age = 45;
// console.log(obj);
// ----------------------------------构造函数--------------------------------------
// 1.函数名首字母要大写
// 2.构造函数不需要return
// 3.为对象添加成员变量 this.name = 'panda'
// var Stu = function () {
// this.name = 'panda';
// this.age = 18;
// this.fav = function(){
// console.log('boy')
// }
// };
// // 以上的方式每次new一个对象，各种属性都是相同的，不推荐这样去使用
// // 创建这个对象
// var s = new Stu();
// console.log(s);
// var s1 = new Stu();
// console.log(s1);
// ---------------------推荐使用的构造函数方式-------------------------
function Animal() {
this.name = 'hua';
this.age = 18;
this.fav = function () {
console.log(this.age)
}
}
var a = new Animal();
a.fav();
</script>
18-String_Number
<script type="text/javascript">
// 内置对象
// String 字符串对象
var str = 'hello panda';
console.log(str.length);
// 大写转换
var bigstr = str.toUpperCase();
console.log(bigstr);
// 小写转换
console.log(bigstr.toLowerCase());
// 两个参数，一个是分割的符号依据，一个是限制的长度
console.log(str.split(' ',2));
// 提取哪个字符到哪个字符之间的长度显示为字符串
console.log(str.substring(1,7));
// number
// 1.将bumber类型转换为字符串类型
var num = 123.23;
var numStr = num.toString();
console.log(numStr);
console.log(typeof (numStr));
// 2.保留一位小数，可以设置保留几位小数
var newNum = num.toFixed(1);
console.log(newNum);
</script>
19-Date的使用
<script type="text/javascript">
// 创建日期对象
var myDate = new Date();
// 获取一个月中的某一天
myDate.getDate();
console.log(myDate);
// 获取当天的日期和时间
console.log(Date());
// 获取月份
console.log(myDate.getMonth()+1);
console.log(myDate.getDay());
console.log(myDate.getFullYear());
console.log(myDate.getTime());
</script>
20-Math对象的使用
<script type="text/javascript">
// math对象用来执行数学的一些简单运算
// ceil向上取整数
var x = 1.234;
y = Math.ceil(x);
console.log(y);
// floor向下取整数
var a = Math.floor(x);
console.log(a);
// 求这两个输入的最大值和最小值
console.log(Math.max(1,5,6));
console.log(Math.min(1,56,8));
// 经常使用 随机数 包含0 不包含1
var ran = Math.random();
console.log(Math.floor(ran*100)+100);
// min~max之间的随机数 min+Math.random()*(max-min)
</script>
21-定时器的用法
<script type="text/javascript">
// setInterval()方法可以根据指定的周期来调用函数或计算表达式
// setInterval()会不停的调用函数，直到直到clearInterval被调用或窗口被关闭
// 由setInterval()返回的ID值可用作直到clearInterval()方法的参数
// setTimeout()在指定了毫秒数之后调用函数或计算表达式
// setTimeout()本身只执行一次，如果想多次调用请执行setInterval()或者在code中进行多次调用
var n = 0;
var ti = window.setInterval(function () {
n++;
console.log(n);
},1000);
// var a = 0;
setTimeout(function () {
// a ++;
console.log(ti);
clearInterval(ti);
},5000);
</script>
22-正则表达式创建
<!--正则表达式的规则都是一样的，只是写法不同-->
<script type="text/javascript">
var str = 'panda boy';
var reg = new RegExp('panda', 'g');
console.log(reg.test(str));
var reg1 = /ccc/g;
console.log(reg1.test(str));
console.log(str.match(reg));
// 正则表达式内有 replace test match search spilt
</script>
23-元字符和正则表达式练习案例
24-模态框案例
什么是dom？
DOM 是 Document Object Model（文档对象模型）的缩写。
规定把浏览器的所有的标签设置为树状结构，每个标签看做文档中的节点
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; width: 100%; } button{ margin: 0 auto; display: block; color: #333333; font-size: 28px; } #box{ width: 100%; height: 100%; background-color: #999999; } #content{ position: relative; top: 150px; width: 400px; height: 200px; line-height: 200px; text-align: center; color: black; background-color: #E6E6FA; margin: 0 auto; } #span1{ position: absolute; color: red; top: 0; right: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #FFFFFF; } </style> </head> <body> <button id="btn">弹出</button> </body> <script type="text/javascript"> // console.log(document); // 获取dom元素 var btn = document.getElementById('btn'); // console.log(btn); // 创建div dom元素 var oDiv = document.createElement('div'); var oP = document.createElement('p'); var oSpan = document.createElement('span'); oDiv.id = 'box'; oP.id = 'content'; oSpan.id = 'span1'; oP.innerHTML = '模态框启动！'; oSpan.innerHTML = 'X'; oDiv.appendChild(oP); oP.appendChild(oSpan); btn.onclick = function () { // 动态的添加标签到body中 this.parentNode.insertBefore(oDiv,btn); }; oSpan.onclick = function () { oDiv.parentNode.removeChild(oDiv) }; </script> </html>
