JavaScript 笔记总结（一）
文章目录
- 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
对事件的反应
<html>
<head>
<meta charset="utf-8">
<title>jstitle>
head>
<body>
<h1>我的第一个 JavaScripth1>
<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 元素的样式
4.JavaScript 能改变 HTML 元素的样式。
************************************************************************
4.JavaScript 能改变 HTML 元素的样式。
验证输入
请输入数字。如果输入值不是数字，浏览器会弹出提示框。
关于 getElementById() 方法：https://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
参考来源：https://www.runoob.com/js/js-intro.html
JavaScript 输出
-
使用 window.alert() 弹出警告框
//在弹窗里输出 60*60*24*30 的结果 -
使用 document.write() 方法将内容写到 HTML 文档中
我的第一个 Web 页面
我的第一个段落。
-
使用 innerHTML 写入到 HTML 元素
我的第一个段落
我的第二个段落
我的第三个段落
//'我的第二个段落' 替换成 '段落已修改。' -
使用 console.log() 写入到浏览器的控制台
//在控制台里(使用F12打开)，console菜单里显示c的值console不会打断在页面的操作，输出内容后，页面还可以正常操作。如果用alert弹出来内容，那么除非叉掉弹窗，否则页面不能正常操作。
参考来源：https://www.runoob.com/js/js-output.html