JS:简介

JavaScript

JavaScript是web开发者必学的三种语言之一:
    1、HTML定义网页的内容
    2、CSS规定网页的布局
    3、JavaScript对网页行为进行编程

 

 

 

JavaScript函数和事件

JavaScript函数是一种JavaScript代码块,它可以在调用时被执行。例如,当发生事件时调用函数,比如当用户点击按钮时

JavaScript能够改变HTML内容

例1:

DOCTYPE html>
<html>
<body>

<h2>JavaScript能做什么h2>
<p id="demo">JavaScript能够改变HTML内容。p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我!button>

body>
html>

JS:简介_第1张图片JS:简介_第2张图片

注:
1、getElementById()是多个JavaScript HTML方法之一

2、本例使用该方法来“查找” id="demo" 的HTML元素,并把元素内容(innerHTML)更改为 "Hello JavaScript"

3、JS脚本规定元素、文本等如何变化,函数中通过"id"等值确定具体操作的是哪个元素对象

4、JavaScript同时接受双引号和单引号,只是说整个函数体使用的引号不能与里面的字符串等的引号一致

 

 

JavaScript能够改变HTML属性

例2:

DOCTYPE html>
<html>
<body>

<h2>JavaScript 能做什么?h2>

<p>JavaScript 能够改变 HTML 属性值。p>

<p>在本例中,JavaScript 改变了图像的 src 属性值。p>

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯button>

body>
html>

JS:简介_第3张图片JS:简介_第4张图片

注:本例通过改变标签的src属性(source)来改变一张HTML图像

 

 

JavaScript能够改变HTML样式(CSS)

例3:

DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么h2>

<p id="demo">JavaScript 能够改变 HTML 元素的样式。p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我!
button>

body>
html>

JS:简介_第5张图片

JS:简介_第6张图片

注:改变HTML元素的样式,是改变HTML属性的一种变种

 

 

JavaScript能够隐藏HTML元素

例4:

DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么h2>
<p id="demo">JavaScript 能够隐藏 HTML 元素。p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我!
button>

body>
html>

JS:简介_第7张图片

注:JavaScript能够隐藏HTML元素

 

 

JavaScript能够显示HTML元素

可通过改变display样式来显示隐藏的HTML元素

例5:

DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么h2>

<p>JavaScript 能够显示隐藏的 HTML 元素。p>

<p id="demo" style="display:none">Hello JavaScript!p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我!
button>

body>
html>

JS:简介_第8张图片JS:简介_第9张图片

 

 

JavaScript使用:标签之间

2、或中的JavaScript:脚本可被放置与 HTML 页面的或部分中,或兼而有之

3、可以在HTML文档中放置任意数量的脚本

4、脚本可放置与外部文件中,JavaScript文件的文件扩展名是 .js

5、如需使用外部脚本,请在

你可能感兴趣的:(JS:简介)