javascript之dhDataGrid Ver2.0.0代码_表单特效-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

javascript之dhDataGrid Ver2.0.0代码_表单特效

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:11 PM

针对dhDataGrid的前一版本Ver1.0.0而做的更新！

1、标题栏、左边边栏固定方式更新，取消expression方式；

2、排序方式更新，同时支持数字、字符、日期、数字字符混合、中文汉字的排序；

3、支持换肤，您可以自己定制该控件样式；

4、预留[双击]、[右键]功能；

5、支持IE、FF；

CSS：

/*dhdatagrid 大块样式*/
#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid 表格全局样式*/
#dhdatagrid table {table-layout:fixed;margin:0px;}
#dhdatagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1px solid buttonface;border-bottom:1px solid buttonface;}
#dhdatagrid table td .arrow {font-size:8px;color:#808080;}
#dhdatagrid table .lastdata {border-right:none;}
#dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;}
#dhdatagrid table .dataover {background:#FAFAFA;}
#dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 选定行样式*/
#dhdatagrid table .selectedrow {background:highlight;color:white;}
/*dhdatagrid 表头样式*/
#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}
/*dhdatagrid 左边栏样式*/
#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
#dhdatagrid #slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 内容表体样式*/
#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}
/*dhdatagrid 原点样式*/
#dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;text-align:center;font-size:10px;color:#A19F92;}

JS：

