Web篇_04 JavaScript两小时速成笔记

JavaScript

      • 学习环境准备
      • Js脚本引入方式
      • js测试
      • 变量var、let、const
      • 数据类型
      • Array 数组
      • Object 对象
      • JSON
      • 循环
      • 数组的遍历
      • 条件
      • 函数function
      • 面向对象
      • DOM
      • 综合案例


JavaScript,本篇文章简称js。来自YouTobe上最热门的Javascript速成教程,硬性要求你有html和css的基础!十分推荐有其他编程语言基础的人阅读!(本人有Java、C++、Python的基础,轻松起飞,完了直接学Vue无压力,照着代码敲到底,你也可以的)

学习环境准备

工具和插件
我使用的工具是vscode,需要你建立好文件夹,像我这样的,里面有准备好的案例文件:
Web篇_04 JavaScript两小时速成笔记_第1张图片
还需要你按照一个插件 Live Server
Web篇_04 JavaScript两小时速成笔记_第2张图片
按照好后可以在html源代码页面右键,打开测试一下。
Web篇_04 JavaScript两小时速成笔记_第3张图片
代码保存,浏览器页面也会随着更新:(代码我放在下面)
Web篇_04 JavaScript两小时速成笔记_第4张图片
代码案例
index.html代码:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS For Beginnerstitle>
    <link rel="stylesheet" href="style.css">
  head>
  <body>
    <header>
      <h1>JS For Beginnersh1>
    header>

    <section class="container">
      <form id="my-form">
        <h1>Add Userh1>
        <div class="msg">div>
        <div>
          <label for="name">Name:label>
          <input type="text" id="name">
        div>
        <div>
          <label for="email">Email:label>
          <input type="text" id="email">
        div>
        <input class="btn" type="submit" value="Submit">
      form>

      <ul id="users">ul>

      
    section>
    
    <script src="main.js">script>
  body>
html>

style.css代码:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
  }
  
  ul {
    list-style: none;
  }
  
  ul li {
    padding: 5px;
    background: #f4f4f4;
    margin: 5px 0;
  }
  
  header {
    background: #f4f4f4;
    padding: 1rem;
    text-align: center;
  }
  
  .container {
    margin: auto;
    width: 500px;
    overflow: auto;
    padding: 3rem 2rem;
  }
  
  #my-form {
    padding: 2rem;
    background: #f4f4f4;
  }
  
  #my-form label {
    display: block;
  }
  
  #my-form input[type='text'] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  
  .btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 0;
    background: #333;
    color: #fff;
    border-radius: 5px;
    margin: 5px 0;
  }
  
  .btn:hover {
    background: #444;
  }
  
  .bg-dark {
    background: #333;
    color: #fff;
  }
  
  .error {
    background: orangered;
    color: #fff;
    padding: 5px;
    margin: 5px;
  }

main.js准备用来练习的,并没有写代码。

Js脚本引入方式

首先介绍 js的两种引入方式

  1. 内置

你可能感兴趣的:(#,Java,Web篇,javascript,html,css,前端)