devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端之JavaScript基础_前端js学习文档

作者：小丑西瓜9 | 2024-03-30 08:09:53

赞

踩

前端js学习文档

前端之JavaScript基础

JavaScript

JavaScript 是一门编程语言，为网站提供动态交互特性。

将js文件引入页面

外部引入

1.新建文件夹scripts
2.在该文件夹内新建文件main.js文件

let myHeading = document.querySelector('h1');
myHeading.textContent='Hello World!';

  • 1
  • 2

3.页面引入js文件
位置标签head标签内，或body内最下方。
位置不同导致页面和js的加载顺序不同,可能导致页面呈现效果不一样。

    <script src="./scripts/main.js"></script>

  • 1
  1. 写在head内，在页面加载head标签内的内容时，就将script加载了。可能出错。
  2. 推荐写在body内的最下方。

写在文件内部

<script>
    // js代码
</script>

  • 1
  • 2
  • 3

位置：head标签内，或body内的最下方。

行内引入

<input type="button" value="点击有惊喜" onclick="javascript:alert('我是js的行内引入')">

  • 1

querySelector语法格式

Document实例.querySelector('选择器字符串');//Document实例调用是获取整个页面匹配的元素。
Element实例.querySelector('选择器字符串');//Element实例调用是获取该元素子树内匹配的元素。

  • 1
  • 2

简言之，一个是整个页面内查找，一个是指定范围内查找。

window.onload

window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

