JavaScript基础

最新推荐文章于 2022-06-29 11:13:22 发布
最新推荐文章于 2022-06-29 11:13:22 发布
阅读量446 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43979090/article/details/104161464
版权

JavaScript:

前提：学习JavaScript前必须先有一些关于html和css编程基础
将JavaScript前，我们先用实例说明以下它具体是什么情况的。
示例1：
我们用如下的代码，写在记事本，以.html为后缀，然后用浏览器打开这个文件。

<html>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
	
</body>
</html>

其结果为：
在这里插入图片描述
而当我们点击“点我”时，浏览器就会弹出警示框，如下界面：
在这里插入图片描述
示例2：
用记事本和浏览器，同样的做法

<html>
<head>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

其结果为：
在这里插入图片描述
当我们点击“显示日期”时，会出现如下界面：
在这里插入图片描述
以上就是两个javascript的例子，例子中我们需要注意的是：
1）javascript的编写其实也是HTML，它就是HTML的“工具”
2）javascript脚本的编写只位于<script>和</script>中。

下面我们开始介绍JavaScript：
基础概念：
1.javascript是脚本语言
2.javascript是一种轻量级的编程语言
3.javascript是可插入HTML页面中的编程代码
4.javascript插入HTML页面后，可由所有现代浏览器执行
5.脚本可被放置在HTML页面的<body></body>和<head></head>部分中。
6.HTML中的javascript脚本必须位于<script></script>标签之间

语法：
变量可以通过变量名访问。在指令式语言中，变量通常是可变的，字面量是一个恒定的值。
1）字面量：
在编程语言中，一般固定值称为字面量。
数字（Number）字面量： 可以是整数或者是小数，或者是科学计数(e)。
字符串(String)字面量 ： 可以使用单引号或双引号：“Jian jie”,‘Jian jie’
表达式字面量： 用于计算：5+6，5/(6+2)
数组(Array)字面量：定义一个数组：[40,19,222,35,3]
对象(Object)字面量: 定义一个对象：

{firstname:"Join",lastName:"Doe",age:"50"}

函数(Function)字面量定义一个函数：

function myFunction(a,b) {return a*b;}

2)变量：
在编程语言中，变量用于存储数据值。
Javascript使用关键字var来定义变量，使用等号来为变量赋值。
例如：
var x;
x=5;

3）运算符：
赋值，算术运算符：=，+，-，*，/
逻辑运算符：==,!=,<,>

4)关键字：
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
例如var 关键字告诉浏览器创建一个新的变量：
var x=5+6;
JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
以下是 JavaScript 中最​​重要的保留字（按字母顺序）：
abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

5)注释（和C++语法一样）：
单行注释：//
多行注释：/* */

6）数据类型：
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 通过对象字面量赋值

7）函数：
JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
示例：
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}

JavaScript语句：
JavaScript语句向浏览器发出命令，语句的作用是告诉浏览器该做什么。
这里举出几个常用的语句：
1）下面的语句是向id="demo"的HTML元素输出文本“你好 Dolly”：
document.getElementById(“demo”).innerHTML=“你好 Dolly”
2）分号：
分毫用于分隔Javascript语句，通常我们在每条可执行语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句
3）空格：
Javascript会忽略多余的空格，我们可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的
4）对代码行进行折行：
我们可以在文本字符串中使用反斜杠对代码行进行换行。
例如：
document.write(“你好
世界！”);
但不能这样折行：
document.write
(“你好世界！”)；

JavaScript变量：
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
变量可以使用后声明。例如：
a=3;
var a;
变量的限制：
①变量必须以字母开头
②变量也能以$和_符号开头
③变量名称对大小写敏感

JavaScript事件：
HTML事件是发生在HTML元素上的事情。
当在HTML页面中使用Javascript时，JavaScript可以触发这些事件。
1）HTML事件
HTML事件可以时浏览器行为，也可以时用户行为。
①HTML 页面完成加载
②HTML input字段改变时
③HTML按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时，JavaScript可以执行一些代码。
HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素
例如：

<button onclick="getElementById('demo').innerHTML=Date()">现在时间？</button>

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

JavaScript输出：
1）使用window.alert()弹出警告框
2）使用document.write()方法将内容写道HTML文档中
3）使用innerHTML写入到HTML元素
4）使用console.log()写入到浏览器的控制台

JavaScript条件语句：
1）if语句
语法：
if (condition)
{
当条件为 true 时执行的代码
}
例如：
if(a>3)
{
a=a-1;
}
2)if…else语句：
语法：
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
例如：
if(a==3)
{
b=a;
}
else
{
a=a+1;
}
3)if…else if…else语句：
语法:
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}

