diadia

興味があることをやってみる。自分のメモを残しておきます。

Javascript

djangoのcontextをjavascriptに渡す際に困る場合がある件

大した内容ではないので問題点と対処法を軽く書く。 djangoのcontextに格納したデータをjavascriptにわたす方法 最初にviewにてデータをcontextに格納する テンプレートにてjavascriptを走らせ、contextのデータを受け取る def example(self, request, *args…

leafletを使って以下が表示される。"This content should also be served over HTTPS."

問題は何なのか leafletを使っていて以下の内容がconsoleに表示される事になった。 Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS. これは何を示しているかと</url></url>…

Djangoのformをより良く見せるために(改訂版)

Djangoにおいてformウィジェットの理解を深めない限り、forms.ModelFormやforms.Formの利用したとて、フォームを使った画面が残念な結果になってしまう。 見た目の良いフォーム画面を作るには htmlファイルを自ら作成して好みのformを作成する ModelFormやFo…

vue.jsのメモ その2

データバインディングとは データと描画を同期する仕組み データバインディングの種類 双方向バインディング (TwoWay) 単方向バインディング(OneWay) ワンタイムバインディング(OneTime) テキストのバインディング テキストのバインディングの場合には{{}}…

言語横断整理 python, kotlin, javascript

配列、リスト オブジェクトの生成 pythonにはListがある。 foods = ["りんご", "ぶどう", "すいか", "なし"] foods = list("りんご", "ぶどう", "すいか", "なし") kotlinにはList, Array, ArrayListがある。 var foods:List<String> = listOf("りんご", "ぶどう", "</string>…

Vue.jsの最初のメモ

内容 ドキュメント 基本的な使い方 vueの内容の書き方 1.ドキュメント https://jp.vuejs.org/ 2.基本的な使い方 HTMLとjavasciptのパートがあり、それを書けばvue.jsを書いたことになると現状認識している。 HTMLで書くこと https://jsfiddle.net/5grs0976/1…

django leaflet の使い方メモ

django leafletはブラウザ上でgeo系のデータをマップに描画するものである。 特徴はjavascriptを一切書かずにOSMをブラウザ上に表示したり、geoデータをマッピングすることができる。 スマホ等にアプリを通じて描画する方法はGoogle Maps Platformを使って実…

配列

ベース記事 Javascriptメモ 種類 配列 連想配列 疑問点 配列って何か?連想配列って何?なんのためにある概念?それができると何ができるようになるの? それができると何ができるようになるの? 配列と連想配列を使うと、複数のデータ集合を扱うことができ…

addEventListenerの使い方

関連記事イベントとイベントハンドラの設定 addEventListenerの使い方意義としてはonclick等は一つのイベントに一つのイベントハンドラしか設置できない。一つのイベントに複数のイベントハンドラを設置するときにに役に立つ。サンプル使用例 <html lang="utf-8"> <head> <meta charset="utf-8"> <title>ボタンクリ</title></meta></head></html>…

loadについて

ほか関連記事DOM操作について イベントとイベントハンドラ 本題loadはイベントの一つ。関連付けられた要素を読み終わったときに発生するイベント。 loadの有用性DOM操作をすると実行タイミングがずれることでエラーになることがある。この解消に2つの方法が…

イベントとイベントハンドラの設定

ベース記事Javascriptメモ loadについて イベントとイベントハンドラの設定方法の種類2種類ある。 開始タグ内に両者を設置する方法 スクリプト内に両者を設置する方法(プロパティとして扱う) 1.開始タグ内に両者を設置する方法 <html lang="utf-8"> <head> <meta charset="utf-8"> <title>イベントとイベントハ</title></meta></head></html>…

ユーザの入力値をブラウザ表示する[DOM操作]

ベース記事Javascriptメモ DOM操作について ユーザの入力値をブラウザ表示する[DOM操作] <html lang="utf-8"> <head> <meta charset="utf-8"> <title>フォーム内容をリストに反映</title> </head> <body> <label for="lists">リスト</label><br> <ul id="lists"> <li>リストがここに追加される</li> </ul> <input id="content" type="text" > </body></html>

Nodeを置換する

ベース記事Javascriptメモ DOM操作について Nodeを置換する方法replaceChild()を使うと置換することができる。 大まかに言えばappendChild()を使ってノードを追加する方法とほぼ同じ。 違うところは、replaceChild()をの引数は2つあり、newNode, oldNodeの…

ノードを追加する

ベース記事DOM操作について Javascriptメモ ノードを追加するやり方やりたいイメージ:例えばカラの <ul></ul>があるとする。ここにリストタグを追加するということをやりたい。リストタグはエレメントというノードの一つである。 だからノードを操作するコードが分か…

tagをキーに要素を取得する

ベースJavascriptメモ DOM操作について 基本的な使い方idをキーにする場合にはgetElementById()を使っていたけど、tagをキーにする場合は少し違う。ただほぼ同じ。getElementsByTagNameを使う。elementsでsが必要なこと、Nameを加えることに注意して記述した…

DOM操作について

idをキーに要素を取得する tagをキーに要素を取得する ノードを追加する Nodeを置換する loadについて サンプル:ユーザの入力値をブラウザ表示する

idをキーに要素を取得する

ベース記事DOM操作について Javascriptメモ 本題 例文 <p id="test">この要素を取得したい</p> <input type="button" onclick="print();"> <script> function print(){ var ele = document.getElementById("test"); console.log(ele); console.log(ele.innerText); } </script> まず最初にonclickってのがあるけど、これはhtmlのものなの…

セミコロンについて

ベース記事Javascriptメモ 一体どんなときに必要なのか?javascriptを勉強していると;を文末に書くことが度々ある。 これは必ず文末で必要となるわけでもないらしい。 頭がごちゃごちゃするルール(仮説)原則として文の終わりにセミコロンを付す。 例外は制…

条件分岐

ベース記事Javascriptメモ 種類 if/else if/else switch if/else if/else構文 if(条件式){ 条件式がTrueのときの処理 }else if(条件式){ 条件式がTrueのときの処理 }else{ 上記に当てはまらないのときの処理 }if文のみの場合、while文に似ている気がする。条…

繰り返し処理

種類 for文 while文 do while文 for文構文 for (初期化文; ループ継続条件; 増減式){ 繰り返し実行したい処理 }増減式には;を必要としない。書いたらunexpected token ; のエラーが出てしまうので注意。例変数iの値を1から3まで出力するプログラム for (var …

Javascriptメモ

参考url : https://developer.mozilla.org/ja/docs/Web/JavaScript関連記事 繰り返し処理 条件分岐 配列 DOM操作について イベントとイベントハンドラの設定 セミコロンについて toLocalStringメソッド 基本的な使い方使い方はhtml上に直接javascriptを書く…