HTML 기술을 향상시킬 때가 됐어!🔋

20217 단어 webdev javascript beginners html

네, 알고 있습니다.나는 네가 모든 인기 인터넷 기술을 알고 있다는 것을 안다.모서리의, 이온의, 디노의, 노드의, Django의 등등!진짜 대박이다.
문제는 HTML을 아십니까?네, 그 하이퍼텍스트 표기 언어요?아이구!다시 한 번 말하지만, 나는 네가 HTML을 알고 있다는 것을 안다. 이런 언어로 사이트를 작성할 때 너는 성인이었지만...HTML 게임에 전기를 공급하기 위해 추가 배터리를 추가하는 방법을 아십니까?
그래, 내가 도대체 무슨 말을 하는 거야!?아래로 스크롤하기만 하면, 게임의 성능을 향상시킬 수 있는 아주 좋은 HTML 기능 (특히 HTML5) 을 이해할 수 있다.⚡

자!

1️⃣ HTML5API🔌

HTML 지리적 위치 API[Docs]📃 ]

웹 사이트에서 내비게이션이나 맵 사용 등 사용자의 위치 정보를 검색해야 하는 경우 Geolocation API는 사용자에게 제공됩니다.
전화 navigator.geolocation 로 이 정보를 방문하고 사용자의 브라우저에 알림을 추가하여 위치 데이터에 접근할 수 있는 권한을 요청할 수 있습니다.
예:

function getLocation() {
  // Check for the geolocation service
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    el.innerHTML = "Geolocation is not supported.";
  }
}
function showPosition(position) {
  el.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

HTML Web Workers API[Docs]📃 ]

워크맨은 백엔드에서 실행되는 독립된 스크립트로 페이지를 불러올 때 페이지의 성능에 영향을 주지 않습니다.
작업 프로그램은 해당 코드를 만든 JavaScript 코드에 지정된 이벤트 처리 프로그램에 메시지를 게시하여 메시지를 보낼 수 있습니다.그것은 Worker() 구조 함수를 사용하여 이런 조작을 집행한다.
예:

// 1. CHECK FOR WEB WORKER SUPPORT
if (typeof(Worker) !== "undefined") {
  // Supported!
} else {
  // Not supported :(
}

// 2. CREATING A WEB WORKER OBJECT
if (typeof(w) == "undefined") {
  w = new Worker("worker_file.js");
}

// 3. SEND A MESSAGE FROM WORKER
w.onmessage = function(event){
  document.getElementById("workerdiv").innerHTML = event.data;
};

HTML SSE API[Docs]📃 ]

SSE는 서버가 보낸 이벤트를 나타냅니다.웹 페이지가 자동으로 서버에서 업데이트를 받을 때 이 이벤트를 터치합니다.
API는 EventSource 인터페이스에 포함됩니다.
예:

// 1. CHECK SUPPORT
if(typeof(EventSource) !== "undefined") {
  // Supported
} else {
  // No server-sent events supported :(
}

// 2. RECIEVE EVENTS FROM SERVER
var source = new EventSource("myserver.php");
source.onmessage = function(event) {
  document.getElementById("serverresult").innerHTML += event.data + "<hr>";
};

HTML 웹 저장소 API[Docs]📃 ]

이 API가 있으면 웹 응용 프로그램은 사용자의 브라우저에 로컬로 데이터를 저장할 수 있다.그것은 localStorage 와 sessionStorage 를 포함한다.
또 다른 선택은 쿠키를 만드는 것이지만 네트워크 저장소가 더 안전하고 안전하기 때문이다you can store large amounts of data.
예:

// 1. CHECK SUPPORT
if (typeof(Storage) !== "undefined") {
  // supported!
} else {
  // No Web Storage support :(
}

// 2. USING LOCALSTORAGE

// Store
localStorage.setItem("name", "Vaibhav");

// Retrieve
document.getElementById("namediv").innerHTML = localStorage.getItem("name");