Javascript switch语句：
语法：
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
例如：
var d=new Date().getDay();
switch (d)
{
case 0:x=“今天是星期日”;
break;
case 1:x=“今天是星期一”;
break;
case 2:x=“今天是星期二”;
break;
case 3:x=“今天是星期三”;
break;
case 4:x=“今天是星期四”;
break;
case 5:x=“今天是星期五”;
break;
case 6:x=“今天是星期六”;
break;
}
另外，可以使用default关键词来规定匹配不存在时做的事情：
例如：
var d=new Date().getDay();
switch (d)
{
case 6:x=“今天是星期六”;
break;
case 0:x=“今天是星期日”;
break;
default:
x=“期待周末”;
}
document.getElementById(“demo”).innerHTML=x;

JavaScript for循环：
语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
其中：
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
示例：
如果我们需要一遍又一遍的运行相同的代码，并且每次的值都不同，那么使用循环时很方便的。
一般写法：
document.write(cars[0] + “<br>”);
document.write(cars[1] + “<br>”);
document.write(cars[2] + “<br>”);
document.write(cars[3] + “<br>”);
document.write(cars[4] + “<br>”);
document.write(cars[5] + “<br>”);
for循环写法：
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + “<br>”);
}

for/In循环：
当语句循环遍历对象的属性的时候，可以使用for/In循环：
例如(类似python的语法)：
var person={fname:“John”,lname:“Doe”,age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}

while循环：
语法：
while (条件)
{
需要执行的代码
}
例如：
while (i<5)
{
x=x + "The number is " + i + “<br>”;
i++;
}

do/while循环：
语法：
do
{
需要执行的代码
}
while (条件);
例如：
do
{
x=x + "The number is " + i + “<br>”;
i++;
}
while (i<5);

JavaScript中的typeof，null和undefined
1)使用typeof操作符来检测变量的数据类型
typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:‘John’, age:34} // 返回 object
2）null表示“什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用。
typeof null返回的时object
3）undefined是一个没有设置值的变量。
typeof 一个没有值的变量会返回undefined

JavaScript正则表达式
正则表达式使用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换
1）什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
2）字符串方法
search():用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回字串的起始位置。
replace():用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式相匹配的字符串
示例：
①使用正则表达式（其中i是一个修饰符）
var str = “Visit Runoob!”;
var n = str.search(/Runoob/i);
结果：n=6
当然也可以如下（使用字符串）：
var str = “Visit Runoob!”;
var n = str.search(“Runoob”);

②使用正则化表达式
var str = document.getElementById(“demo”).innerHTML;
var txt = str.replace(/microsoft/i,“Runoob”);
结果：Visit Runoob!
使用字符串：
var str = document.getElementById(“demo”).innerHTML;
var txt = str.replace(“Microsoft”,“Runoob”);

3）正则表达式修饰符：修饰符可以在全局搜索中不区分大小写
i ：执行对大小写不敏感的匹配
g ：执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
m：执行多行匹配
4）正则表达式模式：
方括号用于查找某个范围的字符
[abc]:查找方括号之间的任何字符
[0-9]:查找任何从0至9的数字
[x|y]:查找任何可以|分隔的选项

元字符是拥有特殊含义的字符：
\d:查找数字
\s:查找空白字符
\b:查找单词边界
\uxxxx:查找以十六进制数xxxx规定的Unicode字符

量词：
n+：匹配任何包含至少一个n的字符串
n*:匹配任何包含零个或多个n的字符串
n?:匹配任何包含另个或一个n的字符串

JavaScript严格模式(use strict)
使用"use strict"指令
"use strict"指令在JavaScript1.8.5中新增。
它不是一条语句，但是是一个字面量的表达式，在JavaScript旧版中会被忽略。
"use strict"的目的是指定代码在严格条件下执行。

严格模式下：
不能使用未声明的变量。
不允许删除变量或者对象。
不允许删除函数。
不允许变量重名。
不允许使用八进制。
不允许使用转义符。
不允许对只读属性赋值。
不允许对一个使用getter()方法读取的属性进行赋值。
不允许删除一个不允许删除的属性。
变量名不能使用"eval"字符串
变量名不能使用"arguments"字符串
在作用域eval()创建的变量不能被调用
禁止this关键字指向全局对象。
严格模式新增了一些保留字：
implements
interface
let
package
private
protected
public
static
yield

JavaScript this关键字：
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JavaScript let和const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

