原生JavaScript----语言基础（小白入门）

最新推荐文章于 2022-04-30 13:44:28 发布

原创最新推荐文章于 2022-04-30 13:44:28 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #css #html #html5

js笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了JavaScript语言的基础知识，包括其组成（ECMAScript、DOM和BOM）、引入方式、注释技巧、常用方法如console和DOM操作，以及变量、数据类型和转换等内容。深入浅出地讲解了JavaScript编程的基础概念。

JavaScript----语言基础

一、组成

1.核心(ECMAScript)
	ECMAScript是一个标准 。因为网景的布兰登(Brendan Eich)开发了JavaScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。
2.文档对象模型(DOM)
	Document Object Model
3.浏览器对象模型(BOM)
	Browser Object Model

二、引入及写法

1.内部书写:写在head或者body中，只能调用它之前的代码。
	(1).位于 head 部分的脚本：当你把脚本放置到 head 部分后，必须等到全部的javascript代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到body标签才开始呈现内容）。
	(2).位于 body 部分的脚本：为了避免上述问题，现代web应用程序一般把javascript引用放在body中，放在页面内容后面。这样，在解析包含的javascript代码之前，页面内容将完整呈现。
2.外部引入:新建一个新的.js文件，用<script src=""></script>在hmtl文件中引用
	<script src="./js/a.js"></script>
	script用src引用外部文件，所有src指向的文件中所用到的地址都是指向相对当前页面的。(嵌入)
	
	<link rel="stylesheet" href="./css/a.css">
	所有href 指向文件中所用到的地址都是指向这个对于链接文件的，而不是指向当前网页的。（建立联系）
	
	img标签在加载过程中，是并行同时加载的，这叫做异步；
	script和link加载外部文件时，是一个加载完成后再继续加载下一个，这叫做同步。
	
	<script src="./js/a.js" async></script>
	asyna异步加载，不需要等待a.js加载完就可以继续向后同时加载b.js，所有的js被加载后立即执行。

	<script src="./js/a.js" async defer></script>
	defer 当所有内容加载完成后执行当前js内容。

	 DOM树就是html标签树
	 CSS根据DOM树结构形成了CSS树
	 DOM树和CSS树合并形成DOM渲染树
	 然后加载图片
	 最后defer

3.直接写在标签内
	<p onclick="alert('你好');">点击我</p>

三、注释

作用： 1.可以解释代码内容	
       2.将部分代码暂时封存
写法：1.单行注释
	// 注释内容 不可换行   快捷键：ctrl+/	
     2.多行注释
        /* 注释内容  可以换行 */  快捷键：ctrl+shift+/

四、常用方法

1.console.log("aa") 输出日志文件
2.alert("aa")  警告消息框 、 ok对话框
3.confirm(“是否愿意晚上吃一顿便饭？”)    
	确认消息框、确定取消对话框，可以得到确定或取消的结果true,false
4.prompt("你今年多大岁数了?","20岁")    弹出输入框----允许用户输入，并且返回输入的结果。
	输入框的提示内容，默认结果
5.document.body.innerHTML="你好"；//将body里面的内容换成"你好"字符
6.document.write("你好");在文档中写入"你好" 
	write是只针对document的，innerHTML是针对所有标签的
7.var div1=document.getElementById("div1");根据id在文档中获取div1的元素
8.点击事件
	div1.onclick=function(){
	    div1.innerHTML="不错，你点中了"；
	}
9.给div1增加行内样式
	div1.style.width = "50px";
	div1.style.height = "50px";
	div1.style.backgroundColor = "red";

五、语句块

语句块 (blocks) 是由一些相互有关联的语句构成的语句集合。
通常来说，用 {} 括起来的一组 Javascript 语句称为语句块 (blocks)。
在语句块里面的每句语句以分号 (;) 表示结束 ，但是语句块本身不用分号。
语句块 (blocks) 通常用于函数和条件语句中

六、变量

1.JavaScript关键字
	关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。
	按照规则，关键字也是语言保留的，不能用作标识符！
	break  do  instanceof typeof
	case  else  new  var
	catch  finally  return  void
	continue    for  switch  while
	function  this  with   default
	if    throw  delete  in try
2.JavaScript保留字
	保留字有可能在将来被用作关键字来使用，不能用作标识符！
	abstract     int     short     boolean
	export   interface     static      byte
	extends     long     super    char
	final     native     class	    float
	throws      const       goto      private
	double     import      public