function dhdatagrid(){
//author:dh20156;
this.callname = "dhdg";
this.width = 500;
this.height = 200;
this.rid = "dhdatagrid";
this.columns = [];
this.data = [];
this.dblclick_fun = function(){}
this.contextmenu_fun = function(){}
this.parentNode = document.body;

var dh = this;
var framediv = null;
var zerobj = null;
var leftobj = null;
var titleobj = null;
var dataobj = null;
var hbar = null;
var vbar = null;
var bgbar = null;

//改变列宽初始位置
var ml = 0;
//改变列宽对象初始宽度
var ow = 0;
//改变列宽对象
var tdobj = null;
//当前选定行索引
var nowrow = null;
//是否更改垂直滚动条位置
var changeposv = true;

this.init = function(){
//init the data 初始数据
var dgc = "";
if(this.columns.length>0){
dgc = "

";
  for(var cc=0;cc   dgc += ""+this.columns[cc]+" ";
  }
  dgc += " ";
}

var dgs = "";
var dgd = "";
if(this.data.length>0){
  //第一列
  dgs = " ";
  for(var r=0;r   dgs += ""+(r+1)+"";
   dgd += " ";
   for(var c=0;c    dgd += ""+this.data[r][c]+"";
   }
   dgd += " ";
  }
  if(dgc==""){
   dgc = " ";
   for(var dc=0;dc    dgc += "Expr"+(dc+1)+" ";
   }
   dgc += " ";
  }
}

//dhdatagrid frame 框架
var dgframe = document.createElement("DIV");
dgframe.id = this.rid;
dgframe.onmousedown = function(e){e=e||window.event;getrow(e);}
dgframe.onmousemove = function(e){e=e||window.event;rsc_m(e);}
if(document.attachEvent){
  document.attachEvent("onmouseup",rsc_u);
}else{
  document.addEventListener("mouseup",rsc_u,false);
}
dgframe.oncontextmenu = function(){return false}
dgframe.onselectstart = function(){return false}
ae(dgframe);

//dhdatagrid zero point 零点
var dgzero = "

"

//dhdatagrid slidecolumn 第一列
var dgslide = ""+dgs+"

";

//dhdatagrid column 标题栏
var dgcolumn = ""+dgc+"

";

//dhdatagrid data 数据
var dgdata = ""+dgc+dgd+"

";

//dhdatagrid hbar 水平滚动条
var dghbar = document.createElement("DIV");
dghbar.id = "hbar";
dghbar.style.position = "absolute";
dghbar.style.width = "100%";
dghbar.style.height = "17px";
dghbar.style.top = this.height-17;
dghbar.style.overflowX = "auto";
dghbar.style.zIndex = "10";
dghbar.onscroll = function(){scrh();}
dghbar.innerHTML = "

";

//dhdatagrid vbar 垂直滚动条
var dgvbar = document.createElement("DIV");
dgvbar.id = "vbar";
dgvbar.style.position = "absolute";
dgvbar.style.width = "17px";
dgvbar.style.height = "100%";
dgvbar.style.left = this.width-17;
dgvbar.style.overflowY = "auto";
dgvbar.style.zIndex = "10";
dgvbar.onscroll = function(){scrv();}
dgvbar.innerHTML = "

";

//dhdatagrid bgbar 滚动条背景
var dgbgbar = document.createElement("DIV");
dgbgbar.id = "bgbar";
dgbgbar.style.background = "buttonface";
dgbgbar.style.position = "absolute";
dgbgbar.style.width = "100%";
dgbgbar.style.height = "17px";
dgbgbar.style.top = this.height-17;
dgbgbar.style.overflowX = "auto";
dgbgbar.style.zIndex = "9";
dgbgbar.style.display = "none";
dgbgbar.innerHTML = " ";

//appendChild
dgframe.innerHTML = dgzero+dgslide+dgcolumn+dgdata;
dgframe.appendChild(dghbar);
dgframe.appendChild(dgvbar);
dgframe.appendChild(dgbgbar);

this.parentNode.appendChild(dgframe);

if(document.attachEvent){
 document.attachEvent("onkeydown",updown);
}else{
 document.addEventListener("keydown",updown,false);
}

framediv = dgframe;
zerobj = document.getElementById("zero");
leftobj = document.getElementById("slidecolumn");
titleobj = document.getElementById("titlecolumn");
dataobj = document.getElementById("datacolumn");
hbar = dghbar;
vbar = dgvbar;
bgbar = dgbgbar;

var btt = getCurrentStyle(framediv,"borderTopWidth");
var btr = getCurrentStyle(framediv,"borderRightWidth");
var btb = getCurrentStyle(framediv,"borderBottomWidth");
var btl = getCurrentStyle(framediv,"borderLeftWidth");
var fh = getCurrentStyle(framediv,"height");
var zh = getCurrentStyle(zerobj,"height");
var zbt = getCurrentStyle(zerobj,"borderTopWidth");
var zbb = getCurrentStyle(zerobj,"borderBottomWidth");

if(document.all){
 vbar.style.left = parseInt(vbar.style.left)-parseInt(btr)-parseInt(btl);
}else{
 framediv.style.height = parseInt(fh)-parseInt(btb)-parseInt(btt);
 zerobj.style.height = parseInt(zh)-parseInt(zbb)-parseInt(zbt);
}

hbar.style.top = parseInt(hbar.style.top)-parseInt(btb)-parseInt(btt);
bgbar.style.top = parseInt(bgbar.style.top)-parseInt(btb)-parseInt(btt);
}
function getCurrentStyle(oElement, sProperty) {
if(oElement.currentStyle){
 return oElement.currentStyle[sProperty];
}else if(window.getComputedStyle){
 sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase();
 return window.getComputedStyle(oElement, null).getPropertyValue(sProperty);
}else{
 return null;
}
}
//设置块滚动条
this.setwh = function(){
hbar.style.display = "block";
vbar.style.display = "block";
hbar.childNodes[0].style.width = dataobj.offsetWidth;
vbar.childNodes[0].style.height = dataobj.offsetHeight;
if(hbar.childNodes[0].offsetWidth hbar.style.display = "none";
}else{
 hbar.style.display = "block";
}
if(vbar.childNodes[0].offsetHeight vbar.style.display = "none";
}else{
 vbar.style.display = "block";
}
if(hbar.childNodes[0].offsetWidth>hbar.offsetWidth && vbar.childNodes[0].offsetHeight>vbar.offsetHeight && changeposv){
 bgbar.style.display = "block";
 hbar.style.width = hbar.offsetWidth-17;
 vbar.style.height = vbar.offsetHeight-17;
 vbar.childNodes[0].style.height = vbar.childNodes[0].offsetHeight+17;
 changeposv = false;
}
if(hbar.childNodes[0].offsetWidth bgbar.style.display = "none";
 hbar.childNodes[0].style.width = 0;
 hbar.style.width = hbar.offsetWidth+17;
 vbar.style.height = vbar.offsetHeight+17;
 changeposv = true;
 if(vbar.offsetHeight-dataobj.offsetHeight>dataobj.offsetTop && document.all){
 leftobj.style.top = leftobj.offsetTop+17;
 dataobj.style.top = dataobj.offsetTop+17;
 }
}
}

//鼠标滚轮，列表滚动事件
function mwEvent(e){
e=e||window.event;
if(e.wheelDelta0){
 vbar.scrollTop += 18;
}else {
 vbar.scrollTop -= 18;
}
}
function ae(obj){
if(document.attachEvent){
 obj.attachEvent("onmousewheel",mwEvent);
}else{
 obj.addEventListener("DOMMouseScroll",mwEvent,false);
}
}

//滚动条事件
function scrv(){
leftobj.style.top = -(vbar.scrollTop);
dataobj.style.top = -(vbar.scrollTop);
}

function scrh(){
titleobj.style.left = -(hbar.scrollLeft);
dataobj.style.left = -(hbar.scrollLeft);
}

//选择行
function getrow(e){
e=e||window.event;
var esrcobj = e.srcElement?e.srcElement:e.target;
if(esrcobj.parentNode.tagName=="TR"){
 var epobj = esrcobj.parentNode;
 var eprowindex = epobj.rowIndex;
 if(eprowindex!=0){
 if(nowrow!=null){
 dataobj.rows[nowrow].className = "";
 }
 dataobj.rows[eprowindex].className = "selectedrow";
 nowrow = eprowindex;
 }
}
}

//更改列宽
this.rsc_d = function(e,obj){
var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6 && px e=e||window.event;
 obj=obj||this;
 ml = e.clientX;
 ow = obj.offsetWidth;
 tdobj = obj;
 if(obj.setCapture){
 obj.setCapture();
 }else{
 e.preventDefault();
 }
}else{
 if(nowrow!=null){
 dataobj.rows[nowrow].className = "";
 }
 if(obj.getAttribute("sort")==null){
 obj.setAttribute("sort",0);
 }
 var sort = obj.getAttribute("sort");
 if(sort==1){
 dgsort(obj,true);
 obj.setAttribute("sort",0);
 }else{
 dgsort(obj,false);
 obj.setAttribute("sort",1);
 }
 obj.className = "sortdown";
}
}
this.mouseup = function(obj){
obj.className = "over";
}
function rsc_m(e){
if(tdobj!=null){
 e=e||window.event;
 var newwidth = ow-(ml-e.clientX);
 if(newwidth>5){
 tdobj.style.width = newwidth;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
 }else{
 tdobj.style.width = 5;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
 }
 dh.setwh();
 scrh();
}
}
function rsc_u(e){
if(tdobj!=null){
 e=e||window.event;
 var newwidth = ow-(ml-e.clientX);
 if(newwidth>5){
 tdobj.style.width = newwidth;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
 }else{
 tdobj.style.width = 5;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
 }
 if(tdobj.releaseCapture){
 tdobj.releaseCapture();
 }
 ml = 0;
 ow = 0;
 tdobj = null;
}
dh.setwh();
scrh();
}

