JavaScript编程学习

发表于： 2022年1月6日 2022年2月4日
分类：未分类

被阅次数： 434

<head>
<meta charset=”utf-8″>
<title>在浏览器上显示的名称</title>
<script>
function displayDate(){
document.getElementById(“demo”).innerHTML=Date();
}实时获取日期，并显示在id为demo的段落中
</script>
</head>
<body>

<h1>一级字号的标题</h1>
<p id=“demo”>这是一个段落</p>

<button type=”button” onclick=“displayDate()”>按钮上显示日期的提示</button>

</body>
</html>

菜鸟教程(runoob.com)

一级字号的标题

这是一个段落

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p id=”demo”>JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction()
{
x=document.getElementById(“demo”); // 找到元素
x.innerHTML=”Hello JavaScript!”; // 改变内容
}
</script>
<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

菜鸟教程(runoob.com)

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

</body>
</html>

菜鸟教程(runoob.com)

点击灯泡就可以打开或关闭这盏灯

</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p id=”demo3″>
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction3()
{
x=document.getElementById(“demo3”) // 找到元素
x.style.color=”#ff0000″; // 改变样式
}
</script>
<button type=”button” onclick=”myFunction3()”>点击这里</button>

</body>
</html>

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id=”demo” type=”text”>
<script>
function myFunction()
{
var x=document.getElementById(“demo”).value;
if(x==””||isNaN(x))
{
alert(“不是数字”);
}
}
</script>
<button type=”button” onclick=”myFunction()”>点击这里</button>

菜鸟教程(runoob.com)

我的第一段 JavaScript

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

JavaScript简介

<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write(“<h1>这是一个标题</h1>”);
document.write(“<p>这是一个段落。</p>”);

document.write(“<p>这是一个段落”+4+5+”。</p>”);
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

菜鸟教程(runoob.com)

JavaScript 能够直接写入 HTML 输出流中：

您只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</head>
<body>

</body>
</html>

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

JavaScript 用法

<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</head>
<body>

</body>
</html>

菜鸟教程(runoob.com)

我的 Web 页面

一个段落。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落。</p>
<button type=”button” onclick=”myFunction()”>点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 “myScript.js” 的外部文件中。</p>
<script src=”myScript.js”></script>

</body>
</html>

菜鸟教程(runoob.com)

我的 Web 页面

一个段落。

注释：myFunction9 保存在名为 “myScript.js” 的外部文件中。

输出

<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>

</body>

<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>

</body>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

</body>

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台
<script>
document.getElementById(“demo”).innerHTML = 123e5;
</script>
<script>
document.getElementById(“demo”).innerHTML = ‘John Doe’;
</script>
<script>
document.getElementById(“demo”).innerHTML = 5 * 10;
</script>

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 的结果
}

JavaScript 语句

<p id=”demo”>一个段落。</p>
<div id=”myDIV”>一个 DIV。</div>
<script>
document.getElementById(“demo”).innerHTML=”你好 Dolly”;
document.getElementById(“myDIV”).innerHTML=”你最近怎么样?”;
</script>

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)

var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 函数

<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick=”myFunction(‘Harry Potter’,’Wizard’)”>点击这里</button>
<script>
function myFunction(name,job){
alert(“Welcome ” + name + “, the ” + job);
}
</script>

</body>

JavaScript 作用域

JavaScript 事件

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

<body>

<button onclick=”this.innerHTML=Date()”>现在的时间是?</button>

</body>

<body>

<button onclick=”getElementById(‘demo’).innerHTML=Date()”>现在的时间是?</button>
<p id=”demo”></p>

</body>

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 …

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 …

JavaScript 运算符

avaScript 比较和逻辑运算符

<body>

<p>点击按钮检测年龄。</p>
年龄:<input id=”age” value=”18″ />
<p>是否达到投票年龄?</p>
<button onclick=”myFunction()”>点击按钮</button>
<p id=”demo”></p>
<script>
function myFunction()
{
var age,voteable;
age=document.getElementById(“age”).value;
voteable=(age<18)?”年龄太小”:”年龄已达到”;
document.getElementById(“demo”).innerHTML=voteable;
}
</script>

</body>

JavaScript if…Else 语句

if 语句 – 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 – 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if….else 语句– 使用该语句来选择多个代码块之一来执行
switch 语句 – 使用该语句来选择多个代码块之一来执行

<body>

<p>如果时间早于 20:00，会获得问候 “Good day”。</p>
<button onclick=”myFunction()”>点击这里</button>
<p id=”demo”></p>
<script>
function myFunction(){
var x=””;
var time=new Date().getHours();
if (time>20){
x=”Good night”;
}
document.getElementById(“demo”).innerHTML=x;
}
</script>

</body>

var d=new Date().getDay();
switch (d){
case 0:x=”今天是星期日”;
break;
case 1:x=”今天是星期一”;

不同类型的循环

JavaScript 支持不同类型的循环：

for – 循环代码块一定的次数
for/in – 循环遍历对象的属性
while – 当指定的条件为 true 时循环指定的代码块
do/while – 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例

for (var i=0; i<5; i++) { x=x + “该数字为 “ + i + “<br>“; }

function myFunction(){
var x;
var txt=””;
var person={fname:”Bill”,lname:”Gates”,age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById(“demo”).innerHTML=txt;
}

while (i<5){
x=x + “该数字为 ” + i + “<br>”;
i++;
}

do{
x=x + “该数字为 ” + i + “<br>”;
i++;
}
while (i<5)

function myFunction(){
var x=””,i=0;
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}

function myFunction(){
var x=””,i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + “该数字为 ” + i + “<br>”;
}
document.getElementById(“demo”).innerHTML=x;
}

cars=[“BMW”,”Volvo”,”Saab”,”Ford”];
list:{
document.write(cars[0] + “<br>”);
document.write(cars[1] + “<br>”);
document.write(cars[2] + “<br>”);
break list;
document.write(cars[3] + “<br>”);
document.write(cars[4] + “<br>”);
document.write(cars[5] + “<br>”);
}

typeof “John”                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:‘John’, age:34} // 返回 object

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

document.getElementById(“demo”).innerHTML =
“john”.constructor + “<br>” +
(3.14).constructor + “<br>” +
false.constructor + “<br>” +
[1,2,3,4].constructor + “<br>” +
{name:’john’, age:34}.constructor + “<br>” +
new Date().constructor + “<br>” +
function () {}.constructor;

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf(“Array”) > -1;
}

var x = 123;
document.getElementById(“demo”).innerHTML =
String(x) + “<br>” +
String(123) + “<br>” +
String(100 + 23);

// 获取 id=”numb” 的值
x = document.getElementById(“numb”).value;

// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = “输入错误”;
} else {
text = “输入正确”;
}
document.getElementById(“demo”).innerHTML = text;
}
</script>

系统

331

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

一级字号的标题

我的第一段 JavaScript

我的第一段 JavaScript

我的第一段 JavaScript

JavaScript简介

我的第一段 JavaScript

JavaScript 用法

我的 Web 页面

我的 Web 页面

输出

JavaScript 语句

JavaScript 数据类型

JavaScript 函数

JavaScript 作用域

JavaScript 事件

JavaScript 运算符

avaScript 比较 和 逻辑运算符

JavaScript if…Else 语句

不同类型的循环

For 循环

实例

JavaScript 数据类型

系统

发表回复 取消回复

avaScript 比较和逻辑运算符

发表回复取消回复