3.不能使用windows属性作为标识符
4.变量：var
		1. 一次声明一个变量。例句如下：
			var a; 
		2. 同时声明多个变量，变量之间用逗号相隔 。例句如下：  
			var a, b, c; 
		3. 声明一个变量时，同时赋予变量初始值。例句如下：
			var a=2 ; 
		4. 同时声明多个变量，并且赋予这些变量初始值，变量之间用逗号相隔 。例句如下：
			var a=2, b=5;

	a=3;
	console.log(a);
	ES5中，如果没有定义直接赋值，该变量就是这个值

	console.log(a);
	如果没有定义和赋值，直接调用，就会报错

	var a;
	console.log(a);
	如果定义没有赋值，直接调用的结果是undefined

	所有变量名称必须使用字母或者下划线开头，后面的内容包含有字符，数字和下划线

	var namesNum=5;
	命名中含有大小写的方式叫做驼峰式命名法
	变量名是表意

	_width   临时变量，以下划线开头
			在参数和类中使用
5.常量：const
	const ABC=4;
	ABC=3； //×
	常量，设置值后，不能重新赋值

	要求const定义常量时必须全部字母大写，单词使用下划线区分
	const RECT_WIDTH = 200;

七、数据类型

1.字符串String：字符型：被单引号、双引号所引起来的都是字符型
		var a="a";
		var a="10";
		var a='abc';
		var a=`abc`;
2.数值Number:
		var a=1;
		var a=1.1;
		var a=-5;
		var a=3e+2; //3*10(2)
		var a=3e-2; //3*10(-2)
		var a=065; //8进制写法，不允许出现大于7的值，ES6取消不能使用
		var a=0xFF; //16进制写法
		console.log(a);
3.布尔Boolean:
		var a=true;
		var b=false;
4.对象Object:
		var a={a:1,b:2}
5.Null: 将对象设置为空值
		var a=null;
6.Undefined: 未定义，定义了变量没有赋值
		var a = undefined;
		var b;
		console.log(a,b);
7.typeof操作符：
		typeof操作符是用来检测变量的数据类型。
		对于值或变量使用typeof 操作符会返回如下字符串。
		var a=null; //object类型
		console.log(typeof a);//判断类型

八、数据类型转换

1.Number()-将字符串转换为数值型
	（1）字符串只要含有非数字就会转换为NaN,否则转换为数值
			var a="a";//NaN
			var a="4";//4
			a=Number(a);
			console.log(a);
	（2）布尔型转化为数值
			var a=true;//1
			var a=false;//0
			a=Number(a);
	（3）   var a=undefined;
		    a=Number(a);//NaN
	（4）   var a=null;
		    a=Number(a);//0
	（5）   console.log(Number({a:1}));//object-->NaN
2.parseInt()-将字符串转化为整型数值
	（1）从开始向后转换，遇到字符停止（如果开始是数值就可以转换）
			a=parseInt("a");  //NaN
			a=parseInt("4a"); //4
	（2）将字符串按照指定的进制类型转换，第二个是进制类型
			var a="32";
			a=parseInt(a,16);  
			console.log(a);  //50
3.parseFloat()—将字符串转化为浮点数
4.String()函数能够将任何类型的值转换为字符串。
   toString() undefined和null不能用
   String() 所有都可以用
	（1）数值转换为字符
			var a=5;
			a=String(a);
			console.log(a);
	（2）将数值按照指定进制类型转换为字符串，进制2-36
			var a=5;
			a=a.toString(2); //101
	（3）保留小数点后2位
			a=a.toFixed(2);
			保留小数点后1位，四舍五入，保留1位注意误差
	（4）保留指定长度的数值字符串(有效数字、四舍五入)
			var a=0.152;
			a=a.toPrecision(2);//0.15
	（5）保留2位小数（科学计数法）
			var a=0.152;
			a=a.toExponential(2);//1.52e-1
	（6）本地方式转为字符串
			a=a.toLocaleString();
	（7）布尔值转换为字符串
			"true"  "false"
	（8）undefined转换为字符串
			var a=undefined;
			a=String(a);//"undefined"
	（9）null转换为字符串
			var a=null;
			a=String(a);//"null"
	（10）object转换为字符串
			var a={a:1,b:2};
			a=String(a);//[object object]
			任何object转换为字符串，结果都是[object][object]
5.Boolean()，将一个值转换为其对应的Boolean值。
	（1）"",0,undefined,null,false,NaN 转换后都是false,除此之外都是true
	（2）数组转为boolean
			var arr=[];
			var b=Boolean(arr);//true
			console.log(![]==[]);//true
			//![] -->false;
			//[1,2,3] -->"1,2,3"
			//[] -->""
			cnsole.log([]==false);//true
			console.log(![]==false);//true
	（3）遇到!需要将值转换为布尔值取反
			var a="";
			if(!a){
				//6种
			}
6.Object(),将一个值转换为object
	（1）var a=3;
		a=Object(a);
		console.log(a);//3