JavaScript 無料ラボ
JavaScript の無料ラボで実践。インタラクティブな JavaScript プレイグラウンドで、JavaScript の構文、DOM 操作、イベント駆動型プログラミングをマスターするための実践的な演習を体験してください。
最初の JavaScript 実験
こんにちは、LabEx へようこそ!この最初の実験では、JavaScript の古典的な「Hello, World!」プログラムを学びます。
LabJavaScript
HTTP モジュールのアプリケーション
http モジュールは、Node.js の公式モジュールであり、Web サーバーを作成するためのもので、フロントエンド開発者がサーバーサイド開発を迅速に始めることができます。このモジュールを使ってアプリケーションを作成しましょう。
ChallengeJavaScript
LabEx キャンパスカード
このチャレンジでは、Jane が大学のキャンパスカード申請用のインターフェイスを作成するのを支援します。目的は、名前と学生番号のフィールドに対するフォームのバリデーションを実装し、提出されたフォームの内容をカードに正しく表示することです。このタスクを完了することで、フォーム入力が検証され、カードに正しい情報が表示されることを確認します。
ChallengeJavaScript
配列とオブジェクト
この実験では、テックスタートアップの Web 開発者としてのアレックスの旅を続けます。シーンは開発チームのワークスペースで展開され、アレックスは複数の財務記録を扱う機能を組み込むことで個人用の財務トラッカーを強化する任務を担っています。この重要な機能により、アレックスは JavaScript の配列とオブジェクトに深く突き込み、各財務記録を配列内のオブジェクトとして保存する必要があります。目標は、ユーザーの財務データを効率的に追跡するだけでなく整理する、動的でインタラクティブなアプリケーションを作成することです。この取り組みを通じて、アレックスはユーザーに自分たちの財務活動の明確な概要を提供し、それによりアプリケーションをより便利で魅力的なものにすることを目指しています。
LabJavaScript
基本的な JavaScript と DOM
この実験では、ダイナミックな個人財務トラッカーを作成する任務を負った新進のウェブ開発者である Alex の視点から、ウェブ開発の世界に足を踏み入れます。ユーザーが日々の支出と収入を入力し、追跡できる使いやすいアプリケーションを構築します。目標は明確で、直感的で魅力的なインターフェイスを開発し、ユーザーが何の手間もかけずに簡単に財務を管理できるようにすることです。このプロジェクトは、個人財務管理を簡素化するだけでなく、JavaScript と DOM 操作の基本概念をあなたに紹介することを目指しています。
LabJavaScript
データの保存と取得
この実験では、活況のあるテックスタートアップに勤める意欲的なウェブ開発者であるアレックスと一緒になります。彼は今、データの永続化の分野に挑戦しています。個人向けの財務トラッカーで財務記録を追跡し表示するメカニズムを成功裏に作成した後、次の課題は、これらの記録がブラウザセッション間で永続化されることを確認することです。目標は、ユーザーがアプリに戻って、以前に入力したすべてのデータがそのままあることを見つけることができるようにすることで、アプリの使いやすさとユーザー満足度を向上させることです。このタスクは、アレックスにウェブストレージの概念を紹介し、特に localStorage API を利用してアプリケーションの状態を保存および取得することを教えます。
LabJavaScript
個人向け収支追跡アプリケーションの強化
この実験では、アレックスの個人向けの収支追跡アプリケーションの開発が進み、高度なイベントハンドリング技術を使ってアプリケーションのインタラクティビティを向上させる段階に入ります。シーンは、テックスタートアップのブレインストーミングセッションで設定されており、アレックスは収支記録を並べ替えるためのドラッグアンドドロップ機能の追加を提案しています。この野心的な目標は、ユーザーに記録を整理する直感的な方法を提供し、個人向けの収支管理の流動的な性質を反映しています。これを達成するには、アレックスが高度な DOM イベントを探索し、視覚的に魅力的でユーザーフレンドリーな方法で要素を操作する必要があります。
LabJavaScript
集計の実装
この実験では、「FinTech Valley」の賑やかなスタートアップシーンを舞台に、急速に成長するテック企業の金融追跡システムを強化することが課題となっている若手ソフトウェアエンジニアのアレックスになりきります。同社の財務チームは、組織全体の財務状態を動的に把握する方法を求めています。あなたの目標は、既存のウェブベースの会計アプリケーションに、総収入、総費用、純残高を計算して表示する機能を実装し、リアルタイムでの財務洞察を提供することです。
LabJavaScript
JavaScript で API を呼び出す
この実験では、モダンな JavaScript を使用して Web API と対話する方法を学びます。`fetch` API を使用して GET および POST リクエストを行い、レスポンスを処理し、JSON データを解析し、HTML に表示し、エラー処理を実装し、動的な Web アプリケーションのために API キーでリクエストを認証します。
LabJavaScript
JavaScript 条件分岐文
この実験では、コードのフローを制御するための JavaScript の条件分岐文(if、else、else if を含む)の基本を学びます。
LabJavaScript
JavaScript の紹介と埋め込み
この実験では、JavaScript の基本を学びます。HTML ファイルに直接埋め込む方法や、外部 JavaScript ファイルをリンクする方法を学びます。
LabJavaScript
JavaScript ループ
この実験では、for、while、do-while ループを含む JavaScript ループの基本を学び、コードの流れを制御してアクションを繰り返します。
LabJavaScript
JavaScript の演算子と式
この実験では、算術演算、文字列連結、インクリメント演算子を含む、JavaScript の演算子と式の基本を学びます。
LabJavaScript
JavaScript 変数とデータ型
この実験では、`let` を使用して変数を宣言し、文字列、数値、ブール値などの基本的なデータ型を探求することで、JavaScript の基本を学びます。
LabJavaScript
JSON データの解析
この実験では、Python を使って JSON 設定ファイルを解析、変更、保存する方法を学びます。このスキルは、現代のアプリケーションで構造化データを管理するために不可欠です。
LabJavaScript