开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端之JavaScript基础 -> 正文阅读

[JavaScript知识库]前端之JavaScript基础

前端之JavaScript基础

JavaScript

JavaScript

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

将js文件引入页面

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

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

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

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

querySelector语法格式

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

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

window.onload

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

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

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

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

变量

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

let aVariable;
var AVariable;
const PI = 3.14;

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

2.变量赋值

let aVariable;
aVariable='abc';

或

let aVariable='abc';

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

数据类型

在这里插入图片描述

JS注释

// 单行注释

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

运算符

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

条件语句

常用if…else…

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

函数（Function）

函数用来封装 可复用 的功能。
1.乘法实例

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

匿名函数

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

命名函数

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

内部函数

计算两个正方形的面积和

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);
};

递归函数

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);
};

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

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

(function () {
    statements
})();

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

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

事件

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

点击事件：

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

//等价于

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

prompt

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

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

继续完善基础网页

切换logo图片
切换用户

我的代码
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();
}

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>