JavaScript JSON：
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
1）什么是JSON？
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
示例：以下JSON语法定义了sites对象：3条网站信息（对象）的数组
{“sites”:[
{“name”:“Runoob”, “url”:“www.runoob.com”},
{“name”:“Google”, “url”:“www.google.com”},
{“name”:“Taobao”, “url”:“www.taobao.com”}
]}
2）JSON 格式化后为 JavaScript 对象
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
3）JSON语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
4）JSON数据-一个名称对应一个值
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：“name”:“Runoob”
5）JSON对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对：
{“name”:“Runoob”, “url”:“www.runoob.com”}
6）JSON数组：
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：
“sites”:[
{“name”:“Runoob”, “url”:“www.runoob.com”},
{“name”:“Google”, “url”:“www.google.com”},
{“name”:“Taobao”, “url”:“www.taobao.com”}
]
7）JSON字符串转换为Javascript对象
通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = ‘{ “sites” : [’ +
‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ +
‘{ “name”:“Google” , “url”:“www.google.com” },’ +
‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后，在你的页面中使用新的 JavaScript 对象：
var text = ‘{ “sites” : [’ +
‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ +
‘{ “name”:“Google” , “url”:“www.google.com” },’ +
‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;

obj = JSON.parse(text);
document.getElementById(“demo”).innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

Javascript void(0)
我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

残心花
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript的用法
qq_34754747的博客
12-27 156
1.Js框架一般包括html,head,body三部分。 <!DOCTYPE html> <html> <head> .... .... </head> <body> ....... </body> </html> 2. 函数撰写时，需写在script里，才会被认为是函数。.getElementB...
javascript
yyx1958025835的博客
06-02 261
<script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script> 可直接写在script里
JavaScript 基础概要
qq_41835813的博客
03-29 393
一个简单的Jsp程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一次</title> </head> <script> function displayDate(){ document.getEl...
2021-08-03
weixin_45736311的博客
11-18 88
JS 1.显示日期： <script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } ..... <button type="button" onclick="displayDate()">显示日期</button> 2.点击一秒后出现提示框 <button onclick="myFunction()">点我</button> <
JavaScript中document.getElementById解析
Quest_sec的博客
03-31 6301
话外：函数名一定要有大写字母=.= JavaScript中document.getElementById和document.write 1.JavaScript访问某个HTML元素，可以使用document.getElementById（id）方法。 如 &amp;lt;body&amp;gt; &amp;lt;p id=&quot;demo&quot;&amp;gt;Hello&amp;lt;/p&amp;
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
Html之getElementById()方法&getElementsByTagName()方法示例
長い冬が越さなければ春が来ない。
11-20 3475
HTML DOM 对象 - 方法和属性一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：innerHTML - 节点（元素）的文本值parentNode - 节点（元素）的父节点ch
JavaScript学习笔记
大道至简，知易行难
05-31 833
一、JavaScript简介 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript：写入 HTML 输出 document.write("This is a he
js扩展
Aaron9451的博客
07-03 251
操作表单function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } }表单操作document.getElementById("frm1").submit();javascript的do...
js中document.getElementById()用法
热门推荐
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
11.将例3.13中的Time类声明为Date类的友元类，通过Time类中的display函数引用Date类对象的私有数据，输出年、月、日和时、分、秒。
qq_41680042的博客
05-25 2万+
#include <iostream> using namespace std; //class 中使用了void display(Date&);需要对date提前引用声明 class Date; //定义time类 class Time { public: Time(int, int, int); //成员函数，形参是date的引用 void display(Date&); private: ...
javaScript
miweilai2007的博客
10-11 393
JavaScript 可以通过不同的方式来输出数据： 使用 window.alert() 弹出警告框。 使用 document.write() 方法将内容写到 HTML 文档中。 使用 innerHTML 写入到 HTML 元素。 使用 console.log() 写入到浏览器的控制台。 JavaScript 对大小写敏感。 JavaScript 对大小写是敏感的。
JavaScript语法
index0000001的博客
06-29 564
数字字面量：整数，小数，科学计数（e）字符串字面量：用单引号’’ or双引号""表达式字面量：用于计算 ：5+6数组（Array）字面量 定义一个数组：对象（Object）字面量 定义一个对象：函数（Function）字面量 定义一个函数： js中的注释：// js数据类型： number 数字string 字符串boolean 布尔object 对象function 函数symbol 标记object 对象date 时间array 数组nullnudefined局部变量声明之后就只能在函数
部 JavaScript 变量
06-01 63
 在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的： function myFunction(a,b) { if (a>b) { return; } x=a+b } 如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。 局 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
使用 HTML DOM 来分配事件
aa0101002的博客
03-10 173
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件： 这是什么意思呢？我们先看一段HTML代码： <!DOCTYPE html><html><body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button ...
vue获取promise中的值
qq_38918953的博客
05-28 3万+
方法一： async和await要一起用 async res => { const result = await getPanelData('', this.from_uid); } 方法二 const result = getPanelData('', this.from_uid).then(function (result) { console.log(result) }...
javaScript基础
最新发布
07-04
以下是一些JavaScript的基础概念： 1. **变量**：在JavaScript中，不需要预先声明就可以使用变量。可以直接赋值给变量名。例如： ```javascript let name = "John Doe"; ``` 2. **数据类型**：主要有字符串...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值