文章目录
- JavaScript
- JavaScript 语法
- 函数
- 对事件的反应
- 改变 HTML 内容
- 改变 HTML 图像
- 改变 HTML 元素的样式
- 验证输入
- JavaScript 输出
JavaScript
JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
什么是javascript？
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
脚本可同时位于 HTML 的 和 两个部分，通常的做法是把函数放入 部分，或者放在页面底部。这样就可以把它们放在同一处位置，不会干扰页面的内容
JavaScript 语法
JavaScript 有多种数据类型：数字，字符串，数组，对象……
使用 **算术运算符** 来计算值
使用**赋值运算符**给变量赋值
语句是用分号(;)分隔.
单行注释是双斜杠 **/
对大小写是敏感的
使用 Unicode 字符集
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
函数
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
参考来源 https://www.runoob.com/js/js-syntax.html
对事件的反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如点击按钮出现弹窗：
</p>
<button type="button" onclick="alert('谢谢点击!')">点我!</button>
</body>
</html>
改变 HTML 内容
<p id="1">2.JavaScript 能改变 HTML 元素的内容。</p>
<script> function neirong() { x=document.getElementById("1"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script>
<button type="button" onclick="neirong()">点击这里</button>
//document.getElementById("1")是使用 id 属性来查找 HTML 元素的 JavaScript 代码
//innerHTML = "Hello JavaScript!" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
改变 HTML 图像
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="https://www.runoob.com/images/pic_bulboff.gif"; } else { element.src="https://www.runoob.com/images/pic_bulbon.gif"; } } </script>
<img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
改变 HTML 元素的样式
<p id="2">
4.JavaScript 能改变 HTML 元素的样式。
</p>
<script>
var x=document.getElementById('2');
var y=document.getElementById('520');
var count=0;
function yangshi(){
count++
if(count%2==1){
x.style.color='#ff0000';
}else {
x.style.color='#ffff00';
}
}
</script>
<button id="520" type="button" onclick="yangshi()">点击这里</button>
************************************************************************
<p id="2.5">
4.JavaScript 能改变 HTML 元素的样式。
</p>
<script>
var x=document.getElementById('2.5');
var count=0;
x.onclick=function() {
count++
if(count%2==1){
x.style.color='#ff0000';
}else {
x.style.color='#ffff00';
}
}
</script>
<button>点击文字变色</button>
验证输入
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
else
{
alert("是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
关于 getElementById() 方法：https://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
参考来源：https://www.runoob.com/js/js-intro.html
JavaScript 输出
-
使用 window.alert() 弹出警告框
<script> window.alert(60*60*24*30); </script> //在弹窗里输出 60*60*24*30 的结果 -
使用 document.write() 方法将内容写到 HTML 文档中
<h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.write(Date()); } </script> -
使用 innerHTML 写入到 HTML 元素
<p id="1">我的第一个段落</p> <p id="2">我的第二个段落</p> <p id="3">我的第三个段落</p> <script> document.getElementById("2").innerHTML = "段落已修改。"; </script> //'我的第二个段落' 替换成 '段落已修改。' -
使用 console.log() 写入到浏览器的控制台
<script> a = 8; b = 8; c = a * b; console.log(c); </script> //在控制台里(使用F12打开)，console菜单里显示c的值console不会打断在页面的操作，输出内容后，页面还可以正常操作。如果用alert弹出来内容，那么除非叉掉弹窗，否则页面不能正常操作。
参考来源：https://www.runoob.com/js/js-output.html
