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

JavaScript 笔记总结（一）

文章目录