自学——一个月入门前端⑥

最新推荐文章于 2024-05-30 15:07:12 发布

sher_chang

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量67

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sher_chang/article/details/132820071

版权

今天主要来入门基本的JavaScript并且学习他和其他语言不同的地方。包括点击之后出现的不同之处，输入输出，实现一些例子。

什么是JavaScipt

是一种脚本编程语言，实现复杂的功能。是标准的web技术中的第三层。

引入方式

使用script标签，或者src导入已有的js文件。

使用import关键词

function print() {
    console.log("hello" + name);
}
export {
	name,
}

将name 暴露出去。就可以在另外一个地方引用这个变量。

<script>
	import {name } from "index.js";
    console.log(name);
    print();
</script>

对script进行type区分，可以区分不同的作用域，可能会出现同一个名字的变量出现冲突。

html css js关系

css改变css。js调整css和html。

变量类型

js中有五种变量类型：number,string,boolean,object,undefined

number区别在于有整数也有浮点数。

string 在js中只能去读不能修改。如果想要修改那么需要新建一个变量let s3 = s1.substr(0,1) + ‘x’ + s1.substr(2);

boolean

object：对象类似于cpp中的地址和指针。既可以用引号括起来，同时也可以不加。

let d = {
	name: 'x';
    age: 21;
}
调用可以使用
d[name] d['name'] d.name
习惯上可以不加。
d['school'] =  "xxx";
也可以加入进来。

console.log(typedef d,typedef null) ;

let t = undefined;

console.log(typedef t) ;

undefined:初始的原始值。

判断相等

=== 是判断类型和数值，

==是判断数值，自动转化成同一个类型。

事件

事件监听器和事件处理器。

处理点击事件

改变颜色

const btn = document.querySelector("button");

function random(number) {
    return Math.floor(Math.random() * (number + 1)) ;
}

btn.addEventListener("click", () => {
	const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)}`; d
    document.body.style.backgroundColor = rndCol;
});

第一行代码选中这个button，第二行定义一个随机函数，随机返回一个random的值。

addeventlistener，来监听这个click的事件，然后设置backgroundcolor的颜色。

继续尝试使用别的触发条件来产生效果。

      btn.addEventListener('mouseover', () => {
        const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
        document.body.style.backgroundColor = rndCol;
      })
      btn.addEventListener('mouseout', () =>  {
        const originCol = `rgb(255,255,255)`;
        document.body.style.backgroundColor = originCol;
      })

做出如下的修改，就可以实现一个悬浮在按钮上和离开按钮实现不同的效果。

同时也可以在同一个事件上添加多个监听器。也就是触发这个事件之后，可以进行多个函数调用。

不要使用旧的内联事件调用处理器，也就是在html中调用js中的函数，例如οnclick=“changefunc" 不符合当前的规范。

暂时的深度先到这里。

使用变量的值

如果需要进行对数值的print，那么需要的是把这个数使用${name}来进行。

保留几位小数：

let x = 1.2232343;
let y = x.toFixed(4);
Math.ceil(x) // 上取整
Math.floor(x) // 下取整

取值，

let [a,b,c] = input.value.split(’ ') ;

a = parseInt(a) , b = parseInt(b); // parseInt默认的是下取整。

输出&输入

let output = document.querySelector();

output.innerHTML = s;

let input = document.querySelector(“.input”);

let x = parseInt(input.value);

.map

map()方法，来创建一个新的数组，这个新的数组可以由每个元素都调用一次提供的函数后的返回值组成。

const a1 = [1,2,3,4];

const map1 = a1.map((x) => x * 2);

console.log(map1);

通过map来获取buf中的值并且取出来。

buf.split('\n').forEach(function(line)) {
	let tokens = line.split(' ').map(function(x) {return parseInt(x);})
	                       
}

JavaScript第一步

第一个例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font-family: "helvetica neue", helvetica, sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center;
        border: 2px solid rgb(0 0 200 / 0.6);
        background: rgb(0 0 200 / 0.6);
        color: rgb(255 255 255 / 1);
        box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
        border-radius: 10px;
        padding: 3px 10px;
        display: inline-block;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p>Player 1: Chris</p>
    <script>
      const para = document.querySelector("p");

      para.addEventListener("click", updateName);

      function updateName() {
        const name = prompt("Enter a new name");
        para.textContent = `Player 1: ${name}`;
      }
    </script>
  </body>
</html>

js是轻量级的解释性语言，几乎所有的js转换器都运用了一种叫做及时编译的技术，会被编译成二进制的格式。尽管如此，js还是一个解释性语言。编译在代码运行之前，而非之前。

再次使用一个新的内容

function createParagraph() {
        const para = document.createElement("p");
        para.textContent = "Create a new para";
        document.body.appendChild(para);
      }
      const buttons = document.querySelectorAll("button");

      for (const button of buttons) {
        button.addEventListener("click",createParagraph);
      }

function函数的作用是创建一个p标签，内容是create a new para.然后appendchild到para。

然后再界面找到所有的button，然后遍历buttons，然后进行监听，按下之后执行这个函数。

JavaScript 初体验

猜数字游戏

我想让你开发一个猜数字游戏。游戏应随机选择一个 1 到 100 之间的自然数，然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择重新开始。

看到这个需求，需要随机生成1到100之间的自然数。

记录玩家当前的轮数，从1开始。

为玩家提供一种猜测数字的方法。

由结果提交，那么将其记录下来。

检查是否正确，如果正确祝贺，出错，提示然后输出允许输入另一个猜测，论数加1.

如果出错，没有剩余次数，那么提示游戏结束，组织玩家继续猜测。

reset，重启开始ui。

一开始的版本：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />

    <title>Number guessing game</title>

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }

      .form input[type="number"] {
        width: 200px;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>Number guessing game</h1>

    <p>
      We have selected a random number between 1 and 100. See if you can guess
      it in 10 turns or fewer. We'll tell you if your guess was too high or too
      low.
    </p>

    <div class="form">
      <label for="guessField">Enter a guess: </label>
      <input
        type="number"
        min="1"
        max="100"
        required
        id="guessField"
        class="guessField"
      />
      <input type="submit" value="Submit guess" class="guessSubmit" />
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>
      let randomNumber = Math.floor(Math.random() * 100) + 1;

      const guesses = document.querySelector(".guesses");
      const lastResult = document.querySelector(".lastResult");
      const lowOrHi = document.querySelector(".lowOrHi");

      const guessSubmit = document.querySelector(".guessSubmit");
      const guessField = document.querySelector(".guessField");

      function checkGuess() {
        const userGuess = Number(guessField.value);
        if (guessCount === 1) {
          guesses.textContent = "Previous guesses: ";
        }
        guesses.textContent += `${userGuess} `;

        if (userGuess === randomNumber) {
          lastResult.textContent = "Congratulations! You got it right!";
          lastResult.style.backgroundColor = "green";
          lowOrHi.textContent = "";
          setGameOver();
        } else if (guessCount === 10) {
          lastResult.textContent = "!!!GAME OVER!!!";
          lowOrHi.textContent = "";
          setGameOver();
        } else {
          lastResult.textContent = "Wrong!";
          lastResult.style.backgroundColor = "red";
          if (userGuess < randomNumber) {
            lowOrHi.textContent = "Last guess was too low!";
          } else if (userGuess > randomNumber) {
            lowOrHi.textContent = "Last guess was too high!";
          }
        }

        guessCount++;
        guessField.value = "";
        guessField.focus();
      }

      guessSubmit.addEventListener("click",checkGuess);

      let guessCount = 1;
      let resetButton;

      // Your JavaScript goes here
    </script>
  </body>
</html>