three.js

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

  github.com/mrdoob/three.js/releases

threejs.org/

숫자 카운트 효과

function numberCounter(target_frame, target_number) {
    this.count = 0; this.diff = 0;
    this.target_count = parseInt(target_number);
    this.target_frame = document.getElementById(target_frame);
    this.timer = null;
    this.counter();
};
numberCounter.prototype.counter = function() {
    var self = this;
    this.diff = this.target_count - this.count;
     
    if(this.diff > 0) {
        self.count += Math.ceil(this.diff / 5);
    }
     
    this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     
    if(this.count < this.target_count) {
        this.timer = setTimeout(function() { self.counter(); }, 20);
    } else {
        clearTimeout(this.timer);
    }
};

new numberCounter("counter1", 99999);
new numberCounter("counter2", 21565748);
new numberCounter("counter3", 121554864865);

Simple chatbot UI for the Web with JSON scripting

github.com/ngio/chat-bubble

Simple chatbot UI for the Web with JSON scripting 👋🤖🤙

• Quick set-up & implementation.
• Works with or without Natural Language Classifiers.
• 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+).

Installation

Yarn/NPM

yarn add chat-bubble or npm install chat-bubble

javascript Minifier - 스크립트 코드 경량화

javascript-minifier.com/

보통 파일명.min.css 처럼 .min 이붙으면 경량화를 거친 코드라고 볼 수 있다.

경량화를 하는 이유는 코드의 크기를 줄여 리소스를 절약하기 위해서이다.

불필요한 문자,주석,공백,줄바꿈 등을 제거하여 한줄로 만들어 코드의 크기를 10~95% 까지 줄일수 있다고 한다.

www.minifier.org/

github.com/matthiasmullie/minify/

 GoJS - Interactive JavaScript Diagrams for the Web

GoJS is a JavaScript and TypeScript library for building interactive diagrams and graphs

From simple flowcharts and org charts to highly-specific industrial diagrams, SCADA and BPMN diagrams, medical diagrams such as genograms and outbreak modeling diagrams, and more. GoJS makes constructing graphs of complex nodes, links, and groups easy with customizable templates and layouts.

GoJS offers advanced features for user interactivity such as drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management, palettes, overviews, event handlers, commands, extensible tools for custom operations, and customizable animations.

We maintain hundreds of sample diagrams, detailing different examples of interactivity, templates, and user logic for you to start from. We offer free developer-to-developer support during evaluation.

Flowcharts

Build interactive flowcharts or flow diagrams. Let your users build, modify, and save Diagrams with JSON model output.

State Charts

Visualize State Charts and other behavior diagrams. Create diagrams with live updates to monitor state, or interactive diagrams for planning.

Sankey Diagrams

GoJS allows considerable customization of Links and Nodes to build all kinds of diagrams. Visualize flow, or connect pipes

Genogram Diagrams

Create Genogram and Medical diagrams, or editable family trees with collapsible levels.

Org Charts

Create classic org charts for viewing or editing. Automatic layouts make different visualization options easy.

Dynamic Ports

Dynamically add ports and custom link routing. Use data-bindings to save and load routes within the Model JSON.

Industrial Processes

Model industrial processes, workflows, SCADA diagrams and more. Permissions and validation make it easy to add rules and constraints when your customers build diagrams.

Dynamic Grouping

Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.

Scrum board with drag and drop

codepen.io/erikdevos/pen/ZYNWoR

See the Pen Scrum board with drag and drop by Erik de Vos (@erikdevos) on CodePen.

텍스트로 요소 찾기

ID 나 클래스가 아닌 내용을 기반으로 요소를 찾을 수 있는지 누구든지 말할 수 있습니까 ?

고유 한 클래스 나 ID가없는 요소를 찾으려고합니다. (그런 다음 해당 요소의 부모를 찾아야합니다.)

Therefore it is not enough that you use :contains() selector, you also need to check if the text you search for is the direct content of the element you are targeting for, something like that:

따라서 :contains() selector 를 사용하는 것으로는 충분하지 않습니다. 검색하는 텍스트 가 대상 요소 의 직접 콘텐츠 인지 확인해야 합니다.

 Element에 포함된 텍스트(Text)로 객체를 찾아라!

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

 * 아래 DIV   p-1 class 중에 텍스트가 3인 것을 찾아라. 

<div class="" id="pagenation" style="white-space: nowrap; overflow-x: hidden; width: 231px;">
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">1</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">2</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative  style="width:33px;height:33px;">3</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">4</div>
<div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">5</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">6</div><div class="p-1 paging-item border rounded text-center d-inline-block position-relative" style="width:33px;height:33px;">7</div>
</div>


$(".p-1:contains('3')")

Node.js 웹서버로 만들기   http://localhost:3000

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/index.html';
    }
    if(request.url == '/favicon.ico'){
      //return response.writeHead(404);
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    console.log(__dirname + url);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

https://youtu.be/VGZTn1diz_I

opentutorials.org/course/3332/21032

소스 : github.com/web-n/web1_html_internet