지난 게시물에서 JS, 변수, 연산자, 분기 구조, 루프 및 중첩 루프 등 이번에는 JS BOM, DOM, 이벤트에 대해 이야기해보겠습니다. 🎜>.
1. "큰 당근" - BOM
1 , 충격 , FFF그룹이 BOM으로 성화를 이룬 이유 - BOM소개
BOM(Browser Object Model)는 브라우저객체모델을 나타냅니다. JS에서 BOM은 많은 객체를 포함하고 그 중 하나가 브라우저 창을 나타내기 때문에 철저한 문제 해결자입니다. 🎜>창 개체는 BOM의 "메인 룸"이며, 가장 중요한 다른 개체는 메인 룸의 하위 개체, 즉 사이드라고 해도 과언이 아닙니다. 방.
2. BOM 업무를 자세하게 계산 - BOM 객체에 대한 자세한 설명
2.1 메인룸 BOM—— 창 개체.window 객체는 브라우저 창을 나타내며, JS의 BOM에서 가장 많이 사용되는 객체입니다. window 객체를 이해하는 일반적인 방법을 소개하겠습니다.
① 프롬프트: 사용자 입력을 수락하는 팝업 창
② 경고: 팝업 경고
③ 확인: 확인/취소
버튼이 있는 프롬프트 상자가 있습니다. ④ 닫기: 브라우저 창을 닫습니다.
⑤ 열기: 새 창 열기, 업로드 매개변수 URL/창 이름/창 특성 입력
⑥ set
Timeout: 지연된 실행만 설정합니다. 한 번 실행됩니다(두 개의 매개변수: 함수/실행할 밀리초 수). ⑦ setInterval: 타이머
를 설정하면 루프가 N 밀리초마다 실행됩니다(수신 매개변수). : setInterval 호출 시 ID를 반환하고, 변수를 통해 ID를 승인하고, 8을 전달합니다. clearInterval:cleartimer;
이 9가지 방법 중 가장 일반적으로 사용되며 가장 문제가 되는 네 가지 방법은 setTimeout/clearTimeout 및 setInterval/clearInterval입니다. 그런 의미에서 밤을 하나 드립니다~
(chestnut: setTimeout/clearTimeout)
nbsp;html>
<meta>
<title>首先是setTimeout与clearTimeout</title>
<!--要记得首先打开控制台哟~-->
<script>
var timeoutid = setTimeout(function(){
console.log("setTimeout");
},5000) ; function clearTimeoutBtn(){
clearTimeout(timeoutid);
} </script>
<button>clearTimeout</button>
(chestnut: setInterval/clearInterval)
nbsp;html>
<meta>
<title>然后是setInterval与clearInterval</title>
<!--要记得首先打开控制台哟~-->
<script> var num = 10; var timeinterval = setInterval(function(){
num--;
console.log(num); if (num==0){
clearInterval(timeinterval);
}
},1000) function clearIntervalBtn(){
clearInterval(timeinterval);
} </script>
<button>clearIntervar</button>
2.2 BOM의 옆방 - 기타 개체에 대한 간략한 설명입니다.
실제 JS 작성에서는 윈도우 객체 이외의 BOM 객체가 거의 등장하지 않기 때문에 이번 K에서는 코드 형태로 간략하게 언급하겠습니다.
nbsp;html>
<meta>
<title>BOM的侧室们</title>
<!--要记得首先打开控制台哟~-->
<script>
// screen对象
console.log(screen);
console.log(screen.width);//宽度 console.log(screen.height);//高度 console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏 console.log(screen.availWidth);//可用宽度
// location对象
// 完整的url路径：
// 协议：// 主机名（IP地址）:端口号（默认80端口）/文件路径?传递的参数（参数名0=参数值0&参数名1=参数值1）#锚点
console.log(location);
console.log(location.href);//完整路径 console.log(location.protocol);//路径协议http: https: ftp: file: mailto: console.log(location.pathname);//路径部分 /开始 console.log(location.port);//端口号 console.log(location.search);//从?开始往后的部分 console.log(location.hostname);//IP地址 console.log(location.host);//主机名+端口号 console.log(location.hash);//从#开始的锚点
// 使用JS设置页面跳转
// window.location="http://www.baidu.com";
function locationReload(){ //重新加载当前页面 location.reload(true);//reload(true)表示从服务器重新加载当前页面；reload()在本地刷新当前页面 }
function locationAssign(){
location.assign("http://www.baidu.com"); //加载新的文档，替换以后可以回退 }
function locationReplace(){
location.replace("http://www.baidu.com");//使用新的文档替换当前文档，替换后不能回退 }
// history
// length : 浏览历史列表的个数
// history.forward(); ： 前进到前一个页面
// history.back(); ： 后退到后一个页面
// history.go(); : 跳转到历史浏览历史的任意位置；当前页为第0个，前一个页面为第1个，后一个页面为第-1个
console.log(history.length);
function historyForword(){
history.forward();
} function historyBack(){
history.back();
} function historyGo(){
history.go(); // 0
// 1 = history.forward();
// -1 = history.back(); }
// Navigator console.log(navigator.appName);//产品名称 console.log(navigator.appVersion);//产品版本号 console.log(navigator.userAgent);//用户代理信息 console.log(navigator.platform);//系统代理平台
console.log(navigator.plugins);//检查浏览器安装的插件信息
// 返回一个数组，检测浏览器安装的所有插件(↓主要属性↓)
// description ： 插件描述信息
// filename ： 插件在本地磁盘的文件名
// length ： 插件的个数
// name ： 文件名
console.log(navigator.mimeTypes);//浏览器插件所支持的文件类型(↓主要属性↓)
// description：MIME类型描述
// enabledPlugin：支持此类型的浏览器插件
// suffixes：此类型可能的后缀名
// type：MIME类型的写法，例如：image/x-icon text/css
</script>
<button>加载新的文档</button>
<br>
<button>重新加载当前文档</button>
<br>
<button>使用新的文档替换当前文档</button>
<br>
<button>这个是historyForword</button>
<br>
<button>这个是historyBack</button>
<br>
<button>这个是historyGo</button>
二、“N世同堂”——DOM
1、朝阳群众又立功，代码中竟出现如此神秘的“庞大组织”——DOM简介
DOM（Document Object Model），是指文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型，而DOM中的每一条分支都被称作一个“节点”，所有节点及节点属性构成的结构图会呈现出很强的层次性（栗子如下图，源于万能的度娘）。
DOM节点分为三大类：元素节点，文本节点，属性节点。文本节点、属性节点为元素节点的两个子节点，通过gelElement系列方法，可以取到元素节点。
2、如此组织，其真相竟然是...——DOM操作详解
DOM操作是JS中应用性非常强的一部分，所以本K就以代码的形式来给大家叙述。
2.1 获取节点与样式修改
nbsp;html>
<meta>
<title>DOM代码详述（一）</title>
<script>
window.onload = function(){ var p1 = document.getElementById("p1");//通过ID获取唯一的节点；多个同名ID只会取第一个 console.log(p1);
console.log(p1.tagName);//查看节点：①属性；获取节点的标签名 console.log(p1.innerHTML);//②设置或者获取节点内部的所有HTML代码 console.log(p1.innerText);//③设置或者获取节点内部的所有文字
console.log(window.getComputedStyle(p1,null));//查看所有属性（非IE属性） console.log(p1.currentStyle);//查看所有属性（IE属性）
} function getById(){ //取到元素节点的样式属性节点
var p1 = document.getElementById("p1").style;//获取 p1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性，一律驼峰命名法
//取到元素节点
var pDoc = document.getElementById("p1");//获取 pDoc.innerHTML = "<s>king_land";//重置修改p中的HTML代码 }
//——————————————分割线——————————————————
function getByName(){//通过Name取到一个数组，包含1到多个节点;
var p = document.getElementsByName("p1");
console.log(p.length);
//使用方式：通过循环，取到每一个节点，循环次数从0开始，<数组.length
for(var n = 0 ;n < p.length ; n++){
p[n].style.backgroundColor = "#FFFF00";
}
//p1.backgroundColor = "#FFFF00";
//p[0].style.backgroundColor = "#FFFF00";//★
}
//——————————————分割线——————————————————
//document.getElementsByTagName();//同Name
function getByTagName(){
var p = document.getElementsByTagName("p");
p[0].style.backgroundColor = "#00FF00";
}
//——————————————分割线——————————————————
//document.getElementsByClassName();//同Name
function getByClass(){
var p = document.getElementsByClassName("p1");
p[0].style.backgroundColor = "#00FFFF";
} //——————————————分割线——————————————————
function getAttr () {
var img1 = document.getElementById("img1");
alert(img1.getAttribute("src"));
}//查看属性节点 getAttribute("属性名");
//——————————————分割线——————————————————
function setAttr () {
var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
img1.setAttribute("style","width: 100px;height: 100px;");
}//设置属性节点 getAttribute("属性名","属性值");
//——————————————分割线——————————————————
//JS修改样式总结
//1、.className：为元素设置一个新的class名字 例如：p1.className = "p2";
//2、.style：为元素设置新的样式 例如：p1.style.background-color = "blue";
//3、.style.cssText：为元素同时修改多个样式 例如：p1.style.cssText = "width:100px;height:200px;";
</script>
<style>
.p1{
height: 100px;
width: 100px;
background-color: #000000;
color: #FFFFFF;
line-height: 100px;
text-align: center;
}
</style>
<p>
这里是测试区
</p>
<p>
这里是测试区
</p>
<p>
这里是测试区
</p>
<img src="/static/imghwm/default1.png" data-src="../../2-CSS基础语法/img/bg_flower_multi.gif" class="lazy" alt="BOM, DOM 및 JS의 이벤트" >
<br>
<button>通过ID修改pcolor</button>
<br>
<button>通过Name修改pcolor</button>
<br>
<button>通过TagName修改pcolor</button>
<br>
<button>通过ClassName修改pcolor</button>
<br>
<button>取到img的src属性值</button>
<br>
<button>修改img的src属性值</button>
2.2 层次节点常用操作
nbsp;html>
<meta>
<title></title>
<script>
window.onload = function (){
//获取层次节点的常用属性
var ul1 = document.getElementById("ul1");
// var lis = ul1.getElementsByTagName("li"); //只取到ul1中所有li// var lis = document.getElementsByTagName("li"); //取到页面中所有的li
console.log(ul1.childNodes);//获取元素的所有子节点（包含元素节点、文本节点）
console.log(ul1.firstChild);//获取元素的第一个子节点
console.log(ul1.lastChild);//获取元素的最后一个子节点
console.log(ul1.ownerDocument);//获取当前文档根节点，在html文档中为document节点
console.log(ul1.parentNode);//获取当前节点的父节点
console.log(ul1.previousSibling);//获取当前节点的前一个兄弟节点
console.log(ul1.nextSibling);//获取当前节点的后一个兄弟节点
//上述属性均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild→firstElementChild
console.log(ul1.attributes);//获取当前节点的所有属性节点
}
//——————————————创建并新增节点——————————————————
//方法一：.creatElement("标签名")创建一个新节点，需要配合setAttribute()方法设置属性；
//方法二：.appendChild(节点名)在元素的最后追加一个新节点
//方法三：.insertBefore(新节点名,目标节点名)：将新节点插入到目标节点之前
//方法四：克隆对象.cloneNode(true/false)：需要克隆谁，就用谁去调用克隆节点；传递参数可以为true/false，true表示克隆当前节点及子节点；false表示只克隆当前节点，不克隆子节点。
function appendImg(){
//1、创建一个图片节点
var img = document.createElement("img"); //2、给img节点设置属性 img.setAttribute("src","../../1-HTML基本标签/ivicon.png"); //3、将设置好的img节点追加到body最后 document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png");
}
function insertImg(){
//1、创建一个图片节点
var img = document.createElement("img"); //2、给img节点设置属性 img.setAttribute("src","../../1-HTML基本标签/ivicon.png"); //3、在两个ul之间插入图片
var ul2 = document.getElementById("ul2");
document.body.insertBefore(img,ul2);
} var count = 2; function copyUl(){
//1、取到ul2节点
var ul2 = document.getElementById("ul2"); //2、克隆节点
var ul2Clon = ul2.cloneNode(true);
count ++;
ul2Clon.setAttribute("id","ul"+count) //3、在原ul2节点之前，插入新克隆节点 document.body.insertBefore(ul2Clon,ul2);
}
//——————————————删除和替换节点——————————————————
//1、.removeChild(需删除节点)：从父容器中删除指定节点；
//2、.replaceChild(新节点，被替换节点)：用新节点替换被指定节点，如果新节点为页面中已有节点，会将此节点删除后替换到指定节点。
function deleteUl1(){
//取到ul1
var ul1 = document.getElementById("ul1"); if (ul1){ //从父容器body中删除ul1节点 document.body.removeChild(ul1);
}else{
alert("憋删了，早没了");
}
}
function ul1ReplaceUl2(){
var p = document.createElement("p");
p.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;"); var ul2 = document.getElementById("ul2");
document.body.replaceChild(p,ul2);
}
</script>
<style>
ul{
width: 600px;
list-style: none;
padding: 0;
background-color: #20B2AA;
display: flex;
justify-content: space-around;
margin-top: 20px;
}
</style>
- 第一项
- 第二项
- 第三项
- 第四项
- 第1项
- 第2项
- 第3项
- 第4项
2.3 表格操作
nbsp;html>
<meta>
<title>DOM操作表格</title>
<script>
//表格对象：
//1、rows属性：返回表格中的所有行，数组；
//2、insertRow(index)：在表格的第index+1行，插入一个新行；
//3、deleteRow(index)：删除表格的第index+1行；
//表格的行对象：
//1、cells属性：返回当前行中的所有单元格，数组；
//2、rowIndex属性：返回当前行在表格中的索引顺序，从0开始；
//3、insertCell(index)：在当前行的index+1处插入一个td；
//4、deleteCell(index)：删除当前行的第index+1个td；
//表格的单元格对象：
//1、cellIndex属性：返回单元格在该行的索引顺序，从0开始；
//2、innerHTML属性：设置或者返回当前单元格中的HTMl代码；
//3、align（valign）属性：设置当前单元格的水平对齐方式；
//4、className属性：设置单元格的class名称。
function newRow(){
var book = prompt("书名："); var price = prompt("价格：");
var table = document.getElementsByTagName("table"); //在表格的最后一行插入一个新行
var newRow = table[0].insertRow(table[0].rows.length-1); //给新行设置单元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = book; var cell1 = newRow.insertCell(1);
cell1.innerHTML = price;
getSum();
}
function deleteRow(){
var table = document.getElementsByTagName("table"); if(table[0].rows.length>2){
table[0].deleteRow(table[0].rows.length-2);
}else{
alert("删删删！删你妹啊删！")
}
getSum();
}
function changeTitle(){
var color = prompt("请输入6位十六进制颜色值："); var table = document.getElementsByTagName("table");
table[0].rows[0].style = "background-color:#"+color;
}
function copyRow(){
var table = document.getElementsByTagName("table"); var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true); var heJi = table[0].rows[table[0].rows.length-1]; //由于浏览器，自动将表格的<tr>包裹在<tbody>中
//所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入；
if(table[0].rows.length>2){
table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
}else{
alert("没有可以复制的行");
}
getSum();
}
function getSum(){ //取到当前表格 表格所有行
var table = document.getElementsByTagName("table"); var rows = table[0].rows; // if(rows.length<=2){
rows[rows.length-1].cells[1].innerText = 0 + "元";
alert("没有可计算的行！"); return;
} //求和
var sum = 0 ;
for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1 rows.length-2
var cells = rows[i].cells;//取到单元格 sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的 内容（innerText） 转化成数字并求和计算！
}
rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
}
window.onload = function(){
getSum();
}
</script>
<style>
table{
border-collapse: collapse;
width: 400px;
text-align: center;
color: #585858;
}
td,th{
border: 1px solid #8B8A8B;
}
table tr:last-child{
color: #E70014;
}
</style>
| 书名 | 价格 |
|---|---|
| 看得见风景的房间 | 30.00元 |
| 幸福从天而降 | 18.50元 |
| 60个瞬间 | 32.00元 |
| 合计 |
三、鼠标和键盘、那些不得不说的事——JS中的事件
1、三足鼎立——JS中的事件分类
1.1 鼠标事件
click 单击
dblclick 双击
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标划过
mousedown 鼠标按下
mouseup 鼠标抬起
1.2 键盘事件
keydown：键盘按下时触发
keypress：键盘按下并松开的瞬间触发
keyup：键盘抬起时触发
【주의사항】
①실행순서 : keydown keypress keyup
②오랜시간 누르면 실행됨 계속해서 keydown keypress
3keydown 이벤트는 있지만 keyup 이벤트가 없을 수 있음(이벤트 발생 과정에서 마우스를 움직이면 keyup이 없을 수 있음)
④키 누르기 이벤트만 캡처할 수 있습니다. 문자, 숫자 및 기호(캐리지 리턴 및 공백 포함)는 기능 키를 캡처할 수 없습니다. keydown 키업은 기본적으로 특별한 예외를 제외하고 모든 기능 키를 캡처할 수 있습니다.
⑤keypress는 대소문자를 구분하지만 keydown keyup은 그렇지 않습니다.
⑥keypress는 기본 키보드와 작은 키보드를 구분하지 않지만 keydown keyup은 구분합니다. [키보드 트리거 키 결정 방법]
⑴ 트리거 함수
에서 트리거 매개변수 e는 키 이벤트를 나타냅니다. >⑵ e.keyCode를 통해 케이스의 Ascii 코드 값을 확인한 후 키를 결정합니다. ⑶ 모든 브라우저와 호환됩니다(일반적으로 불필요):
var evn = e||event; //버튼 가져오기
var code = evn .keyCode||evn.which||evn.charCode;
1.3 HTML 이벤트
2. 이 해안과 저 해안 - JS의 이벤트 모델
2.1 DOM0 이벤트 모델
2.1.1 인라인 모델: HTML 태그 ;
;/button>
단점: W3C의 HTML과 JS 분리의 기본 원칙을 위반합니다!
2.1.2 스크립트 모델: JS 스크립트의 이벤트 속성을 통한 바인딩 >
2.2 DOM2 이벤트 모델(나중에 밤이 있습니다!)
①添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("click",函数,true/false);
true：表示事件捕获；false（默认）：表示事件冒泡
兼容写法：if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}
②取消事件绑定：
.detachEvent("onclick",函数名);
.removeEventListener("click",函数名);
注：如果取消时间帮顶，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件帮顶时，需要传入函数名；
nbsp;html>
<meta>
<title>这里是栗子</title>
<script>
window.onload = function (){
var btn1 = document.getElementById("btn1"); function func1(){
alert(1);
} function func2(){
alert(2);
}
btn1.addEventListener("click",func1,false);
btn1.addEventListener("click",func2,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",func1);
},false);
} </script>
<button>点我会弹窗！</button>
<br><br>
<button>点我不弹窗！</button>
3、上上下下——JS中的事件流
3.1 事件冒泡
当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
DOM0事件流均为事件冒泡；
IE中使用.attachEvent()事件，均为冒泡；
其他浏览器.addEventListener()添加的事件，当第三个参数为false时，为冒泡。
3.2 事件捕获
当某DOM元素触发某事件时，会从DOM根节点，逐个触发其祖先元素的同类型事件，直到触发到当前DOM元素开始；
只有使用.addEventListener()添加的事件，并且当第三个参数为true时，才进行捕获。
3.3 阻止事件冒泡
IE浏览器：将e.cancelBubble属性设为true；
其他浏览器：调用e.stopPropagation();方法
3.4 取消事件默认行为
IE浏览器：将e.returnValue属性设为false；
其他浏览器：调用e.preventDefault(); 方法
（这里有栗子）
nbsp;html>
<meta>
<title>事件流举栗</title>
<style>
#p1{
width: 200px;
height: 200px;
background-color: #20B2AA;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#p2{
width: 100px;
height: 100px;
background-color: #436690;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#p3{
width: 50px;
height: 50px;
background-color: #4E2E83;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
</style>
<p>
</p><p>
</p><p>3</p>
2
1
<a>跳转页面</a>
<script> var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); var p3 = document.getElementById("p3");
p1.addEventListener("click",function(e){
handleE();
console.log("p1触发了click事件");
},false);
p2.addEventListener("click",function(e){
handleE();
console.log("p2触发了click事件");
},false);
p3.addEventListener("click",function(e){
handleE();
console.log("p3触发了click事件");
},false); function handleE(e){ var evn = e||window.event;
evn.stopPropagation();
} function stopHref(e){
e = e||window.event; if (e.preventDefault) {
e.preventDefault(); //IE以外 } else {
e.returnValue = false; //IE }
alert("好气呀！");
}
</script>
위 내용은 BOM, DOM 및 JS의 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AMJavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.
파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AMPython 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.
Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.
JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.
JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AMJavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.
C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AMC 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.
웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AMJavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AMPython은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
