前端之JavaScript基础

  • JavaScript
    • 将js文件引入页面
      • 外部引入
      • 写在文件内部
      • 行内引入
      • querySelector语法格式
      • window.onload
    • 变量
    • 数据类型
    • JS注释
    • 运算符
    • 条件语句
    • 函数（Function）
      • 匿名函数
      • 命名函数
      • 内部函数
      • 递归函数
      • 立即调用函数表达式（IIFE）
    • 事件
    • prompt
    • 继续完善基础网页

JavaScript

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

将js文件引入页面

外部引入

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

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

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

    <script src="./scripts/main.js"></script>
  1. 写在head内，在页面加载head标签内的内容时，就将script加载了。可能出错。
  2. 推荐写在body内的最下方。

写在文件内部

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

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

行内引入

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

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

2.调用

函数名();

3.函数中var变量的提升

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


4.返回值

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

isNaN() 函数

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

<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>

匿名函数

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以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。

继续完善基础网页

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

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>


官方代码
学自MND
本节网页链接
下一节：前端之发布网站

前端之JavaScript基础相关推荐

  1. Web前端之JavaScript基础

    Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...

  2. 五、前端开发-JavaScript基础

    五.前端开发语言体系-JavaScript基础 文章目录 五.前端开发语言体系-JavaScript基础 JavaScript基础 变量.值和类型 运算符和表达式 语句 数组 函数和对象 严格模式 类 ...

  3. 前端见微知著JavaScript基础篇：你所不知道的apply, call 和 bind

    在我的职业生涯中,很早就已经开始使用JavaScript进行项目开发了.但是一直都是把重心放在了后端开发方面,前端方面鲜有涉及.所以造成的一个现象就是:目前的前端知识水平,应付一般的项目已然是足够的, ...

  4. 前端之 JavaScript 基础

    JavaScript 概述 ECMAScript 和 JavaScript的关系 1996年11月,JavaScript 的创造者 Netscape(网景) 公司,决定将 JavaScript 提交给 ...

  5. 前端学习-JavaScript基础（ES6）

    简介: ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并 ...

  6. 前端学习-JavaScript基础

    一.初识JavaScript 官网: https://www.w3.org/standards/webdesign/script 说明: JavaScript语法规范是ECMAScript,ECMAS ...

  7. Web前端开发JavaScript基础(3)

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  8. 【前端】JavaScript基础（二）

    目录 一.内置对象 Math对象 Data日期 数组对象 字符串对象 字符串的不可变 根据字符返回位置 根据位置返回字符(重点) 字符串基本方法(重点) 字符串的替换与转换 二.简单类型和复杂类型 简 ...

  9. 前端学习-JavaScript基础（正则表达式）

    正则表达式 正则表达式在很多程序设计语言都有,大同小异,尤其是在Python爬虫的使用很多,我也就跟他们学习爬爬图片,小视频啥的,咳咳都是学习资料.在JavaScript中,使用比较多的是表单验证,字 ...

最新文章

  1. 个人笔记本上win10+yolov3+python+tensorflow+keras训练自己的识别模型
  2. 使用WatchService监控文件变化
  3. python数据统计代码_Python 数据的累加与统计的示例代码
  4. Finally语句块的运行
  5. 战线长一点的飞秋实现原理
  6. java阻塞执行命令_java执行bat命令碰到的阻塞问题的解决方法
  7. 6种继承的优点和缺点
  8. x星球出入站（蓝桥杯递归）
  9. 使用yum安装java
  10. Cadence 的 Orcad Capture CIS 使用鼠标右键的Show Footprint无法查看元件封装图的问题的解决方法
  11. QVariant方法功能（QT5.12）
  12. 灿烂夏日里的翩翩蝴蝶结
  13. TimeQuest Timing Analyzer简单使用
  14. nltk download所需包
  15. LJ2200部分软件空白打印问题解决
  16. 永恒之蓝漏洞复现(ms17-010)
  17. The first record --两次面试
  18. 百问网7天物联网智能家居 学习心得 打卡第五天
  19. 354. 俄罗斯套娃信封问题（Java动态规划）
  20. dymola学习笔记-第二天 补充

热门文章

  1. 可逆电子计算机,基于可逆逻辑的计算机系统原型（Recom-II）
  2. “东数西算”工程下如何建设新型算力网络
  3. 实验七2D太阳系绘制
  4. 群智感知应用中基于区块链的激励机制
  5. 阿里云ECS研发2021春招(校招/实习)
  6. Planet explorer:免费获取高分辨率影像的网站
  7. WHQL认证环境部署以及测试攻略二之HLK或者HCK软件的安装
  8. 我的世界基岩版json_Linux 搭建 我的世界(MC) 基岩版服务器
  9. WebGL 这个三角形，像极了我的前半生！
  10. libtorch学习笔记（16）- Faste-RCNN的RPN如何训练以及训练的参数集