Javascript 要素をドラッグで移動

td要素の中にあるdiv要素をドラッグで別のtd要素の中に移動。div要素にはinputタグでデータを持たせクリック時に取得。

 

Javascript DOM関連 メモ

・DOM、Node、Element

DOMは基本的なインターフェースの提供とツリー構造を作っている。

DOMを構成する単位がNodeで、Nodeは文字列やコメントなども含まれる。Nodeの中でタグの部分がElementと呼ばれる。

Elementは、階層でElement、HTMLElement、HTML*Element
のように継承しそれぞれインターフェースを持っている。

・型の調べ方

・タグ、要素

要素=<開始タグ 属性>内容<終了タグ>

・要素取得

HTML*Element = document.getElementById(id)
idで要素を取得

HTMLCollection = document.getElementsByTagName(name)
タグ名で要素を取得

HTMLCollection = document.getElementsByClassName(name)
classで要素を取得

NodeList = document.getElementsByName(name)
name属性で要素を取得

HTML*Element = document.querySelector(selectors)
CSSセレクターで要素(最初の1つ)を取得

NodeList = document.querySelectorAll(selectors)
CSSセレクターで要素(複数)を取得

・NodeListとHTMLCollection

NodeList: 取得後更新しない。
HTMLCollection: 取得後更新する。

for … of で回す

・要素取得(親子関係)

HTML*Element = el.parentNode
親要素

HTML*Element = el.firstElementChild
最初の子要素

HTML*Element = el.lastElementChild
最後の子要素

HTMLCollection = el.children
子要素リスト

HTML*Element = el.previousElementSibling
1つ前の要素

HTML*Element = el.nextElementSibling
1つ後の要素

・要素操作

HTML*Element = document.createElement(タグ)
指定タグで要素を作成

parentNode.insertBefore(newNode, referenceNode)
referenceNodeの前にnewNodeを追加

parentNode.appendChild(newNode)
最後にnewNodeを追加

parentNode.removeChild(childNode)
childNodeを削除

・内容操作

string = el.innerHTML
タグが解析される。

string = el.textContent / el.innerText
タグが解析されない。取得するとタグはなくなり、設定するとタグは文字列になる。

textContentと、innerTextの違い。
textContentは改行コードなどは維持され、innerText変換されるなどいくつかある。

・属性操作

string = el.getAttribute(name)
属性を取得

el.setAttribute(name, value)
属性を設定

el.removeAttribute(name)
属性を削除

bool = el.hasAttribute(name)
属性を持っているかどうか

・classList

string = el.className
classの確認

el.classList.add(name)
classの追加

el.classList.remove(name)
classの削除

el.classList.toggle(name)
classのOn/Off

bool = el.classList.contains(name)
class有無

TypeScript 初期設定

・node.jsをインストール

以下、Visual Studio Codeのターミナルで実行。

・インストール
npm install -g typescript

・利用方法

<script src=”script.js”></script>
のように指定し、
script.ts
という名前でファイルを作成し
tsc script.ts
とトランスパイルする。

・ウォッチ

監視したいフォルダに移動し、
tsc –init
を実行する。

tsconfig.json
が作成されたら、
Ctrl + Shift + B
でウォッチを指定する。

・フォーマット

Alt + Shift + F

Javascript/C# 手作りカレンダー

一般的にカレンダーを自作する必要性はないと思うけど、作る必要がでてきたのでとりあえずメモ。

C#(DataGridView)版

 

golang+MongoDB+Vue.js 色々

サーバーをgolang+MongoDBでフロントをVue.js
基本的な処理を色々メモ。

 

Javascript 電卓練習








Vue.js 入門

jsというとフレームワークが色々あるので、今回はVue.jsを少しさわってみた。

適当に色々書いてみたもの。

json展開、axiosでpost

フロント開発環境色々

HTML/CSS/JSなどフロントは数年前にちょっと勉強しただけでだいぶ忘れてしまったので復習をする。
まずは環境構築から。

エディタ

使うエディタはVSCodeとした。補完が効くので助かる。
Vim拡張機能を入れてしばらく使ったがやめた。そのままでも不便がないぐらいのショーットカットがあるので、設定は少しだけ。

VSCode設定

ショートカット追加
{“key”: “ctrl+i”,”command”: “editor.action.jumpToBracket”}

ユーザー設定
minimapは1.10から

VSCodeショートカット

Ctrl + Shift + L
選択中の箇所を同時編集(マルチカーソル)

Ctrl + i
対応括弧に移動。

Ctrl + /
コメントトグル

Ctrl + P
ファイル検索して開く

Alt + Up/Down
行を上下移動

Alt + Shift + Up/Down
行を上下コピー

Alt + Shift + ドラッグ
矩形選択

Alt + クリック
マルチカーソル

Ctrl + Shift + k
行の削除

Ctrl + Shift + \
対応する括弧

Ctrl + ]
行にインデントを追加

Ctrl + [
行のインデントを削除

sass(scss)

$で変数。#{}で変数展開。変数には型もある。

組み込みの関数もあり、自作もできる。
@function name($arg) {
@return returnValue
}

ループ処理
@for $i from 0 to 10 {
}

条件分岐
@if $arg == 0 {
}

などなど便利な機能がある。以下適当に記述してみたもの。

VSCodeタスクでsass(scss)コンパイル

Rubyは入っているので、
gem install sass
とする。

バージョン確認。
sass -v

タスク作成は、
Ctrl + Shift + P

でパレットを開き、
Configure Task Runner
と入力し、othersを選ぶ。

そうすると、task.jsonができるので、
“version”: “0.1.0”,
“command”: “sass”,
“isShellCommand”: true,
“args”: [“test.scss”,”test.css”],
“showOutput”: “always”
のように記述する。

タスクランナーの実行は、
Ctrl + Shift + B
と入力する。

tasks.jsonはプロジェクトフォルダの中にある.vscodeの中にできる。
プロジェクトとは、サイドバーで開いているフォルダのこと。

タスクランナーで複数コマンドを渡したい場合

上記はscssコマンドだけだが、他にも色々したい場合。
ここではpowershell。(UTF-8で日本語入ると動かないので注意)

自動でサーバーに転送したい、chromeで開きたい等。
https://github.com/PowerShell/Win32-OpenSSH/releases
からWin版のSSHを落とし、フォルダの中から
ssh.exe, scp.exe
をコピーしておく。
鍵ファイルもコピーして、ps1と同じ場所に置く。

以下のようにすると、sassをコンパイルして、htmlとともにサーバーに転送し、そのURLを開く。
(Chromeのタブは増えてしまうが)

c.ps1

tasks.json

Emmet

VSCodeだと標準で入っている。
Tabキーで展開できる。

マークダウン

マークダウンを使う場合、
Ctrl+Shift+V
でプレビューできる。

Debugger for Chorme

拡張機能でChromeと検索すると出て来るのでインスト。
サイトバーのデバッグを開き、再生すると、launch.jsonができるので接続設定を記述する。

PHP Javascript 工程管理

以前作っていた工程管理。お蔵入り版。

PHP Javascript 在庫管理

以前作っていた在庫管理。お蔵入り版。
1つのファイルにHTML,CSS,JS,PHPを全て書き込んでいた。