前端之JavaScript基础
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>
- 写在head内，在页面加载head标签内的内容时，就将script加载了。可能出错。
- 推荐写在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以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。
继续完善基础网页
- 切换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>
扫一扫
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
