01-js-01-js-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/my.js"></script>
<script>
var a;
function f1() {
var b;
console.log("使用了第二种写法");
}
</script>
</head>
<!--
js的第一种写法：在元素的属性上书写js代码
js的第二种写法：在script标签中书写js代码，然后在元素的属性上引用
js的第三种写法：将js代码单独封装到一个拓展名为.js的文件中，然后使用
script标签将器引入到html文档里，再在元素的属性上引用js文件的函数等代码。
tips： 再生产环境中第三种用的最多，其次是第二种
-->
<body>
<input type="button" value="js的第一种写法" onclick="javascript:alert('你好,js')">
<input type="button" value="js的第二种写法" onclick="f1()">
<input type="button" value="js的第三种写法" onclick="f2()">
</body>
</body>
</html>01-js-02-dataType-primitive-01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1() {
var num;
console.log(num); // 变量没有初始化，值为undifined
var a = 5;
console.log("a的值" + a);
a = null; // null值用于清空变量里之前的值。
console.log("a的值" + a); // null
}
</script>
</head>
<body>
<button onclick="f1()"> 基本数据类型之undifined & null</button>
</body>
</html>01-js-03-dataType-primitive-string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1() {
var name = "michael"
var gender = "男"
// 查看变量里的值的类型
console.log(typeof name); // string
console.log(typeof gender); // string
var school = new String("吉林大学"); //object 使用此方式创建字符串比较少见
console.log(typeof school); // string
console.log(name, gender, school);
//字符串里有一些特殊字符，需要转义字符
var url = "jdbc:mysql:\"";
console.log("url的值：" + url);
//获取字符串的长度，使用length属性
console.log(url.length);
console.log("name的值的长度：" + name.length); // 7
//其他方法的应用
//大小写转换的方法
console.log("name的值的长度：" + name.toUpperCase()); // 7
console.log("转成小写形式:" + "AbCdEf".toLowerCase());
//获取指定位置上的字符， 注意下标从0开始
var line = "http://www.baidu.com"
var c1 = line.charAt(4);
var c2 = line.charCodeAt(4); //获取指定位置上的字符对应的unicode编码
console.log(c1, c2);
//获取子串的下标 下面两个方法，如果没有找到子串，返回-1
var index1 = line.indexOf("www"); //7
var index2 = line.lastIndexOf("w"); //9
console.log(index1, index2);
//截取子串，替换子串
var subLine = line.substring(11, 16);
console.log("截取子串：" + subLine);
var newLine = line.replace("baidu", "taobao");
console.log("newLine:" + newLine);
//切分字符串
line = "zhangsan,lisi,michael,licy,lily"
var names = line.split(",", 3);
console.log(names); // [zhangsan,lisi,michael]
console.log(typeof names) // object
}
</script>
</head>
<body>
<button onclick="f1()">字符串类型的学习</button>
</body>
</html>01-js-04-dataTyep-primitive-number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var x1 = 34;
var x2 = 0x123;
console.log(x1, x2);
var x3 = 3.1415;
var x4 = 123e2;
var x5 = 123e-2;
//查看变量的类型
console.log(typeof x5); //number
var r1 = x3.toFixed(2);
console.log("r1的值:" + r1, "r1的类型:" + (typeof r1));
//拓展类型：Math
console.log(Math.E);
console.log(Math.PI);
console.log(Math.LN2);
console.log(Math.random());
console.log(Math.round(3.56)); //只对小数部分进行四舍五入，保留整数部分
console.log(Math.round(45600));
console.log(Math.pow(2.3)); //8
console.log(Math.sqrt(8)); //2.828
</script>
</head>
<body>
</body>
</html>01-js-05-dataType-primitive-boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var isMarry = true;
console.log(typeof isMarry);
var flag = false;
console.log(typeof flag);
//布尔类型 可以用于计算 true相当于1 false相当于0
var r1 = true + true;
console.log("r1:" + r1);
var r2 = true + 10;
var r3 = true - 10;
console.log(r2, r3);
</script>
</html>01-js-06-dataType-object-Funciton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/**
* 1. 函数的定义语法：
* function funName([参数]){
* 逻辑体
* [return]
* }
* 2. 函数的调用： 函数名(有形参传实参)
* 3. 函数的返回值:
* - 如果函数体里没有想要返回的数据，return关键字可加可不加，返回值是undefined
* - 如果有想要返回的数据，那么必须添加return 并将要返回的数据写在return关键字之后
* 4. 函数的参数：
* - js中的函数没有重载一说，不管调用几个参数，都是同一个函数
* - 参数用于向函数体传入数据
* - 参数值实际上被保存到内置的一个对象arguments里。该对象是一个数组
* arguments.length
* arguments[index]
* - 形参没有接收到实参时，值为undefined
* 5. 匿名函数： 定义期间没有函数名的函数
* - new Function(arg1，arg2,...，functionBody); 用得少
* 注意： 最后一个函数，必须是函数体. 而且所有的形参都是字符串类型
* - function(){} 用的多
*
* 6. 常用的内置函数：
* - typeof : 判断一个变量里的值的类型
* - isNaN : 判断一个变量是否为非数字，如果是非数字返回true，否则返回false
* - parseInt/parseFloat : 将字符串转换为整数
* - eval(): 讲一个字符串转成一个表达式进行运算，有缺点，可能被数据注入
*
*/
function sum(a, b) {
console.log("两个参数的和：" + (a + b));
return; //该关键字可加可不加
}
var r1 = sum(10, 20);
console.log(r1);
function max(a, b) {
var max = a > b ? a : b;
return max;
}
var r2 = max(10, 20);
console.log("r2:" + r2); //20
//定义一个无参的函数
function f1() {
console.log("参数的个数：" + arguments.length);
var line = "";
if (arguments.length == 2) {
line = arguments[0] + arguments[1];
console.log("两个参数的拼接结果:" + line)
} else {
console.log("参数个数不是2个")
}
}
f1();
f1("michael", "is good")
//匿名函数的应用
//第一种创建方式 ：因为匿名函数没有名字，但是想要使用，因此可以将匿名函数
// 这个对象赋值给一个变量，然后通过变量调用
var fn1 = new Function("a", "b", "console.log(a+b);console.log(a,b)");
fn1(1, 2); //3 1 2
//第二种创建方式： 同上，想要使用，需要将匿名函数对象赋值给一个变量
var fn2 = function (a, b) {
return a + b;
}
console.log("fn2:" + fn2(10, 20)); //30
// 内置函数的应用
var line = "michael";
var r3 = isNaN(line)
console.log("r3:" + r3); // true
console.log("5是不是非数字：" + isNaN(5)); // false
var str1 = "3.1415";
var r4 = parseFloat(str1);
console.log("r4的类型:" + (typeof r4)); //number
var r5 = str1 + 3; //字符串与其他类型运算，是拼接操作
console.log("r5的值：" + r5); // 3.14153
var r6 = parseInt(str1)
console.log("r6：" + r6); // 3
var str2 = "1+2"
var r7 = eval(str2);
console.log("r7:" + r7); // 3
</script>
</head>
<body>
</body>
</html>01-js-07-dataType-object-Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象类型之数组的学习</title>
<script>
/*
1. 数值的创建方式
-var a1 = new Array();
-var a2 = new Array("michael","john","lucy")
-var a3 = [1,2,3,4,5]
2. 数组的长度属性length， 访问方法：变量名.length 数组的长度不是固定的
3. 访问元素：使用下标访问 下标从0开始 访问方式：变量名[index]
tips: js的数组元素可以是不同类型的值
数组下标如果越界，不会报异常，会返回undefined
4. 数组的其他方法
indexof(指定元素):返回指定元素的第一次出现的索引，没有的话，返回-1
lastIndex0f(指定元素):返回指定元素的最后一次出现的索引，没有的话，返回-1
sort([function]):排序方法，默认使用字典排序的升序规则(先比较第一个字符，如果相同，再比较第二个字符)
forEach(function):方法用于调用数组的每个元素，并将元素传递给回调函数。
shift():删除并返回数组的第一个元素。
unshift():向数组的开头添加一个或更多元素，并返回新的长度。
*/
var a1 = new Array("michael", "john", "lucy");
var a2 = [1, 2, 3, "michael", true];
console.log(typeof a1);
console.log(a1);
console.log(a2);
console.log("a2的数组长度:" + a1.length);
//访问a2数组的第一个元素和最后一个元素
console.log("第一个元素：" + a2[0]);
console.log("最后一个元素：" + a2[a2.length - 1]);
//常用方法：
var index = a2.indexOf(4);
console.log("index:" + index); // -1
var nums = [1, 3, 2, 11, 5, 4];
var names = ["michael", "john", "lucy", "mary"];
nums = nums.sort();
names = names.sort();
console.log("nums:" + nums);
console.log("names:" + names);
// nums.sort(function (a, b) { return b - a })
nums.sort((a, b) => b - a)
console.log("nums:" + nums);
//调用forEach方法
nums.forEach(function (value, index) {
console.log(value, index);
})
var ages =[21, 22, 18, 19];
var r1 = ages.shift();
console.log("r1:" + r1);
console.log(ages);
var newLength = ages.unshift(1, 2, 3);
console.log("newLength:" + newLength);
console.log(ages);
</script>
</head>
<body>
</body>
</html>01-js-08-dataType-object-Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date对象的学习</title>
</head>
<body>
<span id="showtime"></span>
</body>
<script>
var d = new Date();
console.log(d);
var year = d.getFullYear();
var month = d.getMonth() + 1; // 从0~11 0表示1月 11表示12月份。
var day1 = d.getDate();
var day2 = d.getDay(); //返回的是星期。 范围0(周日)~6(周六)
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var timeStr = year + "/" + month + "/" + day1 + ' ' + day2 + ' ' + hour + ':' + minute + ':' + second;
document.getElementById("showtime").innerText = timeStr;
</script>
</html>01-js-09-dataType-object-Regex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正则表达式的学习</title>
</head>
<body>
</body>
<script>
/*
1. 正则表达式的创建方式:
var reg = /pattern/flags
var reg = new RegExp(/pattern/,[flags])
flags标识有以下几种
g:表示全局四配，默认就是
i:忽略大小写
2. 正则表达式的test方法
- regex.test(string):
- 匹配成功 true，否则false
3. 其他方法：
exec(str): 在str中寻找符合正则表达式的字符串，并返回。只查找一次。
replace(RegeExp,newStr)
match(RegExp):返回匹配到的字符串的数组，该数组中最有一个元素
search(RegExp):返回匹配到的字符串的首字符下标
*/
var regex = /^[\w]{8}$/
var line = "abDd123456"
if (regex.test(line)) {
console.log("匹配成功")
} else {
console.log("匹配失败")
}
//
var reg1 = /[c][1][2][3]/
line = "abc123abc123"
var r1 = reg1.exec(line);//在line中寻找符合符合c123的子串第一次出现的位置
console.log("r1的类型:" + (typeof r1));
console.log(r1);
line = "http://www.baidu.com.coom."
var regex = /[\.][a-z]{4,6}[\.]/
var newLine = line.replace(regex, "###");
console.log("newLine:" + newLine);
var r2 = line.match(regex);
console.log("r2的类型:" + (typeof r2));
console.log("r2:" + r2); //object
console.log(r2[0]);
var r3 = line.search(regex); //返回子串在line中的下标
console.log("r3:" + r3);
</script>
</html>01-js-10-dataType-object-Object.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的Object类型的应用</title>
</head>
<body>
</body>
<script>
/*
1. 简介：
在js中有基本类型(string,number,boolean,null,undefined,Symbol),
和对象类型Function,Array,Date,Regexp.
对象类型中除了以上的，还可以使用0bject来自定义对象类型。
2. 定义方式三种：
- 第一种：使用{}
- 第二种：使用Object关键字
- 第三种：使用函数模拟构造器
*/
var age;
function f1() {
console.log(1 + 2);
}
var emp = {
"name": "zhangsan",
"age": 21, // 属性名可以使用变量。
"gender": "男",
"sayHi": function () {
console.log(this.name + "说：我今年" + this, age + "岁");
},
"sum": f1
}
// 访问对象的属性和方法
console.log(emp.name);
console.log(emp[age]);
console.log(emp['age']);
console.log(emp["age"]);
console.log(emp.sayHi); //调用方法时，如果不带()，其实是调用属性，将函数当初值进行显示
console.log(emp.sayHi());//调用方法时，应该带()，才会执行函数的逻辑体
emp.sum();
//使用object定义
var student = new Object();
//使用变量俩来绑定对象的属性和方法
student.name = "michael";
student.age = 17;
student.study = function () { console.log(this.name + "喜欢学习") }
student.sleep = function () { console.log(this.name + "喜欢睡觉") }
//调用
console.log(student.name);
console.log(student.age);
console.log(student.study);
student.study();
//第三种方式模拟构造器
function Teacher(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.intro = function () {
console.log(this.name + "," + this.age + "," + this.gender)
}
this.getResult = function (a, b) {
return a + b;
}
}
var t1 = new Teacher("lucy", 15, 'f');
console.log(t1);
console.log(t1.name);
console.log(t1.getResult(2, 3));
console.log(t1.getResult);
</script>
</html>01-js-10.5-exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
input {
font-size: 20px;
width: 60px;
height: 60px;
color: darkgrey;
}
.box {
width: 255px;
height: 400px;
border: 1px solid black;
}
.screen {
width: 242px;
height: 80px;
border: 3px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<input type="button" value="" id="screen" class="screen">
<div>
<input type="button" value="AC" class="count" onclick="clear_screen()">
<input type="button" value="DEL" class="count" onclick="Delete()">
<input type="button" value="+/-" class="count" onclick="punctuation()">
<input type="button" value="/" class="count" onclick="add_string(this.value)">
</div>
<div>
<input type="button" value="7" class="count" onclick="add_string(this.value)">
<input type="button" value="8" class="count" onclick="add_string(this.value)">
<input type="button" value="9" class="count" onclick="add_string(this.value)">
<input type="button" value="*" class="count" onclick="add_string(this.value)">
</div>
<div>
<input type="button" value="4" class="count" onclick="add_string(this.value)">
<input type="button" value="5" class="count" onclick="add_string(this.value)">
<input type="button" value="6" class="count" onclick="add_string(this.value)">
<input type="button" value="-" class="count" onclick="add_string(this.value)">
</div>
<div>
<input type="button" value="1" class="count" onclick="add_string(this.value)">
<input type="button" value="2" class="count" onclick="add_string(this.value)">
<input type="button" value="3" class="count" onclick="add_string(this.value)">
<input type="button" value="+" class="count" onclick="add_string(this.value)">
</div>
<div>
<input type="button" value="%" class="count" onclick="add_string('*0.01')">
<input type="button" value="0" class="count" onclick="add_string(this.value)">
<input type="button" value="." class="count" onclick="add_string(this.value)">
<input type="button" value="=" class="count" onclick="answer()">
</div>
</div>
</body>
<script>
var screen = document.getElementById("screen");
function add_string(a) {
screen.value += a;
}
function answer() {
var a;
try {
a = screen.value = eval(screen.value);
}
catch (err) {
if (a == undefined) {
screen.value = "错误";
}
}
}
function clear_screen() {
screen.value = "";
}
function Delete() {
var str = screen.value;
var arr = str.split("");
var str1 = '';
for (var i = 0; i < arr.length - 1; i++) {
str1 += arr[i];
}
screen.value = str1;
}
function punctuation() {
var str = screen.value;
var arr = str.split("");
var a;
var m;
var n;
for (var i = arr.length - 1; i >= 0; i--) {
if (!(arr[i] < 10) && arr[i] != '.') {
a = arr[i];
m = i;
break;
}
}
if (a == undefined) {
var str1 = str;
str1 *= (-1);
if (str1 < 0) {
str1 += 'a';
var arr1 = str1.split("");
for (var i = arr1.length - 1; i >= 0; i--) {
arr1[i + 1] = arr1[i];
}
arr1[0] = '(';
arr1[arr1.length - 1] = ')';
str1 = "";
for (var i = 0; i < arr1.length; i++) {
str1 += arr1[i];
}
}
screen.value = str1;
}
else if (a == ')') {
arr[m] = '';
var i;
for (i = 0; i < arr.length; i++) {
if (arr[i] == '(') {
break;
}
}
for (n = i; n < arr.length; n++) {
arr[n] = arr[n + 2];
}
var arr1 = arr.join('');
screen.value = arr1;
}
else {
var arr1 = str.split(a);
var arr2 = arr1[arr1.length - 1];
arr2 *= (-1);
if (arr2 < 0) {
arr2 += 'a';
var arr3 = arr2.split("");
for (var i = arr3.length - 1; i >= 0; i--) {
arr3[i + 1] = arr3[i];
}
arr3[0] = '(';
arr3[arr3.length - 1] = ')';
arr2 = "";
for (var i = 0; i < arr3.length; i++) {
arr2 += arr3[i];
}
}
arr1[arr1.length - 1] = arr2;
str = arr1.join(a);
screen.value = str;
}
}
</script>
</html>01-js-11-JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f1()">json字符串(js对象/js数组)转成JS对象</button>
<button onclick="f2()">js对象转成json字符串(js对象/sj数组)</button>
</body>
<script>
function f2() {
var age;
var teacher = { "name": "王大锤", age: 21, "friends": ["王", "张"], "sayHi": function () { console.log("hi"); } }
console.log(teacher.name);
console.log(teacher.friends[1])
teacher.sayHi();
//将js对象teacher，转成JSON字符串，调用内置的函数:JSON.stringify(),将js对象传入即可
var JSONStr = JSON.stringify(teacher);
console.log(typeof JSONStr);
console.log(JSONStr);
console.log(teacher);
}
function f1() {
//使用json格式的字符串
var student = '{"name":"michael","age":21,"hobby":["book","music"]}';
console.log(typeof student); //string
//获取字符串里的michael子串
var str1 = student.substring(9, 16);
console.log(str1);
//将json字符串转成js对象 JSON.parse() 只需要将json字符串传入到()里，即可
var jsObject = JSON.parse(student);
console.log(typeof jsObject);
//访问属性
console.log(jsObject.name);
//数组
console.log(jsObject.hobby[0]);
console.log(jsObject.hobby[1]);
}
</script>
</html>01-js-12-运算符的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var a = 10;
var b = 25;
var r1 = a + b;
var r2 = a - b;
var r3 = a * b;
var r4 = b / a;
var r5 = a % b;
var r6 = a++;
var r7 = --b;
console.log(r1, r2, r3, r4, r5, r6, r7);
//关系运算符 > >= ; < <= ; == != ; === !==
var x1 = 4;
var x2 = 5;
var re1 = x1 == x2;
console.log(re1);
var re2 = x1 != x2;
console.log(re2);
// === 全等：判断值与类型，都相同 返回true
var m1 = "t";
var n1 = 2;
var re3 = m1 === n1;
// !== 不全等: 判断值与类型，有一个不同 返回true
var re4 = m1 !== n1;
console.log(re3, re4);
console.log(m1 == n1);
//支持三目运算符
var re5 = x2 < x1 ? "王" : "张";
console.log(re5);
//逻辑运算符 && || !
var a = 1;
var b = 2;
var c = 3;
var d = 4;
// 先验证&&
var r1 = a > b && c++ < d;
console.log(r1, c); // false 3
// 再验证||
var r1 = a < b || c < d++;
console.log(r2, c); // true 4
</script>
</html>01-js-13-流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var age = 17;
if (age >= 18) {
console.log("成年人");
}
var a = 5;
var b = 6;
if (a > b) {
console.log("a大于b");
} else {
console.log("b大于a");
}
var score = 87;
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
var month = 2;
switch (month) {
case 1: console.log("1月"); break;
case 2: console.log("2月"); break;
case 3: console.log("3月"); break;
case 4: console.log("4月"); break;
case 5: console.log("5月"); break;
case 6: console.log("6月"); break;
default: console.log("下半年的月份");
}
// 循环结构
var names = ["张三", "李四", "王五"];
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
//for...in... 可以用于遍历对象，获取对象的属性值
var emp = { "name": "张三", "age": 12, }
//for(变量 in 对象) 变量会接收对象的属性名
for (v in emp) {
console.log(v, emp[v]);
}
var i = 1;
while (true){
if (i > 10)
break;
console.log(i);
i++;
}
var a = 10;
do {
console.log(a);
a--;
} while (a > 0)
//打印100以内所有质数
for (var num = 2; num <= 100; num++) {
var f = false;
for (var i = 2; i < num; i++) {
if (num % i == 0) {
f = true;
}
}
if (!f) {
console.log(num + "是质数");
}
}
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
