JavaScript的简单认识

5 篇文章 0 订阅
5 篇文章 0 订阅

作为前端相关的学习过程中,掌握JavaScript技术是必不可少的一部分,学习过程中整理老师讲课内容的学习笔记也是帮助自己学习的一个好办法

首先在进行具体操作之前应当对JavaScript有个简单了解。

作为一个完整的JavaScript的实现应该包含:

  • 核心 ECMAScript

  • 文档对象模型 DOM

  • 浏览器对象模型 BOM

    1) ECMAScript
    ECMA-262 定义的EMCAScript与Web浏览器没有依赖关系。浏览器仅是ECMAScript实现可能的宿主环境之一,宿主环境不仅提供基本的ECMAScript实现同时也提供该语言的扩展,以便语言与环境之间对接交互。扩展如DOMECMA规定了这门语言的组成部分。
    2) DOM(文档对象模型)
    DOM(Document,Object Model) 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。
    3) BOM(浏览器对象模型)
    BOM(Browser Object Model),开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口;移动,缩放,关闭浏览器的功能;提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象;提供用户显示器分辨率详细信息的screen对象;对cookies的支持;支持XMLHttpRequest,IE中的ActiveXObject自定义对象。

兼容性

JavaScript的三个组成部分,在当前五个主要浏览器(IE,Firefox,Chrom,Safari,Opera)中得到了不同程度支持,其中,所有浏览器对ECMAScript3支持大体都还不错,对ECMAScript支持程度越来越高,但对DOM的支持彼此相差较多,对已经正式纳入HTML5标准的BOM来说,尽管各浏览器都实现了某些总所周知的共同特性,但其他特性还因浏览器而异。

js运行环境 JS解析器

  1. 浏览器:依赖于html去运行,script标签,内部js或者外部js。
  2. NodeJS:js文件,使用node XXX.js 去运行。
  3. repl环境去运行js代码。

在HTML中使用JavaScript

1. 通过<script>元素,有如下几个属性

	type : 可看做是language的替代属性,表示编写代码使用的脚本语言的内容类型,MIME这个属性非必须,默认是text/javascript
  	src 	: 表示包含要执行代码的外部文件
  	async 	:立刻下载脚本,但应妨碍页面中其他操作(只针对外部脚本文件)
  	charset : 指定src属性指定的代码的字符集,大多数浏览器会忽略这个值。
  	defer 	: 表示脚本可以延迟到文档全部被解析和显示之后再执行(只针对外部脚本文件)
  	language: 已废弃

2. 两种方式:

1)直接嵌入在页面中

  	```
    <script type="text/javascript">
		//javascript代码
		function(){
		  
		}
	</script>
	```

2). 包含外部的js文件

<script type="text/javascript" src="test.js"></script>

(后标签不要省略,不符合html规范)
【注意事项】
1.不要在<script>标签中再写任何代码,即使写了,也没有任何效果,不会执行。
2.src 可以跨域访问 。
3.标签位置<head>标签中:等到全部的js代码都被下载,解释和执行完成后才能开始呈现页面的内容。可将代码引用放到<body>元素放到内容后面。
4.延迟脚本 defer=“defer”,延迟至浏览器遇到</html>标签后再执行。如果有多个延迟脚本,并不会按照顺序执行。最好包含一个延迟脚本,并且将其放在页面最底部,该属性适用于外部引用的js

  • 关于<noscript>标签
    当浏览器不支持脚本或者浏览器支持脚本,脚本被禁用,可以让页面平稳的退化。
    <noscript>
    本页面需要浏览器支持(启用)javascript
    </noscrpt>

基础语法

1)区分大小写

  	typeof 关键字, typeOf 非关键字。

2)标识符
指变量,函数,属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符:
1.字母,数字,下划线,$ 组成
2.只能以字母,下划线,$ 开头。
3.不能将关键字作为标识符。命名采用驼峰式命名。

3)注释

	//单行注释
	/*多行注释*/

4)语句

	每个语句以分号结尾,如果省略分号,由解析器确定语句的结尾,即分号可以省略,但是我们要求每个语句的末尾都应该有分号。

关键字保留字

  1. 关键字:(在js中有特殊功能)
 		break		do 		instanceof	typeof
	    case		else	new,		var
	    catch		finally	return,		void
	    continue	for		switch,		while
	    debugger	this	function	with
	    default		if 		throw		delete
	    in 			try
  1. 保留字:(将来可能成为关键字)
	abstract	enum	int			short
    boolean		export	interface	static
    byte		extends	long		super
    char		final	native		synchronized
    class		float	package		throws
    const		goto	private		transient
    debugger	double	implements	protected
    volatile	import	public

变量

定义变量时使用var操作符
var 变量名;
声明 var message;
初始化 message = “hello”
声明并初始化 var message = “hello”;
定义多个变量

var msg1 = "hello";
			var msg2 = "world";

局部变量与全局变量:

1) 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量。

function test(){
			      var message = "hello";  
	      	}
	      	test();
	      	alert(message); //错误

2) 如果在函数中定义变量没有加var,该变量为全局变量

  	function test(){
		      message = "hello";  
     	  }
      	test();
      	alert(message); //可以访问
      	

字符串:

1.拼接方式

a. 使用 + 可以直接拼接
b. 在ES6或ESC2015中直接用模板字符串(使用反引号``,当要用变量按照语法$符号和大括号{},写入变量的名字)

 eg:const hello = `My name is ${name} and my age is ${age}`;
        console.log(hello);

2.属性和方法(注:属性没有括号,方法才会用到括号,方法是一个函数对象)
字符串中的字符数量可用length属性 变量.length
uppercase/lowcase 方法转化成大写/小写 变量.toUpperCase()/变量.toLowCase()
substring进行字符截取 变量.substring() 有两个索引,开始和结束位置
split进行字符串分割到数组中 变量.split() 括号里面带参数,就是你要按什么分割每个字符, 直接不写空格用’’

代码规范

1 标识符命名规范

  • 变量、函数的命名必须要有意义
  • 变量的名称一般用名词
  • 函数的名称一般用动词

2 操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环,跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个桃子呢');
}

3 单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个桃子呢');
}

4 其他规范

关键词、操作符之间后加空格

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值