1. 获取时间 Date()这个直接获得
2.innerHtml=''
3.js 显示方案
window.alert() ---写入警告框
document.write() 写出Html 输出
innerHtml= 写入HTML 元素
console.log（） 写入浏览器控制台
4.js 语法
1.; 分割
2.break 终止switch 或循环
3.continue 跳出循环并且在顶端开始
4.do while
5.for
6.function
7.if else
8.return 退出函数
9.switch
10.try catch 错误处理
11.var 申明变量
5.注释
// ---单行注释
/* */ 多行注释
6.运算符
&& 逻辑与
|| 逻辑或
！逻辑非
typeof 返回变量的类型
var x = NaN;
document.getElementById("demo").innerHTML = typeof x;
number
instanceof 返回true ， return x instanceof Number; [对象] instanceof [构造函数]
如果对象是对象类型的实例
in 在里面
7.js 数据类型
数字 var x=7;
字符串 var name='hhhh'
数组
8. js 函数
function myfunction (x,y,z){
return x*y*z
}
1.如果调用 myfunction 显示 整个方法 ---引用的是函数对象
2.如果调用myfunction(1,2,3) 显示6 ----引用的是函数结果
9.js 对象
1.var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
2. var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
person.lastName;
person["lastName"];
10.JS 事件
1.onchange html元素改变
2.onclick 用户点击了html元素
3.onmouseover 用户鼠标移动到html元素
4.onmouseout 用户鼠标移开html元素
5.onkeydown 用户按下键盘键
6.onload 浏览器已经完后页面加载
11.js 字符串
1.字符串长度 txt.length
2.\ 转义字符 var x = 'It\'s good to see you again'; \
3.\\ 是反斜杠
4.\b 退格键
5.\f 换页
6.\n 新行
7.\r 回车
8.\t 水平制表符
9.\v 垂直制表符
12.字符串方法
1.indexOf() ---str.indexof('china') 首次出现的位置
2.lastIndexOf() 从尾到前 开始
3.均可以接收 起始位置第二个参数 ---str.indexof('china',19) 从第19个位置开始找
4.提取部分字符串
slice(start,end) 包含start,不包含 end
--str.slice(7); 截取7后面的
--str.slice(-13); 从尾数-1 数到-13 截取后
substring(start,end) 不接受负数
substr(start,end) 不同之处在于第二个参数规定被提取部分的长度。
5.替换字符串内容 replace()
replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配
1.str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School"); 对大小写不敏感
2.如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）： str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
6.转换大小写
toUpperCase ()
toLowerCase() -----str.toLowerCase() 转换为小写
7.concat() 连接多个字符串
var test=text1.concat(',' ,text2) ---连接，，
var test=text1.concat(text2)
8.String.trim()
trim() 方法删除字符串两端的空白符
9.split 字符串转换为数组
test.split() test.split(',')
13.js 数字
1.因为 x 和 y 都是数，10 + 20 将被相加。
因为 z 是字符串，30 + "30" 被级联
2.在所有数字运算中，JavaScript 会尝试将字符串转换为数字：
对于+ 级联，-， *，/ 都是转换数字
var x = "100";
var y = "10";
var z = x - y; // z 将是 90
对于非运算的value 直结果显示 NaN
3.toString() 方法把数输出为十六进制、八进制或二进制。
var myNumber = 128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
var x = 123;
var y = new Number(123);
// typeof x 返回 number
// typeof y 返回 object
4.var x = 500;
var y = new Number(500);
// (x == y) 为 true，因为 x 和 y 有相等的值
当使用 === 相等运算符后，相等的数变为不相等，因为 === 运算符需要类型和值同时相等。
14.js 数字方法
1.toString() 以字符串返回数值。
var x = 123;
x.toString(); // 从变量 x 返回 123
2.toFixed() 返回字符串值 ，指定位数包含
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
3.toPrecision() 方法 指定长度数字 包含整数位
4.valueOf() 以数值返回数值
（123).valueOf()
5.Number
x=''10'' Number(x)
6.parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
7.parseFloat()
parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN
15.js 数组
1.var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
2.sort() 排序 var y = cars.sort(); // sort() 方法对数组进行排序
3. for
for(var i=0;i++;i<cart.length){
}
4.添加数组元素 push()
str1=str.push('aaa')
5.var points = new Array(); // 差
var points = []; // 优
6.typeof 运算符返回 "object"，因为 JavaScript 数组属于对象。
假如对象由给定的构造器创建，则 instanceof 运算符返回 true：
var fruits = ["Banana", "Orange", "Apple", "Mango"]；
fruits instanceof Array // 返回 true
16.js 数组方法
1.toString() 把数组转化为数组值（逗号分隔）的字符串
var fruits=['b','a','c']
fruits.toString() 结果是
b,a,c
2.join() 结合成一个字符串 fruits.join('')
3.pop 删除最后一个元素
4.push 添加新元素 返回的是长度
fruits.push(''kk'') ----长度
5.shift 删除首个数组元素
6.unshift 在数组头添加新元素 ---也是返回数组长度
7.拼接数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：使用 splice() 来删除元素
通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素 fruits.splice(0, 1); // 删除 fruits 中的第一个元素
8.concat 合并数组
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys,nnn); // 连接 myGirls 和 myBoys
17数组排序方法
负数就好
1.sort () 排序 对于字符串排序
2.reverse() 对数组降序排序
3.对于数值大小进行排序
str.sort(function (a,b){return a-b})
升序
str.sort(function (a,b){return b-a}) 降序
4.求数组中最大值，最小值
Math.max.apply(null,str)
Math.min.apply(null,str)
5.对于字符串属性进行比较
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -5;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}
6.对于字符串属性是数字比较大小
str.sort(function(a,b){
return a.year-b.year
})
18.js 数组迭代方法
1.map 对于数组每个元素进行操作 比如每个元素+2 value index array
var numbers2=number1.map(myfunction)
function myfunction(value,index,array){
return value+2;
}
2.filter 筛选 numbers2=number1.filter(myfunction)
function myfunction(value,index,array){
return value<19;
}
3.reduce 每个数组在原有变化 total ,value ,index,array
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myfunction(total,value,index,array){
return total+value
}
4.reduceRight() 从右到左
5.every()检验所有元素是否大于18 value
function myFunction(value){
return value >18;
}
6.some 检验某些数组是否通过测试
var someOver18 = numbers.some(myFunction);
function myFunction(value,index,array){
return value >18
}
7.find 查找如同filter
8.findIndex 查找发现的第一个索引
function myFunction(value, index, array) {
return value > 18;
}
19.日期
var d=new Date() 显示当前时间
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
20.日期格式化
21.日期获取方法
---周和月和我们平时的不一样 是0 开始
只有getDate是从1开始
例：var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
getDate() ---以数值返回天（1-31）
getDay() ---以数值获取周名（0，6） 可以定义个array=['sunday'] 获取array[]
22.设置日期方法
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
setDate()
23.math 对象
1.Math.PI
2.Math.round(x) Math.round(6.8); 四舍五入最接近的整数
3.Math.pow() x 的 y 次幂
4.Math.sqrt(x) 返回 x 的平方根：
Math.sqrt(64); // 返回 8
5.Math.abs(-4.7) 绝对值
6.ceil() x 上舍入最接近的整数：
7.Math.min() 和 Math.max()
24随机数
Math.random(); // 返回随机数
25.逻辑
(10 > 9) // 也返回 true
10 > 9 // 也返回 true
0（零）的布尔值为 false：
""（空值）的布尔值为 false：
undefined 的布尔值是 false：
null 的布尔值是 false：
NaN 的布尔值是 false：
1.function myfunction(){
var age, voteable;
age = Number(document.getElementById("age").value);
if (isNaN(age)){
voteable='输入的值不是数字'
}
else{
voteable=(age <19) ? "好年轻" ："够成熟" ；
}
}
26.js 条件
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
27. witch
switch(){
case 0:
break;
case 1:
break;
}
如果今日既不是周六（6）也不是周日（0），则输出一段默认消息：
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
28.break continue 跳出
continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。
for ( i= 0;i++;i<10){
if (i===3){continue}
text +='数字是' +i+'<br>'
}
break 直接跳出
29.js 类型转换
1.js 五种包含置的数据类型
字符串 string
数字 number
布尔 boolean
对象 object
函数 function
2.三种对象类型
对象 Object
日期 Date
数组 Array
3.不包含值的数据类型
null
underfined
4.typeof 运算符
您可以使用 typeof 运算符来确定 JavaScript 变量的数据类型。
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [1,2,3,4] // 返回 "object"
typeof {name:'Bill', age:62} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof myCar // 返回 "undefined" *
typeof null // 返回 "object"
NaN 的数据类型是数值
数组的数据类型是对象
日期的数据类型是对象
null 的数据类型是对象
未定义变量的数据类型是 undefined
尚未赋值的变量的数据类型也是 undefined
您无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）。
5.对于constructor 属性返回所有 JavaScript 变量的构造器函数。
返回的是大写
"Bill".constructor // 返回 "function String() { [native code] }"
(3.14).constructor // 返回 "function Number() { [native code] }"
false.constructor // 返回 "function Boolean() { [native code] }"
[1,2,3,4].constructor // 返回 "function Array() { [native code] }"
{name:'Bill', age:62}.constructor // 返回" function Object() { [native code] }"
new Date().constructor // 返回 "function Date() { [native code] }"
function () {}.constructor // 返回 "function Function(){ [native code] }"
6.转换字符串
x.toString()
(123).toString()
(100 + 23).toString()
7.Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
8.一元 + 运算符
一元的 + 运算符可用于把变量转换为数字：
9.| n+ | 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
30.js 异常
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
finally {
无论 try / catch 结果如何都执行的代码块
}
31.this 关键词
1.var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
2.单独的 this
在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。
在浏览器窗口中，全局对象是 [object Window]：
事件处理程序中的 this
在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：<button onclick="this.style.display='none'">
点击来删除我！
</button>
32.var x = new String("Bill");
var y = new String("Bill");
(x == y) // 结果是 false，因为你无法比较对象。
请勿使用 new Object()
33.js 错误
var z = (x * 10 + y * 10) / 10; // z 中的结果将是 0.3
34.js性能 坏代码就会访问数组的 length 属性。
差
var i;
for (i = 0; i < arr.length; i++) {
好
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
减少 DOM 访问
与其他 JavaScript 相比，访问 HTML DOM 非常缓慢。
假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用：
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
1.避免不必要的变量
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
document.getElementById("demo").innerHTML = firstName + " " + lastName 好
2.json 格式
{
"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]
}
35.js 表单
<form name='myform' action='' onsubmit='' return validateForm()" method='post'>
姓名：<input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
function validateForm(){
var x=document.forms['myform']['fname'].value;
if (x==''){
alert("必须输入姓名！')
return flase;
}
}
</script>
自动 HTML 表单验证
<input type="text" name="fname" required>
disabled 规定 input 元素应该被禁用
max 规定 input 元素的最大值
min 规定 input 元素的最小值
required 规定输入字段需要某个元素
type 规定 input 元素的类型
36js 验证表单api
1.checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">提交</button>
<p>如果该数字小于 100 或大于 300，将显示错误消息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1").value;
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入有效";
}
}
</script>
input 元素的 validity 属性包含了与数据合法性相关的一系列属性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">提交</button>
<p>如果数字大于 100（输入的 max 属性），将显示错误消息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "值太大";
} else {
txt = "输入有效";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
image.png
网友评论