JavaScript——入门

于 2021-03-28 19:49:54 发布
阅读量247 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46114837/article/details/115285954
版权
这篇博客详细介绍了JavaScript的基础知识，包括如何添加注释、声明变量、理解变量作用域、使用JSON格式以及创建和使用函数。此外，还讲解了数据类型转换，如Number和String方法的运用，以及如何通过typeof检测数据类型。最后提到了正则表达式和一些基本的输出方法，如alert、document.write和innerHTML。
摘要由CSDN通过智能技术生成

JavaScript——入门

一、注释

  1. JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

  2. JavaScript 不会执行注释。

    • 单行注释以 // 开头

    • 多行注释以 /* 开始，以 */ 结尾

    • 我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性

二、声明变量

在 JavaScript 中创建变量通常称为"声明"变量。

赋值时，被赋值的var的类型是所赋值的类型

/*
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
*/
var lastname="Doe", age=30, job="carpenter";

//声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";

//一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;
//x,y 为 undefined， z 为 1。

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串
var x=true;
var y=false;

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//或
var cars=new Array("Saab","Volvo","BMW");

/*
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：*/
var person={firstname:"John", lastname:"Doe", id:5566};
//上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

//空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

/*
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
*/
cars=null;
person=null;

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
  • 我们使用 var 关键词来声明变量
  • 使用var关键字声明的全局作用域变量属于window对象。
  • 使用let关键字声明的全局作用域变量不属于window对象。
  • 使用var关键字声明的变量在任何地方都可以修改。
  • 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。
  • 在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。
  • let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。
  • 在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。
  • 在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量
  • const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:
  • var关键字定义的变量可以先使用后声明。
  • let关键字定义的变量需要先声明再使用。
  • const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改

三、JSON

JSON 是用于存储和传输数据的格式，JSON 通常用于服务端向网页传递数据

JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组
<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
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;
</script>


<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
/*
不加括号输出函数表达式：function() { return this.firstName + " " + this.lastName; }
加括号输出函数执行结果：John Doe
*/

四、函数

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

//计算结果返回
function myFunction(a,b)
{
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

五、运算符、逻辑比较、判断语句、循环语句

与C语言等类似

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}



if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}



var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;


for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}


while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}


for (i=0;i<10;i++)
{
    if (i==3) break;
    x=x + "The number is " + i + "<br>";
}

for (i=0;i<=10;i++)
{
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

六、转化

  1. 全局方法 String() 可以将数字转换为字符串
  2. 全局方法 String() 可以将布尔值转换为字符串
  3. 全局方法 String() 可以将日期对象转换为字符串
  4. 全局方法 Number() 可以将字符串转换为数字。字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).空字符串转换为 0。其他的字符串会转换为 NaN (不是个数字)
  5. 全局方法 Number() 可将布尔值转换为数字
  6. 全局方法 Number() 可将日期转换为数字
  7. 当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型
  8. 当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法
//typeof 操作符来检测变量的数据类型
typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" +
    typeof 3.14 + "<br>" +
    typeof NaN + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34} + "<br>" +
    typeof new Date() + "<br>" +
    typeof function () {} + "<br>" +
    typeof myCar + "<br>" +
    typeof null;
</script>

//constructor 属性返回所有 JavaScript 变量的构造函数
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

<p> constructor 属性返回变量或对象的构造函数。</p>
<p id="demo"></p>
<script>
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;
</script>

/*
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
*/
String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

//Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()

//全局方法 String() 可以将布尔值转换为字符串。
String(false)        // 返回 "false"
String(true)         // 返回 "true"
//Boolean 方法 toString() 也有相同的效果。
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

//Date() 返回字符串。
Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

//全局方法 String() 可以将日期对象转换为字符串。
// 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      

//Date 方法 toString() 也有相同的效果。
obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

/*
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
*/
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN


//全局方法 Number() 可将布尔值转换为数字。
Number(false)     // 返回 0
Number(true)      // 返回 1

//全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d)          // 返回 1404568027739
//日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime()        // 返回 1404568027739


//当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5


//当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
//数字和布尔值也经常相互转换：
myVar = 123             // toString 转换为 "123"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

七、正则表达式

详情访问菜鸟教程

//引用外部js文件
<script src="myScript.js"></script>

/*
输出流
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台
*/
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
/*
您可以在文本字符串中使用反斜杠对代码行进行换行；
非法语句 document.write \ 
("你好世界!");
*/
document.write("你好 \
世界!");
/*
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
改变输入的样式，将id为demo的内容改为Hello JavaScript!，且将字体格式改为红色*/
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
    x.style.color="#ff0000";           //改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>



