JavaScript（一）
一、javascript简介
1.1网页分层
web前端一共分三层：
|
结构层 html ： 负责搭建页面结构 样式层 css ： 负责页面的美观 行为层 javascript ： 负责页面的交互效果，提高用户体验 |
如果用舞台来进行比喻：
|
html 是演员：div，a css 是化妆师：负责给每个演员添加装饰效果 javascript是剧本：负责描述每个演员之间的交互 |
1.2 javascript诞生
javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html网页上使用，用来给html网页增加动态效果。js在web浏览器端的地位，无人可以撼动；
【作用】：数据验证、读写html元素、前后台数据交互、网页交互效果、web游戏制作、桌面应用开发（electron）、基于node.js技术服务器端开发。
javscript，jscript，actionscript等脚本语言都是基于ecmascript标准实现的。
在javascript，jscript和actionscript中声明变量，操作数组等语法完全一样，因为它们都是ecmascript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。
javascript是由ecmascript，dom和bom三者组成的。
ecmascript是一种标准，描述了该语言的语法和基本对象。
文档对象模型（document object model简称dom），描述处理网页内容的方法和接口。
浏览器对象模型（browser object model简称bom），描述与浏览器进行交互的方法和接口。
简单来说ecmascript不是一门语言，而是一个标准。ecmascript是javascript的标准，现在我们学习的版本的ecmascript4、5。
ecmascript在2015年6月，发布了ecmascript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性。
1.3总结
学习：语言核心、dom、bom、页面特效
ecmascript 是javascript语言的标准
dom 通过javascript操作网页元素
bom 通过api（应用程序接口）操作浏览器
1.4学习方法
● 要多去“品”程序，多去思考内在逻辑，读懂每一行代码！
● js机械重复性的劳动几乎为0，基本都是创造性的劳动。html、css都是重复的劳动，margin、padding挤来挤去。
● 永远不要背程序，每一个程序都必须自己会写。
好学的点是什么：
javascript是有界面效果：不像c语言，黑底白字，很枯燥的。
javascript的语法来源于c和java：有c和java的经验同学好学很多。
javascript是弱变量类型的语言，动态数据类型语言。
javascript运行在宿主环境中，不关心内存，垃圾回收。
不好学的点是什么：
兼容性问题： ie8是个怪胎，很多东西都不一样，所以就要写兼容写法，不怕造*，多写几遍
花式写法很多，抽象：从简单入手，细细品味代码
二、javascript基本语法
2.1 javascript书写位置
这事儿吧，挺有意思，就是学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。输出什么大家随意，但是很多人都习惯输出“hello world”，世界你好。感觉自己很有情怀的样子。
|
<script type="text/javascript"> alert("hello world!"); </script> |
初学者在学习js时，一般将js代码写在html结构中，书写位置在一对script标签内。标签书写位置可以是html结构中的任意位置。
type属性：规定的是标签内部书写的是纯文本类型的js代码。
2.2注释
html的注释：
|
<!--html的注释--> |
css的注释：
|
/*css注释*/ |
js注释：多行注释、单行注释
单行注释：注释作用范围只有一行，如果换行了那么不能注释。
|
//这是单行注释 |
多行注释：
|
/* 这是js的块级注释 可以注释多行 这些注释不会进行加载 */ |
注释快捷键：
|
ctrl+/ 单行注释 ctrl+shift+/ 多行注释 |
alert()语句
实际上这条语句，在运行一个内置函数，运行函数就要加圆括号，不要纠结这个对象，学所有语言，都是从模仿开始，前期，不要纠结语法的机理是什么，只要模仿，做就行，你模仿了，就能实现效果，随着课程的深入，你将知道每一条语句的机理是什么。
|
alert("内容"); |
|
window.alert("hello world！"); |
alert()其实是window对象的一个方法，只不过window对象可以不写而已。
程序从上到下执行，从左到右顺序执行，任何程序都是这样的。
语句要遵循语法。
alert()作为一个函数，自定义的内容加引号，单双引号都可以，所有符号都必须是英文的（js建议用单引号，html用双引号，这是不成文的规定）。
注意事项：分号不写就报错。
|
alert("从前有坐上")alert("山上有座庙") |
如果正确换行不会报错。
|
alert("从前有坐上") alert("山上有座庙") alert("庙里有个老和尚") |
原因：js解析器在解读代码时，会去根据语境的结尾划分语句，如果有分号自动默认是语句的结束，会将后面的语句作为一条新语句解读。如果没有分号，解析器*的解读代码结尾，默认为换行是一条语句的结尾，没有换行也没有分号导致报错。
在后期上传代码前需要压缩代码，压缩后会将所有代码的换行、空格都删除，此时js代码变成一行，所以会报错。
prompt()对话框
prompt：提示的意思。
prompt语句也是一个js内置的功能，可以传递两个参数，自定义参数内容。一般参数都加引号，两个参数之间用逗号隔开。
|
prompt("请输入年龄：","18"); |
以上两个参数不是必须，可以省略参数不写。
重点：带圆括号的都叫“函数”或“方法”，而且括号内肯定可以填写参数，至于有多少个参数（每个方法规定不一样）。
2.3 console控制台
控制台是浏览器“检查”里面的功能，快捷键是f12，英文叫做“console”。js程序员常用的调试程序错误的面板。程序的所有错误，都会在控制台中输出（显示），控制台是调试代码的一个利器。
作用1：可以显示错误个数，错误类型，错误的代码位置。
作用2：可以在控制台进行代码编辑，直接在控制台执行，也可以在控制台输出内容。
通过一条console.log()方法，可以在控制台输出自定义的内容。
console本身是js内置对象，内部有大量的方法和属性，其中有一个log()方法(函数)，可以帮我们在控制台输出一些对象，并且console.log()方法参数可以有多个。
|
console.log("这里的内容是打印在控制台的！"); console.log(100-50); console.log(100*50); console.log("%c 大家好：scarf666@163.com","color:red;font-size:30px;"); |
|
1 console.log() 用于在console窗口输出信息 2 console.dir() 可以显示一个对象的所有属性和方法。 3 console.table() 会以表格的形式呈现打印的内容 4 console.warn() 在控制台输出一条警告信息 5 console.error() 在控制台输出一条错误消息 6 console.info() 在控制台输出一条通知信息 |
console.log的占位符：
|
1 %s 格式化字符串 2 %d 格式化整数 3 %i 格式化整数 4 %f 格式化浮点数 5 %o 可扩展的dom节点格式化 6 %o 可扩展的javascript对象格式化 7 %c css格式字符串 |
|
console.log('%s + %s', 1, 1, '= 2'); console.log("%d年%d月%d日",2018,8,8); |
2.4 document对象
|
document.write() 方法，用来向网页文档中（body）输出内容 |
二、字面量
字面量（literals）：有些书叫做“直接量”、“常量”；
看见什么，它就是什么。用于表达一个固定值的表示法。
比如想在程序中表示一个数字，那就写一个数字就好了。
比如想在程序中表示“你好”，那就要加双引号。
这些书写上的规矩，就是所谓的字面量。
通俗理解：字面量就认为是字面上的意思，所见即所得。计算机在遇到字面量时，立即知道数据类型是什么，数据的值是什么。
3.1数字字面量
表示数学概念中数字的表示方法。
数字字面量：整数字面量、浮点数（小数）字面量、特殊值字面量。
js中有自己的数字字面量表示法，不需要添加任何辅助符号。
3.1.1整数字面量
数字字面量，就是这个数字自己，不需要任何的符号来界定这个数字。
javascript中，数字的字面量可以有三种进制：
10进制：普通的数字（0~9）就是十进制，逢十进一（满十进一）
8进制：以0或以0o、0o开头的都是八进制，八进制只能用0~7表示，逢八进一（满八进一）
16进制：以0x或以0x开头的都是16进制，16进制只能用(0~9和字母a~f/a~f)表示，逢十六进一（满十六进一）
【十进制】：
|
console.log(123); console.log(-123); |
【八进制】：
以0或0o、0o开头的都是八进制，显示的时候会以10进制显示。
console.log(0o36); //3 * 8 + 6 = 30 console.log(0o27); //2 * 8 + 7 = 23 console.log(0o17); //1 * 8 + 7 = 15 console.log(017); //1 * 8 + 7 = 15 console.log(010); //1 * 8 + 0 = 8，以0开头是八进制，会以10进制显示 console.log(0100); //8 * 8 + 0 = 64 console.log(01000); //64 * 8 + 0 = 512 console.log(010000); //512 * 8 + 0 = 4096 console.log(0100000); //4096 * 8 + 0 = 32768 console.log(01000000); //32768 * 8 + 0 = 262144
注意：八进制只能用0~7之间的数，如果不合法，那么js认为你写错了，从而用10进制来显示。
|
console.log(088); |
但是以0o、0o开头的，如果写错了，控制台报错。
|
console.log(0o88); |
【16进制】：
逢16进1，每个位数必须是0~9、a~f/a~f之间，以0x、0x开头，后面的数字是16进制的数，计算的时候需要转10进制计算。
|
console.log(0xff); //15 * 16 + 15 = 255 console.log(0x2b); //2 * 16 + 11 = 43 console.log(-0x2b); //2 * 16 + 11 = -43 console.log(0x11); //1 * 16 + 1 = 17 console.log(0xf); //15 |
如果位数出现大于f的字母，直接报错：
|
console.log(0xfg); |
|
console.log(0x10); //1 * 16 + 0 = 16，以0x开头是16进制，会以10进制显示 console.log(0x100); //16 * 16 + 0 = 256 console.log(0x1000); //256 * 16 + 0 = 4096 console.log(0x10000); //4096 * 16 + 0 = 65536 |
3.1.2浮点数字面量
浮点数字面量，就是数学上的“.”点。计算机中，浮点数也称为“小数”。
允许使用e来描述乘以10的几次幂：
console.log(3.1415926535898); console.log(-3.1415926535898); console.log(0.55); console.log(.55); //.55如果整数位是0，可以不写 console.log(500000); console.log(5e5); //500000,允许使用e来描述乘以10的几次幂（次方） console.log(5.6e5); //560000 console.log(1e-5); //0.00001
只有10进制有小数的字面量，八进制、十六进制没有小数字面量。
科学计算法：e计算法。
|
console.log(1e-5); //0.00001 console.log(1.2e6); //1200000 console.log(1200000000000000000000000); //1.2e+24 |
3.1.3特殊值字面量
包含：infinity（无穷大）、nan（不是一个数）
infinity：无穷大的意思，区分正、负
计算机计算能力有限，如果超过了最大计算值不会显示具体数值，直接显示为正数无穷大infinity，如果低于了最小计算值会显示负数的无穷-infinity
infinity可以是某个超级大的数，或者本身就是一个infinity特殊值：
|
console.log(188888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888 888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888 888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888); //infinity
console.log(1.2345e309); //infinity console.log(-1.2345e309); //-infinity console.log(infinity); //infinity console.log(-infinity); //infinity console.log(10/0); //infinity console.log(nan); //nan console.log(0/0); //nan |
nan：not a number 不是一个数，其实还是一个数学字面量，表示的值不是一个正常的数，不能用前面的正规表示法的数。
总结：
数字字面量有：整数字面量（8进制、10进制、16进制）
浮点数字面量：小数、e、infinity、nan
3.2 字符串字面量
字符串是一个术语，就是人类说的话。
组成：字母、数字、文字、特殊符号、空白符等。
字符串字面量：将人类说的语言放到一对引号中
字符串可以写任意的字符：
|
console.log("这是汉字字符串"); console.log("hello world!"); console.log("123456"); //数字引号括起来，那么就不是数字了，而是字符串 console.log("!@#$%^&*("); console.log(" "); |
有一些符号有特殊作用，不能在字符串中写：
解方法：将特殊字符进行“\”转义
在字符串中可以使用以下特殊符号，比如：
|
\n 换行 \t tab缩进 \' 单引号 \"" 双引号 \\ 反斜杠 |
\n换行，\t缩进示例：
|
console.log("床前明月光\n疑是地上霜"); console.log("床前明月光\t疑是地上霜"); |
二、变量
4.1变量语法
变量（variables），相当于一个容器，内部可以放任何类型的数据，和高中代数学习x、y、z很像。它们不是字母，而是蕴含值的符号。它和字面量不同，字面量5就是数字5，字面量“你好”就是字符串“你好”。现在这个变量不一样了，你看见一个a，实际上不是字母a，而是蕴含着不同的值。
变量内的数据是可以变化的，根据存放的内容发生变化
变量的数据只能存放一个，旧的数据会被新的数据替代
【整体感知】：
|
<script type="text/javascript"> var a; //定义了一个a变量 a = 100; //给a变量赋值 console.log(a); //输出变量a </script> |
【语法】：
|
声明：var 变量名; 赋值：变量 = 变量值; |
【实例】：
|
声明：var a; //定义了一个a变量 赋值：a = 100; //给a变量赋值 |
简化后的代码：
|
var a = 100; |
通过“=”号给变量内部存储数据，专业叫法“变量赋值”。
你的电脑内存中，就会开辟一个空间，用来存放这个变量a，把右边的值，赋值给左边的变量名，var是声明变量的意思。
4.2变量必须先声明，才能使用
变量声明又叫做“变量定义”或“创建变量”。使用关键字var，后面定义变量的名字（名称自定义）。变量名定义需要遵循一个标识符命名规范。
var这个过程可以叫做声明（declaration），也可以叫做定义（definition）
直接运行以下代码：
|
console.log(a); |
4.3命名规范
程序中的命名规范：一般使用驼峰命名法或其他（第一个单词首字母小写，后面每个单词首字母大写）
|
var mynameis; var my_name_is; |
|
1、必须以字母、“_”或“$”符号开头，后面可以是数字、字母、下划线等 2、变量名不能包含空格或加减号或特殊符号 3、javascript变量名是严格区分大小写，例如a和a代表不同的变量 4、不能使用javascript中关键字和保留字 关键字：javascript中具备特殊意义的词，已经被js占用，不能用来命名 保留字：现在没有特殊功能，但是未来可能成为关键字 |
关键字：
|
break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try |
保留字：
|
abstract enum int short boolean export interface static byte extends long super char final native class synchronized float package throws const goto private transient debugger implements protected volatile double import public |
【合法的变量名举例】：
|
var a; var a; var a888; var _888; var $888; var $o0o_$; var _____; |
【不合法的变量名举例】：
|
var 123; var 123abc; var abc@126; var abc￥; var var; //不能使用关键字 var class; //不能使用保留字 |
4.4变量赋值
如果一个变量，仅仅被var了，但是没有赋值，此时这个变量的值是undefined。undefined是变量默认的初始值，代表未定义。
|
var a; //声明a变量，为赋值 console.log(a); //undefined |
变量的赋值用“=”等号，“=”就是赋值符号，在js中“=”号没有其他含义，就表示赋值。使用变量时用的不是变量名，而是内部赋的值。
等号右侧赋的值可以是任意类型，甚至还可以是一个变量。
var a; //声明a变量，为赋值 console.log(a); //undefined a = 100; console.log(a); //100 var b; b = "你好"; console.log(b); var c; c = a; //把a变量的值，赋值给c变量 console.log(c); //输出100
var a = 1; var b = 2; var c = 3; var d = 4; a = b; //把b的值赋值给a，所以a就替代初始值1变成2 b = a; //目前a变量值是2，把a的值赋值给b，所以b也是2 c = b; //目前b变量值是2，把b赋值给c，所以c就是2 d = a + b + c + d; // 4个变量值相加 console.log(a);//2 console.log(b);//2 console.log(c);//2 console.log(d);//10
变量内部存储的数据可以动态发生改变，变化的方式是通过赋值运算进行赋值。
变量数值发生变化，不需要进行多次var，变量一次定义，可以多次改变。
4.5变量声明的提升
这是javascript特有的一个特点，其他编程语言没有。
javascript 变量的另一特别之处是，你可以引用稍后声明的变量，而不会引发异常。这一概念称为“变量声明提升(hoisting)”；javascript 变量感觉上是被“举起”或提升到了所有函数和语句之前。然而提升后的变量将返回 undefined 值，所以即使在使用或引用某个变量之后存在声明和初始化操作，仍将得到 undefined 值。
现在我们先去改变变量的值，然后声明变量，由于js有一个机制，叫做“变量声明”提升，所以现在在程序执行前会已经看见这个程序有一行声明变量的代码，所以就会被提升到程序开头去运行。
|
console.log(a); //输出undefined var a; //这行声明变量的代码会自动提升到所有执行语句之前。 |
记住js只能提升变量的声明，不能提升变量的赋值：
|
console.log(a); //输出undefined var a; //这行声明变量的代码会自动提升到所有执行语句之前。 a = 100; //变量的赋值不能被提升，所以输出undefined |
|
console.log(b); //undefined var b = 100; //虽然合着写，但变量赋值依然不能被提升，只能提升变量声明 |
等价于：
|
var b; //自动提升到前面 console.log(b); //undefined b = 100; //赋值还在原地 |
4.6 不写var的情况
|
a = 100; console.log(a);//100 |
定义a变量的时候没有写var，程序没有报错，说明这个a变量已经被定义成功并赋值，现在看不出来不写var和写var有什么区别。但是后面随着深入，你将知道，不写var其实是定义了一个全局变量，作用域是不能控制的。
4.7用逗号隔开多个变量
一个var关键字定义多个变量：
逗号“,”表示法，只能用于变量的连续定义，可以用于赋初始值，不要瞎用。
var a = 10,b = 20,c = 30; console.log(a); console.log(b); console.log(c); console.log(a+b+c); //30，数学相加 console.log(a,b,c); //10 20 30多个参数用逗号隔开一起输出
4.8区分变量和字面量
使用变量的时候，不能加引号，如果变量加上引号，就变成“字符串”字面量。
|
var a = 100; console.log(a); //变量 100 console.log('a'); //“字符串”字面量 a |
引号是“字符串”的定界符，所以引号里面的a语句失去了变量的意思，变成字面量的字符串a了。
五、数据类型
5.1数据类型分类
数据：计算机看到的所有对象都是数据，数据分很多类，都会分类保存。
javascript中的值：无论是字面量还是变量，都有明确的类型。
简单的基本数据类型有5种：
|
number 数字类型，不区分整数、浮点数、特殊值、进制 string 字符串类型，所有有引号的数据都是字符串类型 boolean 布尔类型，仅有两个值true（真）和false（假） undefined undefined类型，变量未定义时的值，这个自己是一种类型。 null object类型，这个值自己是一种类型，null本身是个空对象。 |
5.2数据类型检测
用typeof这个关键字可以检测变量的值是什么类型。
var a = 123456; //number类型 var b = "123456"; //string类型 var c = true; //boolean类型 var d = null; //null类型（空对象） var e; //undefined类型 console.log(typeof a); console.log(typeof b); console.log(typeof c); console.log(typeof d); console.log(typeof e);
语法是以下两种都可以：
|
typeof 值;
赞 (0)
打赏
相关文章:
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。 |
上一篇： django-7-django模型系统
发表评论