// 2. USING SESSIONSTORAGE
sessionStorage.setItem('myName', 'Vaibhav');

2️⃣ HTML 이벤트 속성🖱

다음은 DOM에서 사용할 등록 정보입니다.

이 속성을 클릭하여 각 속성의 MDN 문서에 들어갈 수 있습니다!
활동 번호입니다.
등록 정보
묘사
예.
1
onerror
오류 발생 시 실행할 스크립트<img src="image.gif" onerror="error()">2
onload
페이지 로드 완료 후 발생<body onload="load()">셋.
onresize
브라우저 창 크기 조정<body onresize="resize()">4
onblur
원소가 초점을 잃을 때 자극하다<input type="text" onblur="blur()">5
onsearch
사용자가 검색 필드에 내용을 쓸 때 자극<input type="search" onsearch="search()">6
ondblclick
마우스로 요소를 두 번 클릭하여 발생시킵니다.<button ondblclick="clicked()">Double-click</button>7
onscroll
요소의 스크롤 막대를 스크롤할 때 실행할 스크립트<div onscroll="scroll()">8
oncopy
사용자가 요소의 내용을 복사할 때 자극<input type="text" oncopy="copy()" value="Copy this tex">9
oncanplay
파일이 재생을 시작할 준비가 되었을 때 실행할 스크립트<video oncanplay="canPlay()">10
ontoggle
사용자가 <details> 요소를 열거나 닫을 때 자극<details ontoggle="toggleDetail()">

알 만한 심상치 않은 HTML 태그🧩

크리스토퍼 카드・ 19년 5월 28일・ 3분 읽기

#webdev #html #a11y #beginners

4️⃣ HTML5 속성😋

다음 쿨 속성을 보고 해당 속성을 클릭하여 문서에 액세스해야 합니다.
▶ accesskey : 활성화/초점 요소를 지정하는 단축키입니다.
예:

<a href="https://mailchi.mp/f59beeac6b9b/devupdates" accesskey="d">
Subscribe to Dev Weekly newsletter</a>

▶ global attribute: 요소를 드래그할 수 있는지 여부를 지정하는 또 다른 전역 속성입니다.
예:

<p draggable="true">This is a draggable paragraph.</p>

▶ draggable : 항목에 속성을 추가할 수 있습니다.이 속성을 사용하여 항목을 쉽게 그룹화할 수 있습니다.
예:

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
    itemprop="trailer">Trailer</a>
</div>

▶ itemprop : 요소의 맞춤법과 문법을 검사할지 여부를 지정합니다.
예:

<p spellcheck="true">This is a paragraph with spell check on.</p>

▶ spellcheck : 요소가 연관되지 않았거나 더 이상 연관되지 않았음을 지정하는 부울 속성입니다.
예:

<p hidden>This paragraph should be hidden.</p>

숨겨졌어 다음 단계는 어디로 가야 합니까?🤔

프로젝트에서 이러한 태그/API/속성을 연습하거나 다음 코드 펜에서 테스트하는 것이 좋습니다.다음은 당신이 좋아할 수 있는 더 많은 링크입니다.

MDN Web Docs for Attributes

W3School's page on HTML DOM

읽어줘서 고마워, 고마워!오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

This bathroom's commit history is making us all look bad! Has yours been Git-ing greener as well? 😝

Image source: https://t.co/HEzYrUa6Ol pic.twitter.com/GWu5YFhCml
— Microsoft Developer UK (@msdevUK)

더 많은 HTML 내용!

📫 Subscribe to my weekly developer newsletter 📫
PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.만약 누군가가 나의 글을 보고 싶다면 이것은 나의 매체 자료이다.

Reference

이 문제에 관하여(HTML 기술을 향상시킬 때가 됐어!🔋), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vaibhavkhulbe/it-s-time-to-supercharge-your-html-skills-5b6k

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Touch Designer의 C++ 조작자와 Python의 합작

Rust 연관 유형 및 기본 일반 유형 매개변수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다