html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta name="author" content="weiyupeng">
<meta name="time" content="2023/7/10 20:23">
<meta charset="UTF-8">
<title>Java Script</title>
</head>
<script>
document.write("<h1>标题</h1>");
document.write("<p>段落</p>");
// 改变内容
function f1() {
const x = document.getElementById("para1");
x.innerHTML="Hello JS !"
}
// 改变图像
function changeImg() {
const element = document.getElementById("img1");
if (element.src.match("img1")) {
element.src = "../image/img2.png";
} else {
element.src = "../image/img1.png";
}
}
// 改变样式
function changeStyle() {
const element = document.getElementById("para2");
element.style.color="green";
}
// 验证输入
function checkNum() {
const value = document.getElementById("input1").value;
if (isNaN(value)) {
alert("不是数字！");
}
}
</script>
<body>
<!--点击响应-->
<button type="button" onclick="alert('欢迎!')">点我!</button>
<p id="para1">Hello World !</p>
<button type="button" onclick="f1()">点我!</button><br>
<img id="img1" src="../image/img1.png" width="100" height="100">
<button type="button" onclick="changeImg()">换图片</button>
<p id="para2" style="color: red">段落</p>
<button type="button" onclick="changeStyle()">换颜色</button><br><br>
<input id="input1">
<button type="button" onclick="checkNum()">验证</button>
<!--连接外部js-->
<script src="../js/demo01.js"></script>
<p id="para33" onclick="f2()">点我</p>
<!--事件-->
<!-- 格式 <some-HTML-element some-event="JavaScript 代码"/> -->
<button onclick="function2()">function2</button><br><br>
<!--
常用事件：
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onm ouseover 鼠标指针移动到指定的元素上时发生
onm ouseout 用户从一个 HTML 元素上移开鼠标时发生
onkeydown 用户按下键盘按键
onl oad 浏览器已完成页面的加载
全部事件：
https://www.runoob.com/jsref/dom-obj-event.html
-->
<!--提交验证-->
<input id="numb">
<button type="button" onclick="f7()">提交</button>
<p id="demo3"></p><br><br>
<!--验证API-->
<input id="id1" type="number" min="0" max="100" required>
<button onclick="f8()">提交</button>
<p id="demo2"></p><br><br>
<script>
function f8() {
let inpObj = document.getElementById('id1');
if (inpObj.checkValidity()) {
document.getElementById('demo2').innerText = '输入正确';
} else {
document.getElementById('demo2').innerText = inpObj.validationMessage;
}
}
</script>
<input id="id2" type="password" minlength="6" maxlength="16">
<button onclick="f9()">提交</button>
<p id="demo4"></p><br><br>
<script>
function f9() {
let inpObj = document.getElementById('id2');
if (inpObj.checkValidity()) {
document.getElementById('demo4').innerText = '输入正确';
console.log('hello1111')
} else {
document.getElementById('demo4').innerText = inpObj.validationMessage;
console.log('hello2222')
}
}
</script>
<!--void 代表没 不返回值-->
<a href="javascript:void(0)">单击此处什么也不会发生</a><br><br>
<a href="javascript:void(alert('Warning!!!'))">点我!</a><br><br>
<!--异步-->
<p id="demo5">hello</p>
<script>
function f10() {
document.getElementById('demo5').innerHTML = '<h1>hello</h1>'
}
// 三秒后执行
setTimeout(f10, 3000);
</script>
</body>
</html>
javascript
/**
* @Author: weiyupeng
* @DateTime: 2023/7/10 20:20
*/
/*输出*/
//警告
// window.alert("警告");
//操作html元素
function f2() {
document.getElementById("para33").innerHTML="外部 JavaScript 函数";
}
//写入
document.write("<br><br>"+new Date())
//写到控制台
console.log("控制台输出123")
/*语法*/
//Number
let number = 123;
number = 1.23
number = 123e4;
number = new Number(1);
number = Number(2);
//String
let str = 'abc'
str = "ABC"
let char1 = str[2] // C
let len = str.length // 很多函数和java一样
let text = `line1 多行文本
line2
line3
`
console.log(text)
//计算表达式
let multi = number * 10
multi = multi + 10
multi += 10
//数组
let arr = [1, 2, 3, 4, 5]
//对象
let obj = {name:'weiyupeng', age:27}
//函数
function myFunction(a, b) {
return a * b;
}
// 变量：var是函数作用域，而let是块作用域
var name, age;
name = 'weiyupeng'
age = 27
/*数据类型*/
// 值类型（其实也是对象）：String Number Boolean Null Undefined Symbol
// 对象类型：Object Array Function RegExp(正则) Date
// 查看数据类型
console.log(typeof true)
console.log(typeof [true, 123, 'qwe'])
// 数组
var arr2 = new Array()
arr2[0] = 123
arr2[1] = 'qwe'
// 对象，用json定义
var person = {
name : 'weiyupeng',
age : 27,
// 对象内方法
f1 : function () {
return 'function2 in person'
},
f2 : function (s1, s2) {
return "" + s1 + s2;
}
}
person.age = 28
console.error(person.name)
console.info(arr2)
console.info(person.f1())
console.info(person.f2('qwe', '123'))
// Undefined
var a
console.log(typeof a) // Undefined
// Null
a = null
console.log(typeof a) // Object
// 声明新变量用 new 关键字
var carname = new String;
var x = new Number;
var y = new Boolean;
var car2 = new Array;
var person2 = new Object;
/*变量作用域*/
// window变量的属性，window可省略
var3 = 123
window.var3 = 123
function function2() {
// 全局变量
window.var4 = 123
// 声明的就是局部变量
let var5 = 234;
console.count('qwe')
console.log(typeof var4)
console.log(Date())
console.log(typeof 'Sat Jul 15 2023 15:51:50 GMT+0800') // string
}
let var5 = window.var4
// console.log(var4) // 报错 var4 is not defined
console.log(window.var4)
console.log(var5)
/*运算符*/
var var6 = 1;
console.log(var6 == 1) // true
console.log(var6 == '1') // true
console.log(var6 === 1) // true
console.log(var6 === '1') // false
console.log(var6 !== 1) // false
console.log(var6 !== '1') // true
console.log(undefined == null) // true
console.log(undefined === null) // false
/*typeof*/
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
/*constructor*/
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
let arr3 = [1,2,3,4]
arr3.constructor // 返回函数 Array() { [native code] }
const o = {name: 'John', age: 34};
o.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function f99() {}
f99.constructor // 返回函数 Function(){ [native code] }
/*正则表达式*/
let patt = /js/i // js为表达式主体，i是修饰符(代表不区分大小写)
console.log('Hello Js !'.search(patt)) // 输出下标 6
console.log('Hello Css !'.search(patt)) // 输出 -1
console.log('Hello Js !'.search('Js')) // 输出 6
console.log('Hello Js !'.search('js')) // 输出 -1
console.log(patt.test('Hello Js !')) // 输出 true
console.log(patt.exec('Hello Js !')) // 输出 ['Js', index: 6, input: 'Hello Js !', groups: undefined]
let patt2 = new RegExp(/js/gi)
console.log('Hello Js js Js !'.search(patt2)) // 输出 6
/*
常见tips：
1.switch 语句会使用恒等计算符(===)进行比较
2.var x = 10 + "5"; // x 的结果为 "105"，只要有string，结果就是string
3.精度问题：
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.30000000000000004
if (z == 0.3) // 返回 false
解决：用整数的乘除法
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
4.字符串断行要用反斜杠
var x = "Hello \
World!";
5.数组可用名字作为索引，字典？
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length 返回 0
var y = person[0]; // person[0] 返回 undefined
var z = person["lastName"] // person["lastName"] 返回 "John"
6.程序块作用域：
for (var i = 0; i < 10; i++) {
// some code
}
return i;
// i 对于这个函数是全局的，作用域不像别的语言一样套娃
*/
/*表单*/
function f7() {
let x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo3").innerHTML = text;
}
/*验证API*/
// 见html
/*
this关键字：
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
*/
/*let 与 var 区别*/
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
var y = 10;
// 这里输出 y 为 10
{
let y = 2;
// 这里输出 y 为 2
}
// 这里输出 y 为 10
/*JSON*/
// JSON Object
var json = {
"name" : "weiyupeng",
"age" : 27
}
// JSON Array
var jsonArr = [
{"name":"weiyupeng1","age":27},
{"name":"weiyupeng2","age":28},
{"name":"weiyupeng3","age":29}
]