<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS学习</title>
</head>
<body>
<script>
//JS复习学习 2023-2-8
// js 有时容易忘，不断温习下。
//==JavaScript 输出
window.alert(1);
console.log(1);
document.write(1);
//==JavaScript 语句
var x = 1;
function studenjs(){
console.log(1);
}
//
var a=1,b=2,c=3,d=5;
//==JavaScript 对象
//==全局作用域
var carName = 'wulei';
publifun();
function publifun(){
document.getElementById("demo").innerHTML= "I can display " + carName;;
}
// 函数作用域
var carName = 'wulei';
publifun();
function funname(){
var fname = "函数作用域";
document.getElementById("demo").innerHTML= "I can display " + carName;;
}
console.log(fname); //在函数外，函数作用域不能使用。
// == ===
var x = 5;
x==5; //等于 true;
x==="5" //等值，等型。不等于 false
// JavaScript 事件
onclick=""
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
//==JavaScript 字符串
// 长度
var str = "dsafsafadsfads";
str.length;
// JavaScript 字符串方法
var str = "dsafsafadsfads";
var str1 = "11111111";
var str2 = " dsafsafadsfads ";
console.log(str.length);
console.log(str.indexOf("fs"));
console.log(str.lastIndexOf("ds"));
console.log(str.search("fa"));
// 提取部分字符串
console.log(str.slice(0,5));
console.log(str.substring(0,5));
console.log(str.substr(7,6));
console.log(str.replace("dsaf","111"));
console.log(str.toUpperCase(str));
console.log(str.toLowerCase(str));
console.log(str.concat("----",str1));
console.log(str2.trim());
console.log(str.charAt(0));
console.log(str.split("f"));
//==JavaScript 字符串模板
var a = "wueli";
var b = "huxue";
console.log(`11111${a}22222${b}`);
//==JavaScript 数字
// ------------------------
//==JavaScript 数组
var ar = ["11","22","33"];
var ar1 = new Array("11","2","3");
console.log(ar1[0])
console.log(ar1[0]="11111");
// 数组属性和方法
var sum;
for(var i = 0; i<ar.length; i++){
console.log(i) + "<br>";
}
var arr = [1,2,3,4];
var sum =0;
arr.push(6);
arr.forEach(function(value,index,array){
array[index] == value; //结果为true
sum+=value;
});
console.log(sum); //结果为 10
// arr.push(6);
// arr[arr.length] = "7777";
// JavaScript 数组方法
var ar = ["1111","2222","3333","55555"];
console.log(ar.toString());
console.log(ar.join(" "));
console.log(ar.pop());
console.log(ar.push("655555"));
console.log(ar.shift());
console.log(ar.unshift("9999"));
console.log(ar.toString());
console.log(ar.length);
console.log(ar.splice(2,0,"aaaa","bbbb"));
console.log(ar.toString());
ar.splice(0,1);
// cosole.log(ar.toString());
var ar1 = ["1111","2222","3333","55555"];
var ar2 = ["4444","6666","7777","8888"];
var ar3 = ar1.concat(ar2);
console.log(ar3.toString());
// 数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
// JavaScript 对象属性
var ob = {"a":"aaa","b":"bbbb","c":"cccc","d":"ddddd"}
delete ob.a;
// JavaScript for...in 循环
for(x in ob){
console.log(ob[x]) + "<br>";
}
//==JavaScript 对象属性
var ob = {"a":"aaa","b":"bbbb","c":"cccc","d":"ddddd"}
delete ob.a;
// JavaScript for...in 循环
for(x in ob){
console.log(ob[x]) + "<br>";
}
var ob1 = Object.values(ob); //转换为数组。
console.log(ob1);
// 对象，日期，函数，数组。都可以字符串化：
var str1 = JSON.stringify(ob);
console.log(str1);
console.log(typeof(ob1));
console.log(typeof(str1));
//==JavaScript 对象访问器
// JavaScript 对象访问器
var ob = {
"name":"wulei",
"age":41,
"sex":"boy",
get gname(){
return this.name;
}
}
console.log(ob.gname);
var ob1 = {
"name":"wulei",
"age":41,
"sex":"boy",
set sname(value){
this.name = value;
}
}
ob1.sname = "huxue";
console.log(ob1.name);
// 给对象填加属性和值
var ob = {};
var count=12;
Object.defineProperty(ob,"name",{
get:function(){
return count;
},
set:function(val){
count = val + 1;
}
})
console.log(ob.name);
console.log(ob.name = "修改");
//==JavaScript 对象构造器
// JavaScript 条件
if(x>6 ){
//...........
}
if(x>6 ){
//...........
}else{
//............
}
// if else if else if
switch(x>10){
case n:
// ........
break;
case n:
// ........
break;
case n:
// ........
break;
default:
// .......
}
//==JavaScript For 循环
var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
var text = "";
for(var i = 0; i<cars.length; i++){
text += cars[i] + "<br>";
}
console.log(text);
// 适合循环对象
for( x in objectname){
console.log(x);
}
while(x <= 10){
console.log(x++);
}
do{
}while(x>1000);
// 循环可迭代数组、字符串、映射、节点列表等：
for(x of array){
console.log(x);
}
//==跳出循环
break;
continue;
// JavaScript typeof 查询数据类型。
var a = "asdfsdafdas";
typeof(a);
//==JavaScript 类型转换
Number(); String(); Boolean();
//==JavaScript 位运算符 web开发用的不多。
//==JavaScript 正则表达式
// web开发中查看开发过程中总结的正则手册
var rep = /w3school/i;
search();
replace();
var str = "fadsfdsafdasfdsafsdf";
var sears = str.search(/dsafdas/i);
console.log(sears);
var str = "fadsfdsafdasfdsafsdf";
var sterep = str.replace("safdas","11111111");
console.log(sterep);
var reg = '/whos/i';
reg.test("asdfaswhosafdasfsdafdaf");
var reg = '/whos/i';
reg.exec("The best things in life are free!");
/e/.exec("The best things in life are free!");
//==JavaScript 错误 - Throw 和 Try to Catch
try //语句使您能够测试代码块中的错误。
catch //语句允许您处理错误。
throw //语句允许您创建自定义错误。
finally //使您能够执行代码，在 try 和 catch 之后，无论结果如何。
try{
aldd(1);
}catch(err){
err.message;
}
throw "Too big"; // 抛出文本
throw 500; //抛出数字
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "输入：" + err;
}finally{
//执行代码块。
}
// 错误 - Error 对象 2个属性 name message;
// JavaScript 作用域
//局部作用域
//全局作用域
//==JavaScript Hoisting 变量提升
//在 JavaScript 中，可以在使用变量之后对其进行声明。
//换句话说，可以在声明变量之前使用它。
var a;
console.log(a);
var a =1;
//==JavaScript 严格模式
//声明严格模式
//通过在脚本或函数的开头添加 "use strict"; 来声明严格模式。
//在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）
"use strict";
x = 3.14; // 会引发错误（x 未定义）
// 复习的教程为：https://www.w3school.com.cn/js/js_strict.asp
//==JavaScript this 关键词
// 在方法中，this 指的是所有者对象。
// 单独的情况下，this 指的是全局对象。
// 在函数中，this 指的是全局对象。
// 在函数中，严格模式下，this 是 undefined。
// 在事件中，this 指的是接收事件的元素。
// 像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
//==JavaScript 箭头函数
var funame = function funname(){
return 1;
}
funame = ()=>{
return 1;
}
var funame = function functi(val){
return val;
}
funname = (val) => {
return val;
}
//==JavaScript 类
class Rem {
constructor(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
chifan() {
this.name
}
shuijiao() {
}
zoulu() {
}
let nanren = new Rem("namea", 2025);
}
// =========================
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";
//==JavaScript JSON
// JSON 的两种结构：
// JSON 对象 JSON数组
// JSON数组
[key1 : value1, key2 : value2, ... keyN : valueN ]
// json对象
var study = {
yinianji:[
{"name":"wulei","age":30,"set":"nan"},
{"name":"huxue","age":40,"set":"nan"},
{"name":"suntao","age":50,"set":"nv"}
]
}
服务器-> 是 json
->服务器 是 string
// JSON - 转换为 JavaScript 对象
// JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
// 由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
// JavaScript 创建 JSON 对象
var JSONObject= {
"name":"菜鸟教程",
"url":"www.runoob.com",
"slogan":"学的不仅是技术，更是梦想！"
};
// 使用 JSON
// 读取 JSON 字符串
// 用 eval() 处理 JSON 字符串
JSON.parse() json 转换为 JavaScript 对象;
// 标准的json格式
{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
JSON.parse() //将其转换为 JavaScript 对象; 老可以在网页中使用。
JSON.stringify()
// JSON 通常用于与服务端交换数据。
// 在向服务器发送数据时一般是字符串。
// 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。再向服务器发送
// 例如我们向服务器发送以下数据：
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
// 我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：
var myJSON = JSON.stringify(obj);
//==JSONP 教程
本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
//==JavaScript 调试
console.log();
设置断点
debugger;
//==JavaScript ES6
let a = 1;
const b = 2;
function funname(x,y="默认值"){
// 代码块
}
//ar.find
var ar = ["19","1","10"];
var va = ar.find(funselect);
function funselect(value,index,arr){
return value > 18
}
console.log(va);
// 箭头函数
function funname(x){
console.log(x);
}
var funa = (x)=>{
console.log(x);
}
//==JavaScript 对象
// JavaScript 对象定义
在 JavaScript 中，几乎“所有事物”都是对象。
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
// JavaScript 对象属性
var ob = "duixiang";
var ob = {"wulei","huxue","sulia"};
var ob = new Object();
ob.name = "wulei";
ob.age = 30;
// JavaScript for...in 循环
</script>
</body>
</html>