JavaScript基础快速入门总结


今天花了一天的时间粗略把JavaScript基础的东西学了一遍。在学web后端的时候总想把前端效果弄好看一点,于是就硬着头皮花时间把html/css学了(反正迟都要学的),现在做前端效果也不至于像之前的那么丑了,然后学JavaScript基础发现有很多知识差不多(其实掌握了一门语言再学另一门语言就会觉得很好上手),所以就不一一例举其他相同内容了。上面的内容是我觉得有必要了解一下的。

JavaScript的用法

  1. 用<script >标签写在body中或者head中

写在head中
写在body中

  1. 可以写在html标签里
<button onclick="alert('Hello world!')">点我</button>
  1. 可以写在超链接的href属性中
<a href="JavaScript:alert('Hello world!')">a标签</a> 

4. 可以写在外部,在<script>标签的”src”属性引入.js文件(常用)
在这里插入图片描述
注意 1.JavaScript代码是由上到下有顺序运行的。
2.外部JavaScript文件不使用<script>标签,直接写JavaScript代码。
3JavaScript标签一旦用于引入外部文件,就不能再里面写代码了,即使写了浏览器也会忽略,如果需要可以再创建一个新的<script>标签
在这里插入图片描述

Javascript输出

  1. 使用alert() 弹出警告框
	<script>  alert("Hi"); 	</script>
  1. 使用document.write()方法将内容写到HTML文档中。
 <p>Hello</p>
	<script>
		document.write("World");
	</script>

结果:
在这里插入图片描述

  1. 使用innerHTML写到HTML元素中
    使用“id”属性来标识HTML元素,用于修改元素的HTML内容
 	<p id="demo">Hello</p>
	<script>
		document.getElementById("demo").innerHTML="World";
	</script>

结果:

在这里插入图片描述

  1. 使用console.log() 写到浏览器控制台中。
	<p id="demo">控制台输出</p>
	<script>
		console.log("Hi");
	</script>

在这里插入图片描述

对象定义

对象也是一个变量,但对象可以包含多个值(多个变量)

  1. 可以说"JavaScript 对象是变量的容器"
  2. 键值对通常写法为 name : value (键与值以冒号分割)
  3. 每个值(变量)用逗号隔开
    在这里插入图片描述

函数语法

使用关键词 function,可以使用无参函数,有参函数,带返回值函数。
例:有参函数
在这里插入图片描述
在这里插入图片描述

正则表达

语法:/正则表达式主体/修饰符(可选)

例:var str = /test1/ i
/test1/i 是一个正则表达式。
test1 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

两个常用于字符串方法 : search() 和 replace()

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

	<p >搜索字符串world,并显示匹配的起始位置</p>
	<p id="demo"></p>
	<script>
		var str = "Hello WORLD";
		var n = str.search(/r/i);
		document.getElementById("demo").innerHTML = n;
	</script>

运行结果
在这里插入图片描述

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

<p >搜索字符串world,并显示匹配的起始位置</p>
	<p id="demo"></p>
	<script>
		var str = "Hello WORLD";
		var n = str.replace(/world/i,"JavaScript");
		document.getElementById("demo").innerHTML = n;
	</script>

运行结果
在这里插入图片描述

使用RegExp对象

RegExp 对象是一个预定义了属性和方法的正则表达式对象
1.Test()方法
用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
2.exec()
用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

This关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

1.在方法中,this 表示该方法所属的对象。
2如果单独使用,this 表示全局对象。
3在函数中,this 表示全局对象。
4在函数中,在严格模式下,this 是未定义的(undefined)。
5在事件中,this 表示接收事件的元素。
6类似 call() 和 apply() 方法可以将 this 引用到任何对象。

Let和const

Let声明的变量只在let命令所在的代码块内有效。

在局部(如函数体内)、全局使用 var和let关键字声明的变量优点类似
在这里插入图片描述

但在某些情况下,要区分let和var的用法。

  1. 循坏作用域
    在这里插入图片描述在这里插入图片描述
    在第一个例中,使用var关键字它声明的变量是全局的,包括循环体内与循环体外。
    在第二个实例中,使用 let 关键字, 它声明的变量作用域只在循环体内,循环体外的变量不受影响。

2在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量:
反之也不能(用var来重置let)
在这里插入图片描述

3在相同的作用域或块级作用域中,不能使用 let 关键字来重置 let 关键字声明的变量:
在这里插入图片描述

const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
在这里插入图片描述

>const定义常量与使用let 定义的变量相似:

• 二者都是块级作用域
• 都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别:
• const声明的常量必须初始化,而let声明的变量不用
• const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。


这也是第一次写文章,主要是巩固一下今天所学的内容。希望也对刚学习JavaScript基础的同学们有所帮助哟!! 嘻嘻~~

猜你喜欢

转载自blog.csdn.net/BG777/article/details/107291689