JavaScript入门基础速学笔记

最新推荐文章于 2025-02-18 17:52:54 发布

17bdw学编程

最新推荐文章于 2025-02-18 17:52:54 发布

阅读量179

点赞数

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/sworld_/article/details/106030985

版权

Javascript 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了JavaScript的基础知识，包括变量的声明与数据类型，如字符串、数字、布尔和对象。讲解了注释、运算符、条件句和函数的概念。还深入讨论了事件处理，如点击事件，并给出了实际应用的例子，如动态改变图片。此外，提到了Web Storage API，用于在浏览器中存储数据，并提供了MDN的JavaScript教程链接作为进一步学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量

关键字var

var myVariable = ‘bob’;

数据类型

字符串 var myVariable = ‘Bob’;
数字 var myVariable = 10;
布尔 var myVariable = true;
数组 var myVariable = [1,‘Bob’,‘Steve’,10];
对象 var myVariable = document.querySelector(‘h1’);

注释

//和/**/

运算符

加减乘除 +、-、*、/
赋值运算符 =
相等，测试两个值是否相等，返回一个true或false。===
非、不等 !、!==

条件句

if...else

函数

document.querySelector 和 alert 是浏览器内置的。

自定义函数：

- 定义
function multiply(num1, num2) {
  var result = num1 * num2;
  return result;
}

- 使用
multiply(4, 7);

事件

事件是能够捕捉浏览器操作并且允许你运行代码进行响应的代码结构。最明显的事件是点击事件，它会在鼠标点击什么的时候被浏览器唤醒。

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

语句相当于：

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

动态行为：

点击

标签的内容，然后运行updateName()函数，addEventListener() 方法用于向指定元素添加事件句柄。

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('输入一个新的名字：');
  para.textContent = '玩家1：' + name;
}

例子：

点击图片变成另外一张图片

var myImage = document.querySelector('img');  // 获取HTML中img标签的元素：

myImage.onclick = function() {                // 点击了图片后
    var mySrc = myImage.getAttribute('src');  // 获取图片的src属性值
    if(mySrc === 'images/firefox-icon.png') { // 判断是不是第一张图片，否则就切换到第二张，反复切换实现图片切换效果。
      myImage.setAttribute('src', 'images/firefox2.png'); 
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}