一个月入15K从事前端存留的JavaScript学习笔录（一）

目录一、浏览器说明二、网页、网站和应用程序三、演示JavaScript的强大四、JavaScript介绍1. JavaScript是什么2. JavaScript最初的目的3.JavaScript和HTML、CSS的区别4.JavaScript的组成五、JavaScript的书写位置六、变量1.什么是变量2．如何使用变量3.变量在内存中的存储4.变量的命名规则和规范七、数据类型1.简单数据类型2. Number类型3. String类型4. Boolean类型5. Undefined和Null6.复杂数据类型7.获取变量的类型8.字面量八、注释1.单行注释2.多行注释九、数据类型转换1.转换成字符串类型2.转换成数值类型3.转换成布尔类型十、运算符1.算术运算符2.比较运算符：3.逻辑运算符4.赋值运算符5.运算符的优先级Js第一天学习总结一、浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。可以显示页面的一个软件国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari、Opera、Google Chrome、等，浏览器最经常使用的客户端程序。常用的五大浏览器：chrome、Firefox、safari、ie、opera； 二、网页、网站和应用程序网页：单独的一个页面网站：一些列相关的页面组成到一起应用程序：可以和用户产生交互，并实现某种功能。三、演示JavaScript的强大http://impress.github.io/impress.js/http://naotu.baidu.com/https://codecombat.com/https://ide.codemao.cn/需要翻墙https://developers.google.com/blockly/blockly迷宫https://blockly-games.appspot.comblockly迷宫不需要翻墙https://blockly.uieee.com/四、JavaScript介绍1. JavaScript是什么JavaScript编程语言   流程控制Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript运行在客户端(浏览器)的编程语言JavaScript是一种运行在客户端的脚本语言是一门动态类型的语言是一门基于对象的语言JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 2. JavaScript最初的目的最初的目的是为了处理表单的验证操作。JavaScript现在的意义(应用场景)JavaScript发展到现在几乎无所不能。1.网页特效2.服务端开发(Node.js)3.命令行工具(Node.js)4.桌面程序(Electron)5. App(Cordova)6.控制硬件-物联网(Ruff)7.游戏开发(cocos2d-js)3. JavaScript和HTML、CSS的区别1. HTML：提供网页的结构，提供网页中的内容2. CSS:用来美化网页3. JavaScript:可以用来控制网页内容，给网页增加动态的效果4. JavaScript的组成 ECMAScript - JavaScript的核心定义了JavaScript的语法规范  JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关 BOM -浏览器对象模型 一套操作浏览器功能的API通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 DOM -文档对象模型 一套操作页面元素的APIDOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作五、JavaScript的书写位置写在行内写在script标签中 写在外部js文件中，在页面引入但是需要在html的页面中引入 script的标签中的src="js的路径"注意点：引用外部js文件的script标签中不可以写JavaScript代码 注意问题[if !supportLists]1. [endif]在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行[if !supportLists]2. [endif]如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行[if !supportLists]3. [endif]script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准[if !supportLists]4. [endif]有可能会出现这种情况:script标签中可能同时出现type和language的写法.[if !supportLists]5. [endif]script标签在页面中可以出现多对[if !supportLists]6. [endif]script标签一般是放在body的标签的最后的,有的时候会在head标签中,目前讲课的时候都在body标签的后面(body中的最后)[if !supportLists]7. [endif]如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码六、变量1. 什么是变量变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据使用变量可以方便的获取或者修改内存中的数据2．如何使用变量var声明变量var age;同时声明多个变量var age, name, sex;age = 10;name = 'zs';var age;同时声明多个变量var age, name, sex;age = 10;name = 'zs';变量的赋值 var age;age = 18;同时声明多个变量并赋值var age = 10, name = 'zs';3. 变量在内存中的存储 变量---作用,存储数据的或者是操作数据变量声明(有var 有变量名字,没有值)变量初始化(有var 有变量名字,有值)4. 变量的命名规则和规范规则-必须遵守的，不遵守会报错由字母、数字、下划线、$符号组成，不能以数字开头不能是关键字和保留字，例如：for、while。区分大小写变量名必须有意义遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword不能使用关键字(系统自带的一些单词,不能使用)变量的交换的第一个思路:使用第三方的变量进行交换第二种方式交换:一般适用于数字的交换//扩展的变量的交换:只需要看代码,不需要理解---位运算    var num1 = 10;    var num2 = 20;    num1 = num1 ^ num2;    num2 = num1 ^ num2;    num1 = num1 ^ num2;    console.log(num1, num2);七、数据类型1. 简单数据类型Number、String、Boolean、Undefined、Null2. Number类型十进制var num = 9;进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。十六进制var num = 0xA;数字序列范围：0~9以及A~Fvar num2 = 0x1;console.log(num2); //1var num5 = 0x0A;console.log(num5); //10var num6 = 0x0F;console.log(num6); //15var num7 = 0x10;console.log(num7); //16var num7 = 0x1f;console.log(num7); //31var num3 = 0x13;console.log(num3); //19var num4 = 0x15;console.log(num4); //21八进制var num1 = 07;   //对应十进制的7var num2 = 019;  //对应十进制的19var num3 = 08;   //对应十进制的8数字序列范围：0~7如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析var num4 = 015;console.log(num4); //13var num5 = 016;console.log(num5); //14var num6 = 017;console.log(num6); //15var num7 = 020;console.log(num7); //16var num7 = 022;console.log(num7); //18 */想要表示十进制:就是正常的数字想要表示八进制:以0开头想要表示十六进制:0x开头 -浮点数浮点数的精度问题浮点数 var n = 5e-324;   //科学计数法  5乘以10的-324次方  浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数   var result = 0.1 + 0.2;    //结果不是 0.3，而是：0.30000000000000004    console.log(0.07 * 100);    不要判断两个浮点数是否相等 不要用小数去验证小数. 不要用NaN验证是不是NaN不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量)数值范围 最小值：Number.MIN_VALUE，这个值为： 5e-324最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308无穷大：Infinity无穷小：-Infinity数值判断NaN：not a numberNaN与任何值都不相等，包括他本身isNaN: is not a number  不是数字的数3. String类型js中的字符串类型的值都用双引号或者单引号 字符串的长度Length属性用来获取字符串的长度var str = '黑马程序猿 Hello World'; console.log(str.length);字符串拼接字符串拼接使用+连接console.log(11 + 11);console.log('hello' + ' world');console.log('100' + '100');console.log('11' + 11);console.log('male:' + true);1.两边只要有一个是字符串，那么+就是字符串拼接功能2.两边如果都是数字，那么就是算术功能。只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加如果有一个是字符串,另一个不是字符串,使用- 号,此时会发生计算浏览器帮助我们自动的把字符串类型转成了数字类型,这种方式叫:隐式转换4. Boolean类型布尔类型:的值有两个,一个是true(真),一个是false(假)计算机内部存储：true为1，false为05. Undefined和Null1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined函数没有明确返回值,如果接收了,结果也是undefined2. null表示一个空，变量的值如果想为null，必须手动设置6. 复杂数据类型Object7. 获取变量的类型Typeoftypeof变量名typeof(变量名)var age = 18;console.log(typeof age);  // 'number'8. 字面量 在源代码中一个固定值的表示法。数值字面量：8, 9, 10字符串字面量：'黑马程序员', "大前端"布尔字面量：true，false八、注释1. 单行注释用两个反斜杠表示// 这是一个变量单行注释:一般用在一行代码的上面2. 多行注释用来注释多条代码多行注释:一般是用在函数或者是一段代码的上面/*var age = 18;var name = 'zs';console.log(name, age);*/九、数据类型转换字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的[if !supportLists]1. [endif]转换成字符串类型.toString()var num = 5;console.log(num.toString());String()var num1 = 20; console.log(String(num1));String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。如果变量有意义调用.toString()使用转换如果变量没有意义使用String()转换var num2 = null;console.log(num2.toString());  这是没有意义的使用toString会报错var num2 = null;console.log(String(num2));  而这种情况不会出现错误比如：undefined和null拼接字符串方式num  +  ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串[if !supportLists]2. [endif]转换成数值类型Number()：将其他类型转换为Number类型注意：1.Script-----》Number只能是纯数字的字符串得到具体的值，其他都是NaN。2.Boolean----》Numbertrue：1，false：03.undefined：NaN   null:0parseInt() :将其他类型转换为Number类型--整数注意：1.Script-----》Number字符串中的之首字符必须是数字，转换后才能得到具体值，否则NaN.2.只转换从首字符开始的连续数字 3.除了字符串的其他类型转换后都得到NaNvar num1 = parseInt("12.3abc");  //返回12，如果第一个字符是数字会解析知道遇到非数字结束var num2 = parseInt("abc123");   //返回NaN，如果第一个字符不是数字或者符号就返回NaNparseFloat()：将其他类型转换为Number类型--小数注意：1.Script-----》Number 字符串中的之首字符必须是数字，转换后才能得到具体值，否则NaN. 2.只转换从首字符开始的连续数字 3.除了字符串的其他类型转换后都得到NaN 4.如果小数后面的值是有效值，转换后就保留，否则删除。var lx = parseFloat(1.51);var lx2 = parseFloat(2);var lx3 = parseFloat("1.51s");var lx4 = parseFloat("sd1.51");var lx5 = parseFloat("0.51");- +，-0等运算  var str = '500';  console.log(+str); //取正  console.log(-str); //取负  console.log(str - 0);总结:想要转整数用parseInt(),想要转小数用parseFloat()想要转数字:Number();要比上面的两种方式严格[if !supportLists]1. [endif]转换成布尔类型Boolean()：将其他类型转换为Number类型0 ''(空字符串) null undefined NaN 会转换成false  其它都会转换成true 自动类型转换：在运行过程中根据编程语言的运算的语意环境，JavaScript会自动进行类型转换。console.log(Boolean("dff"));  trueconsole.log(Boolean(34));    trueconsole.log(Boolean(-34));    trueconsole.log(Boolean(null));   falseconsole.log(Boolean(undefined));  falseconsole.log(Boolean(""));    false十、运算符1. 算术运算符++：前置++： ++变量++a==》 a = a+1注意：前置++和其他数据参与运算时，先自增1后运算后置++： ++变量a++ ===>  a = a + 1注意：前置++和其他数据参与运算时，先运算后自增12. 比较运算符：得到的结果要么为true，要么为false---都是Boolean值==  !=  >  >=   <  <=     ===(全等于)   !==(不全等于) ==（等于）：比较值的大小（判断）不比较值的数据类型  不严格 ===（全等于）：比较值的大小还比较值的数据类型   严格！=（不等于）：结果和==是相反的 如果==判断出结果为true  那么!=的结果为false！==（不全等于）：结果和===是相反的 如果===判断出结果为true  那么!==的结果为falsevar lx = "12";var lx2 = 12;console.log(lx==lx2);  truevar lx = "12";var lx2 = 12;console.log(lx!=lx2);  false3.逻辑运算符&&：运算遇到false就返回a && b，如果a 为true，直接返回b,而不管b为true或者false如果a为false  那么直接返回。||：运算遇到true就返回a  ||  b，如果a  为  false ，直接返回b  ，而不管b为true或者  false如果a为true ，直接返回，而不会继续往下执行。null  0  ‘’ ""   undefined  NaN ====>false !---逻辑非---取反--取非!表达式1表达式1的结果是true,整个结果为false表达式1的结果是false,整个结果为true[if !supportLists]1. [endif]赋值运算符=   +=   -=   *=   /=   %=var num = 0;num += 5; //相当于  num = num + 5;[if !supportLists]2. [endif]运算符的优先级优先级从高到底1. ()优先级最高2.一元运算符  ++   --   !3.算数运算符  先*  /  %   后 +   -4.关系运算符  >   >=   <   <=5.相等运算符   ==   !=    ===    !==6.逻辑运算符 先&&   后|| 7.赋值运算符

本文章由javascript技术分享原创和收集