IEF|零基础学院|16天：javascript【1】
@(IEF笔记)[javascript, IEF]
1. 课程目标
从今天开始，我们要开始学习在Web开发中使用 JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理，今天的目标是初步了解 JavaScript/ECMAScript 是什么，开始学习基本的语法，并通过几个小例子的练习，来初步感受语言的魅力。
2. 学习总结
学习资料：
JavaScript基础 - 学习 Web 开发 | MDN
JavaScript 第一步 - 学习 Web 开发 | MDN
概念：
javascript概念，作用，是一种解释代码，动态代码，目前学习客户端代码；
- 解释代码 vs 编译代码；
- 服务端代码vs客户端代码；
- 动态代码 vs 静态代码；
JavaScript/ECMAScript的差别；API概念；
编程：
js基本结构和语法，通过<script>标签添加，分成外部和内部；
js从上到下按顺序运行js程序员思维；js程序基本结构：- 添加脚本，
- 初始化变量（网页对象
object，数组array，计数器···）， - 函数（函数内变量，初始化，判断条件，操作网页对象/变量，还原），
- 事件（监听器，响应器），
- 循环（条件，用在字符串，数组处理为多）
- 完善逻辑
js常见错误- 语法错误（有报错）常见：
- 拼写错误，大小写
- 变量为
null，可能是对象名写错，对象还没创建
- 逻辑错误（无报错）常见：
- 运算符用错，计算式写错；
- 运行顺序
- 有些操作语句要赋值才能起作用
js运算符js字符串- 转义字符
- 连接字符串
- 检索字符串，替换，分割，提取
- 大小写
- 字符串长度
- 数字与字符串的连接，转化，区分
js数组- 创建数组。添加
push、unshift，删除pop、shift，访问，修改数组项； - 数组长度
。length - 字符串与数组的转换
split、join js基础练习
3. 任务
3.1 任务一：简易计算器的实现
任务：第十六天，开始感受JS的乐趣
demo演示：简易计算器的实现
源代码地址：简易计算器的实现-github
任务要求：
- 点对应加减乘除按钮的时候，将两个输入框中的数字做对应的算术，并将结果显示在id为result的p标签内。
- 暂时不用做任何异常处理
效果：
js代码：
- 首先
onlod函数确保文档加载完毕； - 定义元素变量；
- 四个按钮的监听器；
- 四个运算函数：先把获取的数值字符转变成数字！！否则不能进行运算；然后把结果输出到页面上；
- 注意！！除法函数要先判断除数是否为0，为0时抛出异常，使用
try-catch结构抛出异常，记住不要在结果元素上输出异常，用弹窗输出。因为除数为0时计算结果有值：infinity（无穷大），结果值会覆盖掉异常。
<script>
window.onload = function () {
//variation
var add = document.getElementById('add-btn');
console.log(add);
var minus = document.getElementById('minus-btn');
var times = document.getElementById('times-btn');
var divide = document.getElementById('divide-btn');
var firstNumber = document.getElementById('first-number');
console.log(typeof firstNumber.value);
var secondNumber = document.getElementById('second-number');
var result;
var resultText = document.getElementById('result');
console.log(resultText);
//事件监听器
add.addEventListener('click', addTwo);
minus.addEventListener('click', minusTwo);
times.addEventListener('click', timesTwo);
divide.addEventListener('click', divideTwo);
//function
function addTwo() {
result = Number(firstNumber.value) + Number(secondNumber.value);
resultText.innerHTML = '运算结果: ' + result;
console.log(firstNumber.value);
console.log(typeof firstNumber);
console.log(secondNumber.value);
console.log(result);
console.log(resultText.textContent);
}
function minusTwo() {
result = Number(firstNumber.value) - Number(secondNumber.value);
resultText.textContent = '运算结果: ' + result;
console.log('-' + result);
}
function timesTwo() {
result = Number(firstNumber.value) * Number(secondNumber.value);
resultText.textContent = '运算结果: ' + result;
console.log('*' + result);
}
function divideTwo() {
var divisor = Number(secondNumber.value);
// 如果输入除数为0，抛出异常
try {
if (divisor == 0) {
throw '除数不能为0！';
}
} catch (err) {
alert(err + '请重新输入除数。');
// resultText.textContent = err + '请重新选择除数';
console.log(err);
}
result = Number(firstNumber.value) / Number(secondNumber.value);
resultText.textContent = '运算结果: ' + result;
console.log('/' + result);
}
}
</script>3.2 任务二：通过JS简历中加入简易彩蛋
任务: 第十六天，开始感受JS的乐趣
demo演示：通过JS简历中加入简易彩蛋
源代码地址：通过JS简历中加入简易彩蛋-github
效果：
js代码：
- 定义元素变量，指向两个按钮和弹出信息段落；
- 监听按钮是否被按下；
- 响应函数：清空信息-信息段落可见-改变信息内容；
- 注意！！一定要先清空信息段落，否则来回切换按钮时上一个的信息会乱入；
- 可以在段落
<p>里面插入<li>元素； - 用嵌套函数的方式在新增按钮里触发超链接
window.onload = function () {
//元素变量
var hello = document.querySelector('.helloButton');
var hobbies = document.querySelector('.hobbyButton');
var message = this.document.querySelector('.message');
//按钮的监听器
hello.addEventListener('click', sayHello);
hobbies.addEventListener('click', myHobbies);
//响应函数
function sayHello() {
message.textContent = '';
message.style.visibility = 'visible'
message.textContent = '很高兴 : ) 能遇见你！';
message.style.backgroundColor = 'yellow';
}
function myHobbies() {
message.style.visibility = 'visible'
message.textContent = '';
var hobbiesArray = ['电影','美食','舞蹈','单机游戏']
for(var i = 0; i < hobbiesArray.length; i++) {
var listItem = document.createElement('li');
listItem.textContent = hobbiesArray[i];
message.appendChild(listItem);
}
var more = document.createElement('button');
more.textContent = '还不够？点我';
message.appendChild(more);
more.addEventListener('click',openUrl);
function openUrl() {
window.location.href='https://github.com/juwuyu';
}
message.style.background = '#9966CC' ;
}
}3.1 任务三：蠢萌故事生成器（MDN)
任务：蠢萌故事生成器 - 学习 Web 开发 | MDN
demo演示：蠢萌故事生成器
源代码地址：蠢萌故事生成器-github
任务要求：
- 当用户按下“Generate random story”按钮时，生成一则笑话。
- 当且仅当在按钮被按下前用户在“Enter custom name”中输入了其名字的情况下，将默认的名字变成用户的名字。
- 当用户在按下生成按钮之前点击了UK radio按钮时，将默认的US重量和温度单位换成英式的。
- 如果用户再次按下生成按钮，则随即生成另一则笑话（如果用户愿意的话，他可以一直按生成按钮）
效果：
js代码：
- 首先！！一定要把
js代码放在window.onload函数里面，文档对象加载完成之后再执行js，否则可能出现object变量为空（还没被浏览器创建）； - 然后创建一些变量来定义文档中的按钮，输入框，单选框，段落等元素；
- 再然后定义一个返回数组随机项的函数，用
Math.floor(Math.random() * array.length)的方法生成数组长度内的随机数，帮助生成故事里随机的关键词； - 把故事主体和关键词数组放入变量；
- 按钮监听器，按下触发
result函数； result函数：
- 把故事主体赋值给一个新变量！！调用一次函数在初始故事的基础上生成一个新故事，这样不会改变初始故事的内容；
- 生成随机关键词并替换，注意！！出现多次的关键词要替换多次，不然只会替换第一个词；
- 用输入的名字替换默认名字，条件：输入不为空；
- 转换单位，替换体重和温度，条件：uk被选中；
- 更改文档元素内容，并设置该元素可见；
- 注意！！每次修改字符串变量之后，要赋值，不然修改不生效。
window.onload = function () {//文档对象加载完成之后再执行js
//定义文档变量
//COMPLETE VARIABLE AND FUNCTION DEFINITIONS
var customName = document.getElementById('customname');
console.log(customName.value);
var randomize = document.querySelector('.randomize');
console.log(randomize);
console.log(document.querySelector('.randomize'));
var story = document.querySelector('.story');
//定义函数，返回数组中的随机项
function randomValueFromArray(array) {
return array[Math.floor(Math.random() * array.length)];
}
//定义故事中的字符串
//RAW TEXT STRINGS
var storyText = 'It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
var insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
var insertY = ['the soup kitchen', 'Disneyland', 'the White House'];
var insertZ = ['turned into a slug and crawled away', 'spontaneously combusted', 'melted into a puddle on the sidewalk'];
//事件监听器与主函数
//EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
randomize.addEventListener('click', result);
function result() {
//把storyText传给新变量，对新变量进行替换[赋值！！]
var newStory = storyText;
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);
newStory = newStory.replace(':insertx:', xItem);
newStory = newStory.replace(':insertx:', xItem);
newStory = newStory.replace(':inserty:', yItem);
newStory = newStory.replace(':insertz:', zItem);
//检测输入是否为空，替换名字
if (customName.value != '') {
var name = customName.value;
newStory = newStory.replace('Bob', name);
}
//检测uk是否被选中，替换温度重量
if (document.getElementById('uk').checked) {
var weight = Math.round(300 * 0.0714286) + ' stone';
var temperature = Math.round((94 - 32) / 1.8) + ' centigrade';
newStory = newStory.replace('94 farenheit', temperature);
newStory = newStory.replace('300 pounds', weight);
}
//生成随机故事
story.textContent = newStory;
story.style.visibility = 'visible';
}
document.querySelector('html').style.backgroundColor = 'red';
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