this.cc = function(e,obj){
var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6 && px obj.style.cursor = "col-resize";
}else{
 obj.style.cursor = "default";
}
}

this.over = function(obj){
obj.className = "over";
}

this.out = function(obj){
obj.className = "column";
}

this.dataover = function(obj){
if(obj.rowIndex!=nowrow){
 obj.className = "dataover";
}
}

this.dataout = function(obj){
if(obj.rowIndex!=nowrow){
 obj.className = "";
}
}

//键盘Up & Down事件
function updown(e){
e=e || window.event; e=e.which || e.keyCode;
var rl = dh.data.length;
switch(e){
 case 38://Up;
 if(nowrow!=null && nowrow>1){
 vbar.scrollTop -= 18;
 dataobj.rows[nowrow].className = "";
 nowrow -= 1;
 dataobj.rows[nowrow].className = "selectedrow";
 };
 break;
 case 40://Down;
 if(nowrow!=null && nowrow vbar.scrollTop += 18;
 dataobj.rows[nowrow].className = "";
 nowrow += 1;
 dataobj.rows[nowrow].className = "selectedrow";
 };
 break;
 default:break;
}
}

function dti(s){
var n = 0;
var a = s.match(/\d+/g);
for(var i=0;i if(a[i].length a[i] = "0"+a[i];
 }
}
n = a.join("");
return n;
}