/*
切换图片，实现效果
（延展：图片的轮播可采用数组存放图片照片地址的方法实现）
onclick 事件会在元素被点击时发生，使用时需在特定的函数名后搭配()
onclick 属性可以使用与所有 HTML 元素，除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>
*/
<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">
<p>点击灯泡就可以打开或关闭这盏灯</p>


/*
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框
isNaN() 函数用于检查其参数是否是非数字值
*/
<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>

<script src="myScript.js"></script>

本文均总结于菜鸟教程，详情请转至教程

幽巷问酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript入门
野尘
03-31 247
JavaScript入门 一、简介： 基于对象和事件驱动的脚本语言，应用于客户端。 —基于对象：提供好了对象，直接拿来使用，不需要new对象 —事件驱动：js提供动态效果，由事件来触发。 —客户端：浏览器 Java和JavaScript的区别： a. 二者无任何关系 b. Java是面向对象，js是基于对象 c. Java是基于虚拟机，js是基于浏览器 d. Java是强类型语言，js是弱类型语言...
JavaScript中的let，const，var
weixin_41461089的博客
10-20 115
使用var关键字声明的全局作用域变量属于window对象。 使用let关键字声明的全局作用域变量不属于window对象。 使用var关键字声明的变量在任何地方都可以修改。 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。 在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。 let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。 在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。 在相同的作用域
Java transient关键字使用总结
哲洛不闹的专栏
12-28 106
哎，虽然自己最熟的是Java，但很多Java基础知识都不知道，比如transient关键字以前都没用到过，所以不知道它的作用是什么，今天做笔试题时发现有一题是关于这个的，...
transient关键字
momo131422的博客
03-04 115
先解释下什么是序列化 我们的对象并不只是存在内存中，还需要传输网络，或者保存起来下次再加载出来用，所以需要Java序列化技术。 Java序列化技术正是将对象转变成一串由二进制字节组成的数组，可以通过将二进制数据保存到磁盘或者传输网络，磁盘或者网络接收者可以在对象的属类的模板上来反序列化类的对象，达到对象持久化的目的。 什么是transient？ 简单来说就是，被transient修饰的变量不能被序...
transient
weixin_30265171的博客
12-18 101
我们都知道一个对象只要实现了Serilizable接口，这个对象就可以被序列化，java的这种序列化模式为开发者提供了很多便利，我们可以不必关系具体序列化的过程，只要这个类实现了Serilizable接口，这个类的所有属性和方法都会自动序列化。 然而在实际开发过程中，我们常常会遇到这样的问题，这个类的有些属性需要序列化，而其他属性不需要被序列化，打个比方，如果一个用户有一...
JavaScript基础教程——入门必看篇
10-22
本文将深入探讨JavaScript的基础知识，帮助初学者快速入门。 首先，JavaScript是一种基于对象和事件驱动的描述性语言，这意味着它依赖于已有的对象来执行任务，并通过事件（如用户点击按钮）来触发代码执行。它也是...
javascript——PDF教程大合集.rar
05-12
javascript——PDF教程大合集 1、100个直接可以拿来用的JavaScript实用功能代码片段 2、JavaScript DOM编程艺术（中文） 3、JavaScript高级程序设计（第3版）中文 高清 完整 4、JavaScript脚本特效编程给力起飞 5、...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
transient关键字详解
热门推荐
u013207877的专栏
09-18 2万+
1，transient的用途及使用方法1，用途　　我们知道，当一个对象实现了Serilizable接口，这个对象就可以被序列化，我们不关心其内在的原理，只需要了解这个类实现了Serilizable接口，这个类的所有属性和方法都会自动序列化。而在开发过程中，我们可能要求：当对象被序列化时（写入字节序列到目标文件）时，有些属性需要序列化，而其他属性不需要被序列化，打个比方，如果一个用户有一些敏感信息（如
transient的用途及使用方法
qq_36312376的博客
08-04 699
1，用途 　　我们知道，当一个对象实现了Serilizable接口，这个对象就可以被序列化，我们不关心其内在的原理，只需要了解这个类实现了Serilizable接口，这个类的所有属性和方法都会自动序列化。而在开发过程中，我们可能要求：当对象被序列化时（写入字节序列到目标文件）时，有些属性需要序列化，而其他属性不需要被序列化，打个比方，如果一个用户有一些敏感信息（如密码，银行卡号等），为了安全起见...
transient 关键字
hanwb1的博客
11-29 244
对于不想进行序列化的变量，使用transient关键字修饰。 transient关键字的作用是：阻止实例中那些用此关键字修饰的的变量序列化；当对象被反序列化时，被transient修饰的变量值不会被持久化和恢复。 transient只能修饰变量，不能修饰类和方法。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值