<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习后根据实例写一遍</title>
</head>
<body>
<p id="p_1">p_1</p>
<!-------------改变文字------------->
<button onclick='document.getElementById("p_1").innerText = "Hello JavaScript!"'>点击我改变p1标签的文字</button>
<p id="p_2"></p>
<!-------------更换图片------------->
<button onclick='document.getElementById("img_1").src="img1.png"'>切换图片1</button>
<img src="img1.png", id="img_1" style="text-align:center">
<button onclick='document.getElementById("img_1").src="img2.png"'>切换图片2</button>
<!-------------修改CSS样式------------->
<p id="p_3">我是P3 我要变大</p>
<button onclick='document.getElementById("p_3").style.fontSize = "35px"'>点击我p3将会变大</button>
<!-------------HTML元素的 隐藏于展示------------->
<p id="p_4">我P4可是很顽皮的 (`へ´*)ノ</p>
<p id="p_4_1"></p>
<button id="p_4_show_btn" onclick='document.getElementById("p_4").style.display="none",document.getElementById("p_4_hide_btn").style.display="", this.style.display="none"'>点击我p4将会隐藏</button>
<button id="p_4_hide_btn" style="display: none" onclick='document.getElementById("p_4").style.display="", this.style.display="none", document.getElementById("p_4_show_btn").style.display=""'>点击我p4将会重新展示</button>
<p id="spece"></p>
<!-------------调用内部文件中JS 需要这样引用 <script src="myScript.js">------------->
<button type="button" onclick="myFunction()">试一试调用内部文件中的func</button>
<!-------------调用外部文件中JS 需要这样引用 <script src="https://www.w3school.com.cn/demo/myScript.js">------------->
<p id="demo">外部js文件将会修改我</p>
<button type="button" onclick="myFunction()">试一试调用外部文件中func</button>
<p id="p_5_2"></p>
<!-------------调用外部文件中JS 需要这样引用 <script src="/Web/MyFirstJavaScript.js">------------->
<button type="button" onclick="myFunction()">试一试调用外部文件中的func</button>
<p id="p_5_3"></p>
<p id="p_5">p_5</p>
<p id="p_6">p_6</p>
<script >
//script放在 head和body中的区别
//https://blog.csdn.net/qq_43654065/article/details/112825206
/*
//<!-------------JavaScript 输出------------->
document.write(5 + 6)
document.getElementById("p_5").innerHTML = "我是P5,我==" + (5 + 6);
//弹框
alert(5+6);
//浏览器控制台
console.log(5 + 6);
*/
/*
//<!-------------JavaScript 语法------------->
var x = 10,
y = 15,
z = x + y;
document.getElementById("p_5").innerHTML = "我是P5,我==" + z;
var userName = "石山岭";
var userName;
document.getElementById("p_6").innerHTML = "我是P6,我==" +userName;
*/
/*
//<!-------------JavaScript 字符串------------->
//确定文本在字符串中首次出现的位置 - indexOf()
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
document.getElementById("p_6").innerHTML = "我是P6,我==" + pos
//替换字符串中的字符 - replace()
var str = "The full name of China is the People's Republic of China.";
var txt = str.replace("China","Shishanling");
document.getElementById("p_6").innerHTML = "我是P6,我==" + txt
//把字符串转换为大写 - toUpperCase()
var str = "The full name of China is the People's Republic of China.";
var txt = str.toUpperCase();
document.getElementById("p_6").innerHTML = "我是P6,我==" + txt;
//把字符串转换为小写 - toLowerCase()
var str = "The full name of China is the People's Republic of China.";
var txt = str.toLowerCase();
document.getElementById("p_6").innerHTML = "我是P6,我==" + txt;
//把字符串拆分入数组 - split()
var str = "The full name of China is the People's Republic of China.";
var ary = str.split(" ");
document.getElementById("p_6").innerHTML = "我是P6,我==" + typeof ary;
*/
/*
//<!-------------JavaScript 数字------------->
//浮点的算数并不总是 100% 精准
var x = 0.2 + 0.1;//x = 0.30000000000000004
//可以这样搞
var x = 0.2 , y = 0.1, z, multiples = 1000;
z = (x * multiples + y * multiples)/multiples; //z=0.3
//在 * / - 时，JavaScript 会尝试把字符串转换为数字
var x = "100",y = "10",z = x/y;//z = 10
var x = "100",y = "10",z = x-y;//z = 90
var x = "100",y = "10",z = x*y;//z = 1000
//但是在 + 时不会吧字符串转换为数字
var x = "100",y = "10",z = x+y;//z = 110
var z = 100 / "Apple";// z = NaN
//您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数
isNaN(z)// true
typeof z//number
*/
/*
//<!-------------JavaScript 数字方法------------->
//数字转String
var x = 10;
x.toString()
//吧数字还原成数字
x.valueOf()//?什么意思
//四舍五入 toFixed() 方法将数字四舍五入为给定的位数。
var x = 9.99000;
var y = x.toFixed(1);//10.0
//toPrecision() 方法返回一个字符串，其中包含一个用指定长度写的数字,四舍五入
var x = 9.656;
var y = x.toPrecision(3);//9.66
//Number() 方法把变量转换为数字
document.write(
Number(true)+"<br>" +
Number(false) + "<br>" +
Number("10.0 ") + "<br>" +
Number(new Date("2017-09-30")) + "<br>" +
Number("10 3") + "<br>" +
Number("石山岭")
);
//结果
// 1
// 0
// 10
// 1506729600000
// NaN
// NaN
//parseInt() 字符串转 Int
//
document.write(
"<br>" + "<br>" + parseInt("10") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("10 6") + "<br>" +
parseInt("10 years") + "<br>" +
parseInt("years 10")
)
//结果
// 10
// 10
// 10
// 10
// NaN
//parseFloat() 字符串转 Float
document.write(
"<br>" + "<br>" + parseFloat("10") + "<br>" +
parseFloat("10.33") + "<br>" +
parseFloat("10 6") + "<br>" +
parseFloat("10 years") + "<br>" +
parseFloat("years 10")
)
//结果
// 10
// 10.33
// 10
// 10
// NaN
//Number.MAX_VALUE 返回最大数字 Number.MIN_VALUE返回最小数字
//Number.POSITIVE_INFINITY 无穷大
*/
/*
//<!-------------JavaScript 数学------------->
var x = Math.PI;//圆周率
var x = Math.round(4.4);//取整 四舍五入
var x = Math.pow(4,3);//4的3次方
var x = Math.abs(-4.4);//绝对值
var x = Math.ceil(4.4);//向上舍入
var x = Math.floor(4.4);//向下舍入
var x = Math.max(0, 150, 30, 20, -8, -200);//返回最大值
var x = Math.min(0, 150, 30, 20, -8, -200);//返回最小值
document.write(x);
function convert(degree) {
var x;
if (degree == "C") {
//摄氏度转华氏度
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
} else {
//华氏度转摄氏度
x = (document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
*/
/*
//<!-------------JavaScript 随机------------->
//返回 0（包含）和 1（不包括）之间的随机数
var x = Math.random();
var x = Math.floor(Math.random() * 10) + 1;//先吧得到的小数*10 然后向下取整
//返回x和y之前的随机数 不包含 y
function myRandom(min, max){
//如果需要包含y 需要 (max - min + 1)
return Math.floor(Math.random() * (max - min)) + min;
}
var x = myRandom(10, 20);
document.write(x);
*/
/*
//<!-------------JavaScript 日期------------->
var date = new Date();
var year = date.getFullYear();//年
var month = date.getMonth();//月
var day = date.getDay();//周几 例如周二 是 2
var hours = date.getHours();//时
var minutes = date.getMinutes();//分
var seconds = date.getSeconds();//秒
var timestamp = date.getTime();//时间戳
date.setFullYear(2000);//设置一个新时间
document.write("年"+ year + "月" + month + "日" + day + "时" + hours + "minutes" + minutes + "seconds" + "<br>" + "timestamp" + timestamp + "<br>" + "newDate" + date)
*/
/*
//<!-------------JavaScript 数组------------->
//向数组添加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "ShiShanLing";
fruits.push("卡特琳娜");//添加到尾端
fruits.unshift("刀妹");//将元素添加到头部
//但是如果这样
fruits[7] = "真帅";
//fruits:Banana,Orange,Apple,Mango,ShiShanLing,undefined,undefined,真帅
//空出的部分会是空字符串:undefined
//删除元素
// fruits.pop();//删除最后一个
fruits.shift();//移除第一个元素
//判断是不是数组
var x = fruits instanceof Array; // true
var x = Array.isArray(fruits); //true
// document.write(fruits);
//连接数组
var ary1 = [1,2,3],ary2 = [4, 5, 6], ary3 = [7, 8, 9];
var x = ary1.concat(ary2, ary3);//1,2,3,4,5,6,7,8,9
// document.write(x);
//将元素添加到数组中的指定位置.
var ary1 = [1,2, 3, 4, 5, 6, 7];
ary1.splice(2, 0, 8, 9);//1,2,8,9,3,4,5,6,7
//也可以替换
var ary1 = [1,2, 3, 4, 5, 6, 7];
//前面两个参数 开始的位置,替换的长度,
ary1.splice(2, 2, 8, 9);//1,2,8,9,5,6,7
var x = ary1.toString();//"1,2,8,9,5,6,7"
document.write(x);
//数组转换为String
*/
/*
//<!-------------JavaScript 数组排序------------->
//字符串升序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//Apple,Banana,Mango,Orange
//降序
fruits.reverse();//Orange,Mango,Banana,Apple 先升序再反转
//数字升序
var fruits = [3, 5, 7, 1, 2, 3, 8];
fruits.sort(function (a, b) {
return a-b;
})//1,2,3,3,5,7,8
//获取最小的数字 先升序 在获取第一个
var x = fruits[0];
//数字降序
fruits.sort(function (a, b) {
return b-a;
})//8,7,5,3,3,2,1
//获取最大的数字 ..先降序 在获取第一个
var x = fruits[0];
var fruits = [3, 5, 7, 1, 2, 3, 8];
//使用 Math.min() 确定数组中最小的数
var x = (function (){
return Math.min.apply(null, fruits);
})()
//使用 Math.max() 确定数组中最大的数
var x = (function () {
return Math.max.apply(null, fruits);
})()
//对象排序
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
cars.sort(function (a, b){return a.year-b.year});
//按数字排序
//对象按字符串排序
cars.sort(function (a, b) {
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
console.log("x ===" + x, "y === " + y);
if (x < y) {return -1};
if (x > y) {return 1};
});
document.write(
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year);
*/
/*
//<!-------------JavaScript 数组迭代------------->
var txt = "";
var numbers = [45, 4, 9, 16, 25];
//循环
numbers.forEach(function (value, index, array) {
txt = txt + value + "<br>";
})
//对数据进行统一处理并返回一个新的数组
var x = numbers.map(function (value, index, array){
return value * 2
});
//筛选
var x = numbers.filter(function (value, index, array) {
return value % 3 == 0;
})
//求和
var x = numbers.reduce(function (previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
})
//数组中的所有元素是否都满足某个条件
var x = numbers.every(function (value, index, array) {
return value< 2;
})
//数组中是否有满足条件的值
var x = numbers.some(function (value) {
return value % 3 == 0;
})
//获取第一个出现的数字下标
var x = numbers.indexOf(4);
//获取最后一个出现的数字下标
var x = numbers.lastIndexOf(4);
//获取第一个满足条件的数组下标
var x = numbers.find(function (value, index, obj) {
return value % 3 == 0;
})
document.getElementById("p_5").innerHTML = x;
document.write(x);
*/
/*
//<!-------------JavaScript 对象------------->
//创建对象 1
var obj = {
name:"石山岭",
age:18
};
//创建对象 2
var objc = new Object();
objc.name = "石山岭";
objc.age = 18;
//创建对象 3
function Person(name, age) {
this.name = name;
this.age = age;
}
var objc = new Person("石山岭", 18);
//对象是易变的(共享内存)
var tObjc = objc;
tObjc.name = "石山岭1";
document.write(objc.name)//"石山岭1"
//添加新属性
objc.height = 178;
//删除属性
delete objc.height;
*/
//<!-------------JavaScript JSON对象------------->
var myObj = {"name":"Bill Gates", "age":"function() {return 62;}", "car":null, "birth":"1955-10-28"};
//访问属性
myObj.name;
myObj["name"];
//遍历
for(x in myObj){
//x 是key
document.write(x);
}
//解析 json中的函数
myObj.age = eval("(" + myObj.age + ")");
myObj.age()
//解析日期
Date(myObj.birth);
//删除json对象属性
delete myObj.age;
//创建JSON字符串
var objc = {today: new Date(), age: function () {return 62;},};
objc.age = objc.age.toString();
var x = JSON.stringify(objc)
document.write("stringify" + x);
</script>
</body>
</html>
未完待续
