JavaScript学习攻略

最新推荐文章于 2024-06-11 15:52:23 发布

Grit爱笑

最新推荐文章于 2024-06-11 15:52:23 发布

阅读量273

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_36667885/article/details/104647644

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解JavaScript的基本语法，包括变量声明、数据类型、运算符、控制结构、函数定义、对象和数组操作，以及如何通过事件处理与HTML交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 定义了网页的内容HTML 对大小写是敏感的。HTML注释以 <-- 开始以 --> 结束的
CSS 描述了网页的布局
JavaScript 网页的行为: 对大小写敏感，是发给浏览器的命令。驼峰法的命名规则,分号来分隔 JS 语句。单行//；多行注释以 /* 开始，以 */ 结尾。
函数 getElementById 与 getElementbyID 是不同的。变量 myVariable 与 MyVariable 也是不同的。

1.直接写入 HTML 输出流：
    document.write("<h1>这是一个标题</h1>");
2.对事件的反应：
    <button type="button" onclick="alert('欢迎!')">点我!</button>
3.改变 HTML 内容：
    x=document.getElementById("demo"); //查找元素 是 HTML DOM 中定义的
    x.innerHTML="Hello JavaScript"; //改变内容
4.改变 HTML 图像：
<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
//
function changeImage(){
    var s = document.getElementById('myimage');
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
//
<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

5.改变 HTML 样式：
    x=document.getElementById("demo")  //找到元素 
    x.style.color="#ff0000";           //改变样式
6.验证输入：
    if isNaN(x) {
        alert("不是数字");
    }
    if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){//正则
        alert("不是数字");
    }
7.
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p><h3>这是一个段落。</h3></p>");
</script>
8.<head> 中的 JavaScript 函数
<html>
<head>
<meta charset="utf-8"> 
<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>
9.<body> 中的 JavaScript 函数
<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>
10.外部的 JavaScript        外部 JavaScript 文件的文件扩展名是 .js。
外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
<html>
<head> 
<meta charset="utf-8"> 
</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>
//myScript.js 文件代码如下：
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

可以在文本字符串中使用反斜杠对代码行进行换行：
document.write("你好 \
世界!");
不能像这样折行：
document.write \
("你好世界!");
//
JavaScript 显示数据:
    使用 window.alert() 弹出警告框。
    使用 document.write() 方法将内容写到 HTML 文档中。
    使用 innerHTML 写入到 HTML 元素。
    使用 console.log() 写入到浏览器的控制台。
//
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
//写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

//语法
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号:
数组（Array）字面量 定义一个数组：
    [40, 100, 1, 5, 25, 10] 
对象（Object）字面量 定义一个对象：
    {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：
    function myFunction(a, b) { return a * b;}
//
<body>
<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>
</body>

JavaScript语言有多种类型的运算符：
类型 	实例 	描述
赋值，算术和位运算符 	=  +  -  *  / 	在 JS 运算符中描述
条件，比较及逻辑运算符 	==  != <  >  	在 JS 比较运算符中描述
//https://www.runoob.com/js/js-syntax.html
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
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 通过对象字面量赋值

JavaScript 变量的生命期从它们被声明的时间开始。
    局部变量会在函数运行以后被删除。
    全局变量会在页面关闭后被删除。

JavaScript 语句标识符 (关键字) ：
语句 	描述
break 	用于跳出循环。
catch 	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 	跳过循环中的一个迭代。
do ... while 	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 	定义一个函数
if ... else 	用于基于不同的条件来执行不同的动作。
return 	退出函数
switch 	用于基于不同的条件来执行不同的动作。
throw 	抛出（生成）错误 。
try 	实现错误处理，与 catch 一同使用。
var 	声明一个变量。
while 	当条件语句为 true 时，执行语句块。 

JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<script>
var carname1="Volvo XC60";
var answer1='It\'s alright';
var answer2="He is called \"John\"";
var answer3='He is called "John"';
document.write(carname1 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
</body>
</html>
//
Volvo XC60
It's alright
He is called "John"
He is called "John"

//数组
创建名为 cars 的数组：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"]; 
//对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"]; 
as
<script>
var person=
{
    firstname:"John",lastname:"Do",id: 5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

//new
Undefined 和 Null
Undefined 这个值表示变量不含有值。通过将变量的值设置为 null 来清空变量。
<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>
//
undefined
Volvo
null

声明变量类型,可用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

//new
<body>
<p>
有两种方式可以访问对象属性：
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
</script>
</body>
//
 有两种方式可以访问对象属性：

John Doe
//new
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
//fullName()一定加括号，否则原样输出function++++++++++++++++++
</script>

//new
var x = "John";             
var y = new String("John");
(x === y) 
ans=false
=== 为绝对相等，即数据类型与值都必须相等。

//new
常见的HTML事件的列表:
   事件 	          描述
onchange 	HTML 元素改变
onclick 	用户点击 HTML 元素
onmouseover 	用户在一个HTML元素上移动鼠标
onmouseout 	用户从一个HTML元素上移开鼠标
onkeydown 	用户按下键盘按键
onload 	        浏览器已完成页面的加载

在字符串中可以使用转义字符转义的特殊字符：
代码 	输出
\' 	单引号
\" 	双引号
\\ 	反斜杠
\n 	换行
\r 	回车
\t 	tab(制表符)
\b 	退格符
\f 	换页符

//new
JavaScript for/in 语句循环遍历对象的属性：
var person={fname:"John",lname:"Doe",age:25}; 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}
//as
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"B",lname:"G",age:6}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
//
BG6
//more  https://www.runoob.com/js/js-strings.html

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。