用JavaScript改变Html
1.改变Html的内容 .innerHTML
<!DOCTYPE html>
<html>
<body>
<p id="demo">欢迎</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
<p>可以同时使用单双引号 使用Document (DOM对象)获取id为“demo”的元素,将它的内容(innerHTML)置为Hello JavaScript!</p>
</body>
</html>2.改变图像的属性 .src
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<p>src='/i/eg_bulbon 开灯</p>
<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>
<p>src='/i/eg_bulboff 关灯</p>3.改变html元素的样式大小 .style.fontSize
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！
</button>4.隐藏html的内容 .style.display=‘none’
显示已隐藏的html内容 .style.display=‘block’
//隐藏内容
<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我！
</button>
//显示已隐藏的内容
<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我！
</button>JavaScript 函数被放置于不同的位置时
在html中的javascript必须位于<script> 与 </script>之间
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>（1）JavaScript 函数被放置于 HTML 页面的 部分。
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>(2)JavaScript 函数被放置于 HTML 页面的 部分
<html>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>(3)外部脚本
//html部分
<!DOCTYPE html>
<html>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<script src="/demo/myScript.js"></script>
</body>
</html>
// /demo/myScript.js部分
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}输出
(1)使用 document.write() 将删除所有已有的 HTML (document.write() 方法仅用于测试)
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<button type="button" onclick="document.write(5 * 6)">试一试</button>
</body>
</html>
此效果最终展示结果为30（2）.使用警告框来显示数据 window.alert
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>（3）.使用 console.log() 写入浏览器控制台
???
???
???
语句
（1）
<p id="demo"></p>
<script>
var x, y, z; // 语句 1
x = 22; // 语句 2
y = 11; // 语句 3
z = x + y; // 语句 4
document.getElementById("demo").innerHTML =
"z 的值=" + z + "。";
</script>（2）代码块 { }
//可以用花括号{..}组合在代码块中,作用是定义一同执行的语句
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Kitty.";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>关键词
JavaScript 语法
JavaScript 语句定义两种类型的值：混合值和变量值。
1.混合值被称为字面量（literal）
书写混合值最重要的规则是：（1）写数值时有无小数点均可
（2）字符串是文本，由双引号或单引号包围：
2.变量值被称为变量
在编程语言中，变量用于存储数据值
JavaScript 使用 var 关键词来声明变量，表达式也可包含变量值,不能使用连字符-它是为减法预留的：
<script>
var x, y;
x = 7 + 8;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>值可以是多种类型：
1.<p>如果变量声明时没有赋值，那么其值是 undefined。</p>
2.document.getElementById("demo").innerHTML = "Bill" + " " + "Gates";
//输出结果：Bill Gares
<script>
txt1 = "Hello ";
txt1 += "Kitty！";
document.getElementById("demo").innerHTML = txt1;
</script>
//输出结果：Hello Kitty!
3.赋值法
A = 3.14;
B = "Bill Gates";
C = 'How are you!';
document.getElementById("demo").innerHTML = A + "<br>" + B + "<br>" + C;
/*3.14
Bill Gates
How are you!
*/
4.可在一条语句中声明好多变量
<script>
var person = "Bill Gates",
carName = "porsche",
price = 150000;
document.getElementById("demo").innerHTML = carName;
</script>
//porsche
如果把要给数值放入引号中，其余数值会被视作字符串并被级联
5.
<script>
var x = 3 + 5 + 8;
document.getElementById("demo").innerHTML = x;
</script>
//输出结果：16
6.
<script>
x = "8" + 3 + 5;
document.getElementById("demo").innerHTML = x;
</script>
//输出结果：835
7.
<script>
var x = 3 + 5 + "8"
document.getElementById("demo").innerHTML = x;
</script>
//输出结果：88
8.
<script>
var x = 7;
x++;
document.getElementById("demo").innerHTML = x;
</script>
//给x=7递增，结果为8
9.
<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 4;
// 或者：document.getElementById("demo").innerHTML = Math.pow(x,4);
//或者：添加变量y = x ** 4;
</script>
//输出结果：625
10.//用科学计数法表示数据
<script>
var y = 123e10;
var z = 123e-5;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
//输出结果：1230000000000
// 0.00123
11.//判断对错
<script>
var x = 7;
var y = 7;
var z = 8;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
//输出结果：true
// false
12.//用数组[]索引输出数据,
//数组索引基于零，意味着第一个项目是 [0]，第二个项目是 [1]，以此类推
<script>
var cars = ["Porsche", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
//输出结果：Porsche
13.//JavaScript 对象用花括号来书写，对象属性是 name:value 对，由逗号分隔。
<script>
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
//输出结果：Bill is 62 years old.
//输出类型
<script>
document.getElementById("demo").innerHTML =
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (并非 "array"，参见下面的注释)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
*/javascript函数
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
由函数执行的代码被放置在花括号中：
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}1.函数返回a与b的乘积
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b; //调用了一个执行计算的函数,函数返回 a 和 b 的乘积
}
</script><script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
//结果：122.将华氏度转换成摄氏度
<script>
function toCelsius(f) {
return (5/9) * (f-32);//转换公式
}
document.getElementById("demo").innerHTML = toCelsius(86);//此处的86指的是华氏度
</script>
//输出结果：30<script>
document.getElementById("demo").innerHTML =
"温度是：" + toCelsius(86) + " 摄氏度。";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
//输出结果：温度是30摄氏度。3.arguments.length 属性返回函数调用时接收的参数个数
<script>
function myFunction(a, b,c) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3, 2);
</script>4.在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
//是局部变量，所以此功能只对demo1起作用，对demo2无效
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>JS对象
1.对象也是变量,对象包含很多值。
<script>
// 创建对象：
var car = {type:"porsche", model:"911", color:"white"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>
//输出结果：porsche<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
//输出结果：Bill已经62岁了。JS事件
1.改变了 id="demo" 的元素的内容，获取标准时间<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
<p id="demo"></p>
//输出结果：显示当前时间，例如.Wed Mar 10 2021 10:14:59 GMT+0800 (中国标准时间)2.改变自身元素，直接获取当前时间,<body>中<button onclick="this.innerHTML=Date()">当前时间</button>
//输出结果：显示当前时间，例如.Wed Mar 10 2021 10:14:59 GMT+0800 (中国标准时间)3.使用调用函数获取当前时间<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>字符串
输出字符串的长度 .length<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>在字符串中加入双引号： \"
单引号： \'
反斜杠： \\<script>
var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。";
document.getElementById("demo").innerHTML = x;
</script>
//输出结果：中国是瓷器的故乡，因此china与“China（中国）”同名。不同运算符对字符串的影响
其他几乎不变，但JavaScript 用 + 运算符对字符串进行了级联，所以
1.不符合加法运算
2.假如字符串包含数值，则结果将是数
3.NaN 属于 JavaScript 保留词，指示某个数不是合法数。尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）
4.NaN,假如您在数学运算中使用了 NaN，则结果也将是 NaN
5.NaN 是数，typeof NaN 返回 number1.两个字符串相加，结果将是一个字符串的级联<script>
var x = "10";
var y = "23";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
//输出结果：10232.假如您在数学运算中使用了 NaN，则结果也将是 NaN：var x = NaN;
var y = 5;
var z = x + y; // z 将是 NaN3.结果也许是串连接var x = NaN;
var y = "5";
var z = x + y; // z 将是 NaN5
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
