[B! class][JavaScript] mytechnoteのブックマーク

mytechnote id:mytechnote

classとJavaScriptに関するmytechnoteのブックマーク (16)

Public and private class fields | Web | Google Developers
Show navigation Several proposals expand the existing JavaScript class syntax with new functionality. This article explains the new public class fields syntax in V8 v7.2 and Chrome 72, as well as the upcoming private class fields syntax. Here’s a code example that creates an instance of a class named IncreasingCounter: const counter = new IncreasingCounter(); counter.value; // logs 'Getting the cu
mytechnote 2018/12/17
class

console

web

javascript

article

ECMAScript

v8
リンク
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。画像はビューポート内にある時、およびスクロールが停止した時にロード。ロード前の状態は、CSSで簡単にス
mytechnote 2018/10/22
js

ライブラリ

画像

class

javascript

lazyload

あとで読む

web
リンク
You learned the basics of React, now what?
I have been learning React for past few months, working on the frontend of our new AWS Lambda monitoring tool, Thundra. I’ve encountered some concepts of React which I believe will take you a step forward in mastering React. 1. Error BoundariesError boundaries are React components that catch JavaScript errors anywhere in their child component tree. You can log these errors or display an error mess
mytechnote 2018/01/04
asynchronous

class

JavaScript

react
リンク
https://chmln.github.io/flatpickr/
mytechnote 2016/12/13
datepicker
リンク
React.js cheatsheet
React is a JavaScript library for building user interfaces. This guide targets React v15 to v16. Components Components import React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component { render () { return <div className='message-box'> Hello {this.props.name} </div> } } const el = document.body ReactDOM.render(<Hello name='John' />, el) Use the React.js jsfiddle to sta
mytechnote 2016/01/21
data

cheatsheet

React

javascript

reactjs

react.js

チートシート

class

prop
リンク
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。実際に操作しているところです。実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
mytechnote 2015/10/21
class

javascript

スケジュール

javascript ガントチャート

Saved For Later

ライブラリ

title
リンク
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
mytechnote 2015/09/10
data

content

class

*WEB知識

javascript

web制作

レスポンシブ
リンク
React/dekuコンポーネントとthisのパターン
componentWillMount() { store.on("change", this.onChange.bind(this)); } componentWillUnmount() { store.off("change", this.onChange.bind(this)); } だとイベントが解除できないという問題が起こります。そのため、事前にbind済みのハンドラを持っておく必要が出てきたりします。サンプルこの記事では上記のような、ボタンでカウントアップするだけのものを React - thisを普通にbindする手法 React - azu/idempotent-bindを使ってbindする手法 deku を使って書くの3つ書いてみます。ソースコードはこちら azu/component-event-binding React - thisを普通にbindする手法こ
mytechnote 2015/06/05
()

electron

class

React

ES6

JavaScript

count

flux

event
リンク
JSで切り替えたページにBackで戻れるようにする - Qiita
ページを読み込み直さずにJavaScriptでタブ切り替えやページャーで表示を変えた場合、そこからリンクをクリック等で別のページに遷移した後にブラウザのBackやhistory.backで戻って来ると、初期表示のページになってしまいます。そこで、HTML5で導入されたhistory.replaceState()を使って現在の履歴を表示状態を含むものに書き換えて、Backで遷移直前の表示状態に戻れるようにします。以下、jquery.pajinateを使ったページングがあるページを例に挙げます。 <div id="link-list"> <ul class="content"> <li><a href="path/detail/page1.html">リンク1</a></li> <li><a href="path/detail/page2.html">リンク2</a></li> ・・・ <
mytechnote 2015/04/28
()

class

javascript

Web制作

HTML

あとで読む

function

content

jQuery
リンク
lory
Touch enabled minimalistic slider written in vanilla JavaScript Hardware accelerated transitions Usa ble as a jQuery plugin Options for custom easing effects infinite looping ~ carousel No compromises for fallbacks Written in ecmascript 6 Using webpack, babel & eslint for development Download Here or via cdn from cdnjs Prerequisited Html structure Class names can be changed through options <div cla
mytechnote 2015/04/09
class

JavaScript

library

UI

あとで読む
リンク
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
mytechnote 2015/02/26
animation

class

js

ライブラリ

css

javascript

svg

library

アニメーション
リンク
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
mytechnote 2015/02/02
function

cookpad

admin

*javascript

class

javascript

あとで読む

ES6

ecmascript
リンク
jQueryでaリンクにイベントを設定するモダンな書き方を教えてくださいリンクにクリックイベントを設定するとき最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてくださいリンクにクリックイベントを設定するとき最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
mytechnote 2014/10/28
function

javascript

class

event

jquery

TIPS

web制作

資料
リンク
Promises in Swift - Rob - Medium
IntroductionIn this post, we’ll explore building a proof-of concept implementation of Futures and Promises. One of my favorite features of the Swift language is that functions are first-class citizens. Swift’s support for returning functions from functions, accepting functions as function parameters, and Swift’s support for closures let us do some neat things, one of which is building support for
mytechnote 2014/07/13
library

it

language

introduction

class

concept

javascript

ios

Promises

swift
リンク
JavaScript OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。ちなみに、以下のすべての例はこのクラスを定義しています。ちなみに、僕は一番下の書き方ですね。皆さんはどのようにプログラミングしていますか？プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function It em(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function It em(price) { this.price = price; this.showPrice = function() { aler
mytechnote 2010/12/05
javascript

oop

class

amachan
リンク
継承とプロトタイプチェーン - JavaScript | MDN
JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf() 関数でアクセスすることができます。これは、標準
mytechnote 2010/12/05
java

javascript

class

object
リンク
1