开发知识点-HTML/JavaScript

Promise对象

Promise是JavaScript中用于处理异步操作的一个对象，它表示一个最终可能是成功或失败的操作及其结果值。

getListFromScreen () {  
    return new Promise((resolve, reject) {   
    }  
}

apify

phantomjs

是一个服务器端的 JavaScript API 的 WebKit。

其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG 使用场景

Summernote

Summernote 是一个基于 Bootstrap 的富文本编辑器，它支持上传文件到服务器的功能。

要实现上传文件的功能，
您需要在 Summernote 的初始化选项中设置 callbacks.onFileUpload 函数，
这个函数会在用户选择文件后被调用。

在这个函数中，您可以使用 FormData 对象来封装文件数据
并使用 XMLHttpRequest 对象来发送异步请求到服务器。

下面是一个简单的示例代码，假设您已经在页面中引入了 jQuery 和 Summernote 的相关脚本和样式：

<!-- HTML -->
<textarea id="summernote"></textarea>
// JavaScript
$(document).ready(function() {
   
  $('#summernote').summernote({
   
    height: 200,
    tabsize: 2,
    callbacks: {
   
      onFileUpload: function(files) {
   
        // 创建 FormData 对象
        var data = new FormData();
        // 遍历文件列表，添加到 FormData 对象中
        for (var i = 0; i < files.length; i++) {
   
          data.append("media_upload[]", files[i]);
        }
        // 创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        // 设置请求方法和地址
        xhr.open("POST", "/upload");
        // 设置请求完成后的回调函数
        xhr.onload = function() {
   
          if (xhr.status === 200) {
   
            console.log("上传成功");
          } else {
   
            console.log("上传失败");
          }
        };
        // 发送请求
        xhr.send(data);
      }
    }
  });
});

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。 

字符串里一个\符是用来作转义符的, \\ 才表示 \ 符号



    function htmlDecodeByRegExp(str) {

        var temp = "";

        if (str.length == 0) return "";

        temp = str.replace(/&/g, "&");

        temp = temp.replace(/</g, "<");

        temp = temp.replace(/>/g, ">");

        temp = temp.replace(/ /g, " ");

        temp = temp.replace(/'/g, "\'");

        temp = temp.replace(/"/g, "\"");

        return temp;

    }

stringify

VUE  


layui




JSON.stringify

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法
JSON.stringify(value[, replacer[, space]])
参数说明：

value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。

replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

var a = [];  //空数组

var a = [1, true, "0", [1,0], {x:1,y:0}];  //包含具体元素的数组

使用构造函数的方式定义

使用 new 运算符调用 Array() 类型函数时，可以构造一个新数组。



var 数组名 = new Array();  //空数组

var 数组名 = new Array(值列表);  //实数组

如果给Array()传递一个数值参数，则该参数值等于数组 length 的属性值，可以定义数组的长度，即包含元素的个数。


var a = new Array(5);  //指定长度的数组


unshift()函数来在数组开头插入元素，该函数能够把一个或多个参数值附加到数组的头部：


array.unshift(元素1, 元素2, ..., 元素X)



array_values() 函数可以将关联数组转化为索引数组，将字符串下标转为纯数字下标

1、window.location.href(设置或获取整个 URL 为字符串)

var test = window.location.href;
alert(test);
返回：http://i.jb51.net/EditPosts.aspx?opt=1

2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;
alert(test);
返回：http:

3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;
alert(test);
返回：i.jb51.net

4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;
alert(test);
返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx

6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;
alert(test);
返回：?opt=1

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

var test = window.location.hash;
alert(test);
返回：空字符(因为url中没有)


  var reg = new RegExp('(^|&)' + 'infoid' + '=([^&]*)(&|$)', 'i');

            var r = window.location.search.substr(1).match(reg);

            if (r != null) {

                var info_id  = unescape(r[2]);

            }

1.在原来的窗体中直接跳转用
onClick="window.location.href='你所要跳转的页面';"


2、在新窗体中打开页面用：
οnclick="window.open('你所要跳转的页面')"


3、返回上一页 （ 本地测试无效，服务器上可用）
window.history.back(-1);
<a οnclick="javascript:history.back(1);" href="#">返回</a>
<a href="javascript:history.go(-1)">返回上一页</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一页</a>


4、一些用法
按钮式：
<INPUT name="pclog" type="button" value="php柚子的博客" onClick="location.href='连接地址'">
直接跳转式：
<script>window.location.href='连接地址';</script>
开新窗口：
<a href="javascript:" onClick="window.open('连接地址','','height=500,width=611,scrollbars=yes,status =yes')">123</a>

自动打开<SCRIPT>
<!--
window.open('连接地址','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') //写成一行
-->
</SCRIPT> 

    function htmlDecodeByRegExp(str) {
   

        var temp = "";

        if (str.length == 0) return "";

        temp = str.replace(/&/g, "&");

        temp = temp.replace(/</g, "<");

        temp = temp.replace(/>/g, ">");

        temp = temp.replace(/ /g, " ");

        temp = temp.replace(/'/g, "\'");

        temp = temp.replace(/"/g, "\"");

        return temp;




    }
 

    console.log(htmlDecodeByRegExp('C:\\\\Users\\\\amingMM\\\\Desktop\\\\yujing\\\\'))

 var arg_ap = window.location.href.split('?')[1].split('&')

    var args_ = {}

    for(var i=0;i<arg_ap.length;i++){         //遍历数组，拿到json对象
 
      args_[arg_ap[i].split('=')[0]] = arg_ap[i].split('=')[1]

      }

    alert(args_.filename)

$(document).ready

window.onload = function(){ alert("welcome"); }
语句的作用是希望在页面加载完，自动执行定义js代码（function）。

$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;


$(document).ready()和onload的区别
    $(document).ready()和传统的方法<body οnlοad=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载。而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行，所以，使用document.ready()方法的执行速度比onload()的方法要快。

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

setTimeout

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种：

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

数据类型

var obj＝｛｝ 


若要向obj添加属性或方法，请使用点表示法或括号表示法。例如：

obj.name=“Alice”；

或obj[“年龄”]=25；

要从obj中删除属性或方法，
请使用delete运算符。
例如：delete obj.name；或删除obj[“年龄”]；

若要修改obj的属性或方法，
请使用点符号或括号符号为其指定一个新值。
例如：obj.name=“Bob”；或obj[“年龄”]=30；

若要查询obj的属性或方法，请将点表示法或括号表示法与if语句或三元运算符一起使用。
例如：

if（obj.name）
｛console.log（obj.name）；｝

或console.log（
obj[“age”]？obj[”age“]：“unknown”）；

js 编码

Js逆向 ob混淆与加速乐

base64

/ 使用atob和btoa进行Base64编码和解码（仅支持ASCII字符串）
var str = "Hello world!";
var encoded = btoa(str); // SGVsbG8gd29ybGQh 
var decoded = atob(encoded); // Hello world!

// 使用base64-js库进行Base64编码和解码（支持中文等）
var base64js = require('base64-js');
var str = "你好！";
var bytes = base64js.toByteArray(str); // [228, 189, 160, 229, 165, 189, 239, 188, 129]
var encoded = base64js.fromByteArray(bytes); // 5L2g5aW977yB 
var decoded = base64js.toByteString(encoded); // 你好！

data

data:,<文本数据>
 
data:text/plain,<文本数据>
 
data:text/html,<HTML代码>
 
data:text/html;base64,<base64编码的HTML代码>
 
data:text/css,<CSS代码>
 
data:text/css;base64,<base64编码的CSS代码>
 
data:text/javascript,<Javascript代码>
 
data:text/javascript;base64,<base64编码的Javascript代码>
 
data:image/gif;base64,base64编码的gif图片数据
 
data:image/png;base64,base64编码的png图片数据
 
data:image/jpeg;base64,base64编码的jpeg图片数据
 
data:image/x-icon;base64,base64编码的icon图片数据

url

获取当前URL的参数，有几种可能的方法。例如：

您可以使用window.location.search属性，
获取URL中问号（?）后面的部分，
也就是查询字符串（query string），

然后使用URLSearchParams构造函数，
将其转换为一个可操作的对象


const queryString = window.location.search; // 获取查询字符串
const urlParams = new URLSearchParams (queryString); // 将查询字符串转换为URLSearchParams对象


您也可以直接使用window.location.href属性，获取完整的URL字符串，
并将其作为参数传递给URL构造函数，创建一个新的URL对象，
然后使用该对象的searchParams属性，获取一个URLSearchParams对象


const url = new URL (window.location.href); // 获取完整的URL并创建一个新的URL对象
const urlParams = url.searchParams; // 获取该对象的searchParams属性
然后您就可以使用URLSearchParams对象提供的各种方法来操作和获取参数了。例如，您可以使用get方法来获取指定名称的参数值12：
const product = urlParams.get ('product'); // 获取名为product的参数值
console.log (product); // 打印参数值

在<body>标签中使用onload属性，指定要执行的js函数，例如：
<body onload="func1();func2();func3();">
</body>
在<script>标签中使用window.onload事件，指定要执行的js函数，例如：
<script type="text/javascript">
function myfun(){
   
  alert("this window.onload");
}
/*用window.onload调用myfun()*/
window.onload = myfun;//不要括号
</script>
使用jQuery的$(document).ready()方法，在DOM结构加载完毕后执行js代码，例如：
<script type="text/javascript">
$(document).ready(function(){
   
  //任何需要执行的js特效
  $("table tr:nth-child(even)").addClass("even");
});
</script>
使用定时器的setInterval()方法，设置定时器的时间为0，就可以加载定义的js代码，例如：
<script type="text/javascript">
function xxx(){
   
  js代码
}
setInterval(function(){
   
  xxx()方法
},0);
</script>
这些方法的区别在于执行的时机和次数。一般来说，$(document).ready()方法比window.onload方法更早执行，而定时器的方法可能会多次执行。

使用location.reload()方法，该方法会重新加载当前文档，类似于浏览器上的刷新按钮。例如：
// 刷新当前页面
location.reload()
使用location.replace()方法，该方法会用一个新文档替换当前文档，类似于客户端点击F5刷新页面。例如：
// 用当前页面的URL替换当前页面
location.replace(location.href)
使用location.assign()方法，该方法会加载一个新文档，类似于客户端点击一个链接。例如：
// 用当前页面的URL加载一个新文档
location.assign(location.href)
使用<meta>标签，在<head>区域中添加一个http-equiv属性为"refresh"的<meta>标签，指定一个content属性为刷新的时间间隔（单位为秒）。例如：
<!-- 每隔5秒刷新一次页面 -->
<head>
  <meta http-equiv="refresh" content="5">
</head>
使用setTimeout()函数，设置一个定时器，在指定的时间后执行一个函数，该函数调用location.reload()或其他方法来刷新当前页面。例如：
// 5秒后刷新当前页面
setTimeout(function()