JavaScript 是 Web 的编程语言。
JavaScript web 开发人员必须学习的 3 门语言中的一门:
HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 标签可以放在 <body> 、<head>标签中,也可以外部引用:
//head标签引用 <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </head> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">尝试一下</button> </body> </html> //body标签引用 <!DOCTYPE html> <html> <body> <h1>我的 Web 页面</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; } </script> </body> </html> //外部标签引用 <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。出于测试目的,您可以将JavaScript直接写在HTML 文档中:
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>使用 document.getElementById(id) 方法访问某个 HTML 元素。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>批注,该方法会直接替换原内容。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单,信息会显示在控制台中。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
容器。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined var x = 5; // 现在 x 为数字 var x = "John"; // 现在 x 为字符串JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:
var x, length //此时是未定义值 undefined x = 5; length = 6; var lastname="Doe", age=30, job="carpenter";实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试实例</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">点我</button> </body> </html>对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。
//定义对象 var person = { //创建属性 firstName: "John", lastName : "Doe", id : 5566, //创建方法 fullName : function() { return this.firstName + " " + this.lastName; } }; //访问属性及方法 person.lastName; name = person.fullName();常见的HTML事件
onchange HTML 元素改变onclick 用户点击 HTML 元素onmouseover 用户在一个HTML元素上移动鼠标onmouseout 用户从一个HTML元素上移开鼠标onkeydown 用户按下键盘按键onload 浏览器已完成页面的加载其他参考:https://www.runoob.com/js/js-strings.html
js允许先赋值后定义。。
x = 5; // 变量 x 设置为 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x var x; // 声明 xJavaScript 严格模式(strict mode)即在严格的条件下运行。 严格模式下不允许使用未声明的变量。
"use strict"; x = 3.14; // 报错 (x 未定义)