//排序
function dgsort(obj,asc){
var rl = dh.data.length;
var ci = obj.cellIndex;
var rowsobj = [];
for(var i=1;i rowsobj[i-1] = dataobj.childNodes[0].rows[i];
}
rowsobj.sort(function(trObj1,trObj2){
 if(!isNaN(trObj1.cells[ci].innerHTML.charAt(0)) && !isNaN(trObj2.cells[ci].innerHTML.charAt(0))){
 if(asc){
 return dti(trObj1.cells[ci].innerHTML)-dti(trObj2.cells[ci].innerHTML);
 }else{
 return dti(trObj2.cells[ci].innerHTML)-dti(trObj1.cells[ci].innerHTML);
 }
 }else{
 if(asc){
 return trObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML);
 }else{
 return trObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci].innerHTML);
 }
 }
 });
for(var i=0;i dataobj.childNodes[0].appendChild(rowsobj[i]);
}
for(var c=1;c obj.parentNode.cells[c].childNodes[1].innerHTML = "";
}
if(asc){
 obj.childNodes[1].innerHTML = "▲";
}else{
 obj.childNodes[1].innerHTML = "▼";
}
}
}

<script></script>

<script> var dhdg = new dhdatagrid(); dhdg.callname = "dhdg"; dhdg.columns = ["名称","大小","修改时间"]; dhdg.data = [["01.jpg","49 KB","2006-12-6 17:06"],["02.gif","3 KB","2006-12-6 17:06"],["axjz.jpg","121 KB","2007-1-19 10:19"],["bb.jpg","314 KB","2006-10-24 15:49"],["cd056.jpg","50 KB","2007-1-5 10:03"],["d.psd","27,639 KB","2006-11-6 13:31"],["dhAJ2.htm","12 KB","2006-12-21 10:53"],["dhChange.htm","12 KB","2006-10-19 9:28"],["dhcombobox.htm","2 KB","2006-12-22 11:39"],["保险.txt","5 KB","2007-1-3 11:31"],["滨江丽景.rar","1,048 KB","2007-1-18 14:23"],["积分兑奖.doc","634 KB","2007-1-19 11:17"],["亲人.jpg","396 KB","2006-12-23 15:50"],["未标题-2.jpg","61 KB","2006-12-23 15:46"]]; dhdg.dblclick_fun = function(e){alert(e+',ondblclick');} dhdg.contextmenu_fun = function(e){alert(e+',oncontextmenu');} dhdg.init(); dhdg.setwh(); </script>

注： DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/
原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx

另外一个封装的很简单的grid by 秦皇也爱JS

