Nagasaka-Hiroki / js_prc1

jekyll上でJavaScriptの学習をする

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JavaScriptの学習

主な参考URL

わかりやすかったサイト

minimaの装飾について

minimaのCSS(クラス情報など)の内容。全部マークダウンで書くとjavascripが使えない?なのでhtmlで書きたい。その際にテーマのminimaを上手く適応したいときに参照する情報がほしいのでメモする。

下記のURLに詳細(ソース)がある。

上記に諸々書いている。(または一度ビルドしてクラスなどをみると楽かもしれない)

デフォルトのマークダウンレンダラーはKramdownらしい。

とりあえずめったにクラス名などは重複しないだろうから特に考えない。 自分でCSSを追加する場合はcustom-styles.scssを使うのがいいだろうか?

gihubのリポジトリを読んでいると、おそらく_sass/minimaのディレクトリを作成、_sass/minima/custom-styles.scssのファイルを作成してそこに上書きしていくのがいい感じ?
minimaのデフォルト値を変えるには、_sass/minima/custom-variables.scssを作成し値をオーバーライドすることができるそう。
→上手く行かなかった。とりあえずcssは学習の主眼ではないので一度無視する。

Github Actionについて

GitHubフリーではGithub Actionの時間が1月あたりで決まっている。むやみに使わない。

ドラッグアンドドロップの練習

サイトを参考にリストをドラッグアンドドロップで操作してみる。
→1つ目のリンクは上手く動かなかった。なぜ?

onmousedownに関して

  • querySelectorAll
  • イベントハンドラについて

ややこしいのはイベントハンドラは、ハンドラ名とプロパティ名があること。すこしややこしいが、プロパティ名は基本的に"on"+ハンドラ名(今の所自分が知る限り)なのでそう思っておく。

  • からのリストの追加 <li style="height: 0em;border:0; list-style-type:none;">&nbsp;</li>
    これを入れるだけでかなり動きが変わった。html側で動作が改善されるいい例だと思った。 しかし、以前入れ替わりの挙動が変。リストとリストのあいだの距離が原因か?
    リストの間隔の調整は以下。
  • 要素の右寄せ
  • ondragstartに関して
  • dataTransfer
  • draggableプロパティ なくても動作する。しかしあったほうが動作が安定する。

  • ondragover ondragoverイベントのpreventDefaultをなくすとドロップイベントが動かなくなった。

    1. ondragover以降のスクリプトについて 何故か<script>タグでソースが指定できなくなった。なぜ?
      直接打ち込むと動いた。

見え方をデータに変換する

About

jekyll上でJavaScriptの学習をする


Languages

Language:HTML 48.2%Language:JavaScript 44.5%Language:Ruby 7.3%