肉渣教程

JavaScript 教程

上一节 下一节

学习之前

学习JavaScript前,请先学习《HTML基础教程》和《CSS基础教程》;至少也要把HTML基础学一学,再来看JavaScript。

JavaScript简介

JavaScript是一门前端脚本语言,很强大,很实用;开发前端必学。初识JavaScript请记住如下几点:

  • JavaScript是一门前端脚本语言,一般简称JS
  • JavaScript语言跟Java语言没任何关系
  • JavaScript主要运行在网页前端(就是用户的浏览器)
  • JavaScript必学

HTML语言负责的是网页内容,CSS负责的是网页样式,JavaScript则是通过程序来控制网页的行为。


JavaScript很容易学,先大致看一下JS的功能吧!

JavaScript可以改变网页内容

JS通过getElementById()方法,找到指定id的HTML元素,重新定义其原有的HTML内容。(JavaScript中使用单引号或双引号都可以,但一定要是英文输入模式下的引号。)

document.getElementById("demo").innerHTML = "专否";

运行一下

JavaScript可以改变元素的属性值

如下所示,JavaScript将元素的src属性改变,从而展示不同的图片。(下例中img_url是定义的一个变量,用来存储新图片的url地址。其实嘛,这里就是故意定义一个变量,展示一下如何定义变量。之后会慢慢更详细地说明变量类型与变量的定义使用方法。)

var img_url = "https://logo.zhuanfou.com/program-logo-60.png";
document.getElementById("demo").src = img_url;

运行一下

JavaScript可以改变元素CSS样式

如下所示,JavaScript可以改变元素具体的CSS样式属性。

document.getElementById("demo").style.border = "10px solid";

运行一下

JavaScript可以隐藏某个元素

如下所示,JavaScript可以通过改变元素的display样式属性,从而将指定的HTML元素隐藏起来。

document.getElementById("demo").style.display = "none";

运行一下

JavaScript也可将某个隐藏状态的HTML元素再显现出来

同样的方法,JavaScript也可将某个隐藏状态的HTML元素再显现出来。

document.getElementById("demo").style.display = "block";

运行一下


JavaScript 教程

上一节 下一节