<script> var GridData = { title: ["姓名","性别","年龄","学历","特长"], type: [0,1,0,1,0], //编辑框类型 ŀ--textbox Ł---select order: [-1,-1,-1,-1,-1], //排序类型 Ł----升序 -1---降序 data: [["张三","男",27,"本科","足球"], ["YM","男",26,"本科","中锋"], ["McGrady","男",28,"博士","前锋"], ["James","男",25,"本科","小前锋"], ["Good","女",21,"高中","商品"], ["Fut","男",22,"本科","WAR3"], ["Keens","男",37,"高中","SC"], ["Gruby","女",32,"本科","SC"], ["Grrr","男",19,"硕士","SC"], ["Sky","男",22,"本科","WAR3"], ["Moon","男",25,"本科","WAR3"]] }; var 性别 = ["男", "女"]; var 学历 = ["高中", "本科", "硕士", "博士"]; function MyGrid(data, cnt){ MyGrid.backColor = "#fdfdfd"; MyGrid.hoverColor = "#edfae9"; MyGrid.clickColor = "#e1e6f1"; this.datas = data; this.container = cnt; this.table; this.curRow; this.curCell; this.editTools = [document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))]; var CurGrid = this; this.load = function(){ //grid重画模块 /** 加载table **/ var tbStr = []; tbStr.push("<table cellspacing='1'><tr height='25'>"); for(var o in this.datas.title){ tbStr.push("<th>" + this.datas.title[o] + (this.datas.order[o]==1?"↑":"↓") + ""); } tbStr.push(""); for(var i in this.datas.data){ tbStr.push("<tr bgcolor=" + MyGrid.backColor + " height='25'>"); for(var j in this.datas.data[i]){ tbStr.push("<td>" + this.datas.data[i][j] + ""); } tbStr.push(""); } tbStr.push(""); this.container.innerHTML = tbStr.join(""); this.table = this.container.firstChild; /** 设置编辑工具 **/ this.editTools[0].onblur = function(){ CurGrid.curCell.removeChild(CurGrid.curCell.firstChild) CurGrid.curCell.appendChild(document.createTextNode(this.value)); if(isNaN(CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex])){ CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value; }else{ CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = Number(this.value) } this.value = ""; this.style.display = "none"; } this.editTools[1].onblur = function(){ this.options.length = 0; this.style.display = "none"; } this.editTools[1].onchange = function(){ CurGrid.curCell.removeChild(CurGrid.curCell.firstChild) CurGrid.curCell.appendChild(document.createTextNode(this.value)); CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value; this.options.length = 0; this.style.display = "none"; } /** 设置单元格 **/ for(var r=1; r<this.table.rows.length;r++){ this.table.rows[r].onmouseover = function(){ this.style.backgroundColor = MyGrid.hoverColor; } this.table.rows[r].onmouseout = function(){ if(CurGrid.curRow!=this) this.style.backgroundColor = MyGrid.backColor; else this.style.backgroundColor = MyGrid.clickColor; } for(var c=0;c<this.table.rows[r].cells.length;c++){ this.table.rows[r].cells[c].onclick = function(){ if(CurGrid.curRow) CurGrid.curRow.style.backgroundColor = MyGrid.backColor; CurGrid.curRow = this.parentNode; this.parentNode.style.backgroundColor = MyGrid.clickColor; } this.table.rows[r].cells[c].ondblclick = function(){ //alert("( " + this.cellIndex + "," + this.parentNode.rowIndex + " ) " + this.firstChild.data); CurGrid.curCell = this; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.display = "block"; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.width = this.offsetWidth; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.height = this.offsetHeight; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.left = getAbsPos(this).leftx - CurGrid.container.scrollLeft; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.top = getAbsPos(this).topy - CurGrid.container.scrollTop; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].focus(); if(CurGrid.datas.type[this.cellIndex] == 0){ CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].select(); }else if(CurGrid.datas.type[this.cellIndex] == 1){ CurGrid.loadSelect(CurGrid.datas.title[this.cellIndex]); } CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].value = this.firstChild.data; } } } for(var g=0; g<this.table.rows[0].cells.length;g++){ this.table.rows[0].cells[g].onclick = function(){ CurGrid.datas.order[this.cellIndex] = -CurGrid.datas.order[this.cellIndex]; CurGrid.sort(this.cellIndex, CurGrid.datas.order[this.cellIndex]); } } } this.sort = function(n, type){ //排序 this.datas.data = this.datas.data.sort(function(x,y){if (x[n]>y[n]){return type;}else if(x[n]<y[n]){return -type;}else{return 0;}}); this.load(); } this.delRow = function(){ //删除行 this.datas.data.splice(this.curRow.rowIndex-1, 1); this.table.deleteRow(this.curRow.rowIndex); } this.loadSelect = function(type){ //读取下拉框内容 var opts = this.editTools[1].options; for(var o in eval(type)){ var opt = document.createElement("option"); opt.value = opt.text = eval(type)[o]; opts.add(opt); } } } var grid; window.onload = loadGrid; function loadGrid(){ grid = new MyGrid(GridData, $("panel")); grid.load(); } function $(id){ return document.getElementById?document.getElementById(id):eval(id); } function getAbsPos(obj){ var objResult = new Object(); objResult.topy = obj.offsetTop; objResult.leftx = obj.offsetLeft; while( obj = obj.offsetParent){ objResult.topy += obj.offsetTop; objResult.leftx += obj.offsetLeft; } return objResult; } </script>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles