猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

HTML

【練習】HTMLで簡単なHPを作ってみる

さあ、ドラマが終わり、 ドラマが始まる季節になりました。 今回は、書き方を忘れないように、 簡単なHPを作るためのHTMLに触れ戻りたいと思います! HPの内容は、「平成最後の秋ドラマ」! 考えてみたら平成最後の秋なんですとっ。おやおや。 気になるドラ…

for文であそんでみた for-ofをもう少し掘り下げる

先日、カレーをネタにしてfor-of文を作ってみた。for-of文は配列のオブジェクトを扱っているから、 key valueとかないんですね。 ちょっと面白そうだな(どんな挙動をするのか知りたかった)と思ったので、以下のようなことをやってみました! カレーのプロ…

for文であそんでみた for-inをもう少し掘り下げる

先日の記事でfor-in文を扱いました。 その時は何も考えずにセリフ出しちゃいましたけど、 よく考えたら、 あれっていわゆるkey : valueですよね⁇ ちょっと書き換えてしまったけど、 も一度プログラムをおさらい。 key : valueを確認する画像。 おそらくこう…

for文であそんでみた for-in, for-ofをよく考える

for-in と for-of 。。。。その違いは何なのか。言葉では前回、配列とオブジェクトの違いって言ったけど、 動いてるかんじでは、同じように思えた。 自分で書いたソースコードをよく見直してみた。 よく見るとココが違った。 for-in ※黄色い丸のところ for-o…

for文であそんでみた for-of

for-in と for-of …なにがちがうんだろう。このfor-ofを扱う時点でこう思った。 調べてみました。 簡単にいうと、 for-in は、オブジェクトから中身を取り出す。 for-of は、配列から中身を取り出す。 というような感じだと認識しております。 今回はカレー…

for文であそんでみた for-in

今回のネタは『おっさんずラブ』!テレビ朝日で今年の春ドラマとして放送していました。 けっこう満足度高めなドラマです♪私も、とっっても大好きなドラマです!おっさんずラブは笑いあり、感動ありに包まれています。 このドラマで田中圭ファンが急増したこ…

for文であそんでみた break/continue

breakで処理を途中で止めてみる <html> <head> <meta charset="UTF-8"> <title>breakを使ってみる</title> </head> <body> <script> // 1~10まで処理を繰り返す for (var a = 1; a <= 10; a++) { // 変数aが5になったら // または、5回目の処理のときに、止める if (a == 5) break; // コンソールに結果出しまーす。 console.log(a)</script></body></html>…

for文であそんでみた ++変数

ありがとう運動 <html> <head> <meta charset="utf-8"> <title>ありがとう運動</title> </head> <body> <script> for (var thank = 1; thank <= 10; ++thank) { console.log(thank + "回目のありがとう"); } </script> </body> </html> 学生の時に、「ありがとう運動」っていうのを勝手に一人でやってました(笑) 部活の仲間とか、友達との間でだけですけどw…

(おそらく)最も基本的なfor文 PHP/JS

基本的なfor文 PHP 0~9までの数を表示するプログラム。 PHPバージョン 」は書かなくても動くのね。 上のプログラムの実行結果はこちら。 なにも改行も入れていないので、横一列に表示されています。 ちなみに、 $a++ でも ++$a でも どちらでも結果は同じ…

血液型組み合わせ表 2

第一回目、血液型組み合わせ表 1 anchoco-program.hatenablog.jpにて挑戦してみたその続き… すこしですが、進歩がみられました…!!こんな感じでなりまして、どうにか縦表示っぽいのを表示させることに成功(?)しました!笑黄色い部分が縦表示のイメージで…

チェッカー柄の行方

今日も前回 anchoco-program.hatenablog.jp に引き続き、チェッカー柄プログラムに自力でがんばってみたけど、 無理です。。。笑 もうお手上げだ!と思ってGoogle先生に聞いたけど、 ノーヒット(笑)こんなおかしなプログラムを作る人がいないのか、 そもそも…

二重ループにも種類がある

先日の記事で、九九の表をJavaScriptで書きました。 for文にも種類があって、 というか、 「二重ループ」に種類があるといったほうが正しいかも。 for文で作るか、while文で作るか。 そのちがいは、処理の回数が決まってるか否か。 for文は、処理の回数が決…

二次元配列であいうえお

参考書の二次元配列の書き方見てたら、「お、あいうえおの表作れるかも…!」と思ってしまったので、書いてみるとりあえず、いいなと思ったものはどんどん試す(笑)こないだは九九の表だったからな~ で、あいうえおの表を書いてみると、できました!じゃん…

血液型組み合わせ表 2

前回までは・・・ こんな感じで終わってました。これでは組み合わせになっていないので、今回はすこし進化させます。 本来であれば、色はわかりやすくするためのものなのであまり関係ないが、緑のA、B、AB、Oが今の位置で、 白いA、B、AB、Oが縦になっていて…

HTML5の比較的新しい機能(要素)

はじめにひと言・・・ まだまだ勉強中の身ですので、 「比較的新しい」とは言っても、もう古いかもしれません(笑) そのうちの2つ、aside要素とarticle要素についてメモしてみます。aside要素というのは、補足的説明、サイドバーなどに用いる要素。 article…

血液型組み合わせ表 1

for~ for~♪二重ループで「血液型表」を作ってみるの巻き~! 最初の「ふぉーふぉー」とか意味わかんないだけど、 二重ループで何が作れるかな~って考えてたら ぱっと、血液型の組み合わせが頭に思い浮かんだのよ。 勉強って黒板に書いてある文字を写してそ…

JSで時間割表を作ってみる

あまり融通が利かない時間割表だけど、 っていうのはつまり、ベタ書きってことです。笑ベタ書きで時間割を書いてみた。ベタ書きの意味があとでソースコードを見たらわかります。こんなのありそうだよね。 今まで過ごした学生生活で、こんな時間割ぜったいあ…

JavaScript for文で掛け算九九の表を作ってみる

繰り返しの処理、for文をもう一つ。 二重ループを作成してみようの回。二重ループとは文字の通り、for文の中にまたfor文があること。イメージを描いてみた。イメージはこんな感じ。この入れ子のような状態を「ネスト」と言ったりする。 ネストっていうとカッ…

JavaScriptのbreak文の使い方

(いきなり余談: ずぅーーーーーーっと狙っていたけどずぅーーーーーーっと無かったローソンの鶏むねの梅大葉巻きが昨日立ち寄ったローソンで発見!迷わず買って食べたけどまあまあのおいしさ!笑 でか焼鳥っていうからも少し大きなのを想像していたけど、…

JavaScriptでfor文を書いてみた

JavaScriptのfor文のテンプレはこう。 <script> for (変数の初期値; 条件式; 増減) { ループ内の処理; } </script> この紫色の文字のところを、好きなように変えればよい。 そもそもfor文とは?PHPでもその他でもそうみたいだけど、 繰り返し(ループ)の処理をするプログラム…

よくわからん!innerHTML、textContent と innerText

タイトル通り、innerHTML、textContent、innerTextのちがいがよくわからなかったので、Google先生から色々調べてみた。なんでこんなに似たようなのがあるんだ~~しかも調べてみたらこのブラウザでは使えないとか制限とかあるみたいで… わからんなので、自分…

組み込み関数と自作関数

秋かな、と思ったらまた夏でっせ。正直、急に夏がいなくなって寂しかったから、 また帰ってきてちょっと嬉しく思う自分がいる。笑それにしても、もわっとして暑い! でも快晴だったから、海側見るとほんときれいだった☀ こころが洗われるようだよ~°˖✧◝(⁰▿⁰)…

DOMってナニ?

こんばんは~。「DOMってナニ?」って書いたけど、 素直に、直感でなんか「DMM」が出てきた(笑)さて(無視)、DOMというのがよくわからなかったのでいろいろ調べてみた。読み方は「ドム」らしい。そんでDOMというのは、 ・JavaScriptとHTMLとをつなぐ 連携し…

参加型のプログラム

今回は、ブラウザの閲覧者が参加できるようなプログラムを書いていく。参加型とは?簡単にいうと、入力欄があって、そこに入力してもらうという作業。 これを私は勝手に「参加型」と呼んでいる(笑)先日の、ボタンで画像を切り替えるの回は、参加型といえば参…

カウントボタンを作ってみる

昨日、書き忘れてしまったけれど、HTMLの次はなんだ?ということで、今はJavaScriptを勉強しております。前にちらっと触ったことがあったんだけれど、 その時はまだ理解が深くなかったかな。 APIキーとか埋め込んだ覚えがある。だからきちんとやるのははじめ…

ファーストJavaScript

いきなりですが、何のお会計金額でしょう。 <html> <head> <meta charset="UTF-8"> <title>First JS</title> </head> <body> <script> var shortCake = 320 * 6; var chocolateCake = 360 * 5; var price = (shortCake + chocolateCake) * 1.08; alert("お会計は、" + price + "です。"); </script> <noscript>Javascriptを有効にしてください</noscript></body></html>

よく使われる用語たち

あらためて(遅ればせながら)、用語について記述。 【HTML】 Hyper Text Markup Languageの略。 Markupとは、タグで各々の情報に意味を持たせること。 文書に意味を与える → コンピュータに理解させる ホームページを書くときに使用する言語。 (言語ってイ…

tableタグであそんでみる

昨日、tableタグを使った時の表枠は二本線(ボーダー)での表記だった。 今回は、その表枠の表示を変えてみる。 その一、 ドットにしてみる。 枠線をドットにするCSSの書き方 table, td, th { border: 2px dotted silver; } -->色指定の直前に、dottedを…

tableタグを使ってKing&Princeを簡単表記してみる

先日ちらっとKing&Princeに触れたのと、 メンバー6人、表にするにはちょうどいいと思ったので、書いてみた。さっそく完成形のコードをみてみよう。 <html> <head> <meta charset="UTF-8"> <title>King&Prince メンバーカラー</title> <style type="text/css"> table, td, th { border: 2px solid silver; } td, th { padding: 4px; } </meta></head></html>

ホームページに画像を貼り付けてみる

ホームページに画像を表示してみよ~✊ ということで、表示画像にプロフィール写真のにゃんこを採用。 この子には名前があって(勝手に命名しました笑)、 「しょうぐんくん」と言います。(笑) とても可愛くて、お腹なでられるのが大好きな野良ちゃん。こんな…