<!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 条件
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 中，几乎“所有事物”都是对象。
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
// JavaScript 对象属性
var ob = "duixiang";
var ob = {"wulei","huxue","sulia"};
var ob = new Object();
ob.name = "wulei";
ob.age = 30;
// JavaScript 对象属性
// JavaScript for...in 循环
</script>
</body>
</html>