window.οnlοad=function(){
    Func1();
    Func2();
    Func3();
    .....
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

补充：
document.ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；原生js本身并没有提供 document.ready方法

$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;

  • 1

变量

JavaScript区分大小写。
1.声明变量
关键字 let 或 var，然后输入合适的名称：

let aVariable;
var AVariable;
const PI = 3.14;

  • 1
  • 2
  • 3

let 当前作用域有效
var 全局有效
const声明常量，当前作用域有效
let const 是块级作用域

2.变量赋值

let aVariable;
aVariable='abc';

  • 1
  • 2

或

let aVariable='abc';

  • 1

除常量外，其余变量赋值后可改

数据类型

在这里插入图片描述

JS注释

// 单行注释

/* 
   多行注释
   多行注释
   多行注释
*/

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

运算符

在这里插入图片描述
表达式和运算符

条件语句

常用if…else…

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最爱呀……');
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

函数（Function）

  • 可复用代码块 – 函数用来 封装 可复用 的功能。

1.乘法实例

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

  • 1
  • 2
  • 3
  • 4

2.调用

函数名();

  • 1

3.函数中var变量的提升

<script>
	    function a() {
	        console.log(num);
	        var num = 110;
	        console.log(num);
	    }
	    a();
	    console.log(num);
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述
4.返回值

0.0314E+2 等价于 0.0314 乘以 10的二次方

isNaN() 函数

isNaN(value)
// isNaN() 函数用来确定一个值是否为NaN, 检查其参数是否是非数字值。
// 参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true

  • 1
  • 2
  • 3
<body>
    <label for="text">请输入一个数字:</label>
    <input type="text" name="text" id="text" class="text">
    <input type="submit" value="确定" class="submit">
    <section></section>
    <script>
        let text = document.querySelector('.text');
        let submit = document.querySelector('.submit');

        submit.addEventListener('click', show);

        function show() {
            let x = Number(text.value);
            console.log('判定结果是:' + milliseconds(x));
            console.log(milliseconds('100F'));
            // expected output: "Not a Number!"

            console.log(milliseconds(0.0314E+2));
            // expected output: 3140
        }

        // 化为毫秒
        function milliseconds(x) {
            if (isNaN(x)) {
                return 'Not a Number!';
            }
            return x * 100;
        }
    </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

在这里插入图片描述

匿名函数

function () {};
//或
() => {};

  • 1
  • 2
  • 3

命名函数

function foo() {};
// or using the ECMAScript 2015 arrow notation
const foo = () => {};

  • 1
  • 2
  • 3

内部函数

计算两个正方形的面积和

function addSquares(a,b) {
   function square(x) {
      return x * x;
   }//内部函数
   return square(a) + square(b);
};
//Using ECMAScript 2015 arrow notation
const addSquares = (a,b) => {
   const square = x => x*x;
   return square(a) + square(b);
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

递归函数

function loop(x) {
   if (x >= 10)
      return;
   loop(x + 1);
};
//Using ECMAScript 2015 arrow notation
const loop = x => {
   if (x >= 10)
      return;
   loop(x + 1);
};


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

立即调用函数表达式（IIFE）

定义时就会立即执行的函数

(function () {
    statements
})();

  • 1
  • 2
  • 3

自执行匿名函数 的设计模式
第一个() 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。
第二个（）创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。
实例

var result = (function () {
    var name = "Barry";
    return name;
})();
// IIFE 执行后返回的结果：
result; // "Barry"

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

事件

事件能为网页添加真实的交互能力。
捕捉浏览器的操作并做出响应。

点击事件：

document.querySelector('html').onclick = function() {
	alert('别戳我，我怕疼。');
};

//等价于

let myHTML = document.querySelector('html');
myHTML.onclick = function() {alert('别戳我，我怕疼。');};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

prompt

var sign = prompt("你是什么星座的?");
if (sign == "天蝎座"){
   alert("哇! 我也是天蝎座的耶!");
}
// 有多种使用prompt方法的方式
var sign = window.prompt(); // 打开空的提示窗口
var sign = prompt();       // 打开空的提示窗口
var sign = window.prompt('你觉得很幸运吗?'); // 打开显示提示文本为"你觉得很幸运吗?"的提示窗口
var sign = window.prompt('你觉得很幸运吗?','是的'); // 打开显示提示文本为"你觉得很幸运吗?"并且输入框默认值为"是的"的提示窗口

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

prompt和alert以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。

继续完善基础网页

  1. 切换logo图片
  2. 切换用户

我的代码
js：

/**
 * 获取dom
 */
let myHeading = document.querySelector('h1');
let myBtn = document.querySelector('button');
let myImg = document.querySelector('img');

/**
 * 读取用户名
 */
function setUserName(){
    let myName = prompt('请输入您的名字。');
    localStorage.setItem('name',myName);
    myHeading.textContent='Mozilla酷毙了，'+myName;
}

/**
 * 用户初始化代码
 */

if(!localStorage.getItem('name')) {
    setUserName();
} else {
    let storedName = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}

/**
 * 切换火狐logo图片
 */
function changeImage(){
    let mySrc = myImg.getAttribute('src');
    if(mySrc === './images/firefox.png') {
        myImg.setAttribute('src', './images/firefox1.png');
    } else {
        myImg.setAttribute('src', './images/firefox.png');
    }
}

/**
 * 设置按钮点击事件
 */
myBtn.onclick = function() {
    setUserName();
}


myImg.onclick = function(){
    changeImage();
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>JavaScript基础</title>
       <link rel="stylesheet" href="./styles/index.css">
   </head>
   <body>
       <article>
           <h1>Mozilla酷毙了!</h1>

           <img src="./images/firefox.png" alt="火狐标志：一个环绕地球的红色狐狸">

           <p>Mozilla是一个全球社区，这里聚集着来自五湖四海的
               <ul>
                   <li>技术人员</li>
                   <li>思考者</li>
                   <li>建造者</li>
               </ul>
           </p>

           <p>我们致力于让 Internet保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
           <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅
               <a href="https://www.mozilla.org/zh-CN/about/manifesto/" target="_blank">Mozilla 宣言</a>
           </p>
           <button>切换用户</button>
       </article>

       <!-- 与 CSS 的 <link> 元素类似 -->
       <script src="./scripts/main.js"></script>

   </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

在这里插入图片描述
官方代码
学自MND
本节网页链接
下一节：前端之发布网站

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/339766
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号