JS基础学习笔记(一)

JS代码位置

1.外部文件 (推荐使用)

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

可以将js代码编写到外部js文件中,然后通过script标签引入 写到外部文件中可以在不同页面中同时引用,也可以利用到浏览器的缓存机制

注:script标签一旦用于引入外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略
如果需要则可以在创建一个新的script标签用于编写内部代码
js代码的执行是从上到下执行的

2.script 标签中

例:<script type="text/javascript">
			alert("我是script标签中的代码!!");
		</script>

3.标签的onclick属性中(不方便维护)

<button onclick="alert('点我干嘛');">点我一下</button>

但是当我们点击按钮时,js代码才会执行
js代码虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护

4.超链接的href属性中

<a href="javascript:alert('快点点我');">你也点我一下</a>

超链接点完没反应(js后不添加别的动作)

<a href="javascript:;">你也点我一下</a> 

字面量和变量

字面量(都是一些不可改变的值)

字面量都是可以直接使用,但是我们一般都不会直接使用字面量

对象的字面量

语法:{属性名:属性值,属性名:属性值…}
* 对象字面量的属性名可以加引号也可以不加,建议不加
* 如果要使用一些特殊的名字,则必须加引号
*
* 属性名和属性值是一组一组的名值对结构
* 名和值之间使用:连接,多个名值对之间使用,隔开
* 如果一个属性之后没有其它的属性了,就不要写,
var obj2 = { name:"猪八戒", age:28, gender:"男", test:{name:"沙和尚"} };

变量

变量可以用来保存字面量,而且变量的值是可以任意改变的
* 变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,
* 而很少直接使用字面量
* 可以通过变量对字面量进行描述

标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符
- 例如:变量名、函数名、属性名都属于标识符

命名规则:
* 1.标识符中可以含有字母、数字、_、$
* 2.标识符不能以数字开头
* 3.标识符不能是ES中的关键字或保留字
* 4.标识符一般都采用驼峰命名法
* - 首字母小写,每个单词的开头字母大写,其余字母小写
* helloWorld xxxYyyZzz
*

  • JS底层保存标识符时实际上是采用的Unicode编码,
    * 所以理论上讲,所有的utf-8中含有的内容都可以作为标识符

数据类型

基本数据类型与引用数据类型的保存

JS中的变量都是保存到栈内存中的,
* 基本数据类型的值直接在栈内存中存储,
* 值与值之间是独立存在,修改一个变量不会影响其他的变量
*
* 对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
* 而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
* 当一个通过一个变量修改属性时,另一个也会受到影响

数据类型指的就是字面量的类型

运用typeof 可以检查字面量的类型
例:var a = 123; console.log(typeof a);

在JS中一共有六种数据类型
* String 字符串
* Number 数值
* Boolean 布尔值
* Null 空值
* Undefined 未定义
* Object 对象
*
* 其中String Number Boolean Null Undefined属于基本数据类型
* 而Object属于引用数据类型

1.String 字符串类型

特征:(1)使用引号引起来(单引号双引号均可)
(2)单双引号不可混用
(3) 同类型引号不可嵌套

转义字符

在字符串中我们可以使用\作为转义字符,
当表示一些特殊符号时可以使用\进行转义
\ " 表示 "
\ ’ 表示 ’
\n 表示换行
\t 制表符
\ 表示\

2.Number 数值类型(整数和浮点数)

使用Number表示的数字超出最大值,会返回一个
Infinity 表示正无穷

  • Infinity 表示负无穷
    NaN 是一个特殊的数字,表示Not A Number
    * 使用typeof检查一个NaN也会返回number

在运算方面,整数运算结果较为精确
浮点运算结果不精确

3.Boolean 布尔值

布尔值只有两个,主要用来做逻辑判断
* true
* - 表示真
* false
* - 表示假

4.Null 和Undifined
Null

Null(空值)类型的值只有一个,就是null( null这个值专门用来表示一个为空的对象)
类型为 object类型

Undifined

Undefined(未定义)类型的值只有一个,就undefind
当声明一个变量,但是并不给变量赋值时,它的值就是undefined
* 使用typeof检查一个undefined时也会返回undefined

强制类型转换

1.其他数据类型转String类型
(1)调用 toString() 方法

该方法不会影响到原变量,它会将转换的结果返回
* - 但是注意:null和undefined这两个值没有toString()方法,
* 如果调用他们的方法,会报错

(2)调用String()函数,被转换类型以参数形式传递

var a = 123;
a = String(a);

对于Number和Boolean实际上就是调用的toString()方法
* 但是对于null和undefined,就不会调用toString()方法
* 它会将 null 直接转换为 “null”
* 将 undefined 直接转换为 “undefined”

(3)任意的数据类型+一个""

例:var a = 123;
	a = a+"";

原理: 任何值和字符串相加都会转换为字符串,并作拼串操作,这是一种隐式的类型转换,由浏览器自动完成,实际上也是调用String()函数

2.将其他的数据类型转换为Number
(1)运用Number()函数
String->Number

字符串---->数字
纯数字-----直接转为数字
字母加数字(字符串中有非数字的内容)-------转为数字NaN
空串或者全是空格的字符串-----转为0

Boolean->Number

true 转成 1
* false 转成 0

null->Number

  • null --> 数字 0

undifined->Number

undefined --> 数字 NaN

(2) parseInt() 、 parseFloat()函数

这种方式专门用来对付字符串
* - parseInt() 把一个字符串转换为一个整数
同时也可将一个字符串中有效的整数提取出来,然后转为Number
例:var a = 123px; a = a.parseInt();

  • parseFloat() 把一个字符串转换为一个浮点数
    与parseFloat 类似,将小数提取出来,然后转换为Number

注:如果对非String使用parseInt()或parseFloat()
它会先将其转换为String,然后再操作

(3)将一个值-0 *1 /1 来将其转换为Number

例:var a = "123";
	a = a+0;/a = a*1;/a = a/1/;
	 

原理:任何值做- * / 运算时都会自动转换为Number
* 我们可以利用这一特点做隐式的类型转换
* 原理和Number()函数一样,使用起来更加简单

(4)一个其他的数据类型使用+,来将其转换为number

var a = +"123";

原理:对于非Number类型的值进行一元运算符(+)操作时,它会将先转换为Number,然后在运算

3.将其它数据类型转为Boolean
(1)使用Boolean()函数

var a = "hello";
a = Boolean(a);
  • Number(数字) ------>Boolean
    除了0和NaN,其余的都是true
  • String( 字符串) —>Boolean( 布尔)
    除了空串,其余的都是true
  • null和undefined都会转换为false
  • object( 对象)也会转换为true

(2)为一个任意数据类型取两次反,来将其转换为布尔值

例:var a = "hello";
	a = !!a;

进制

1.十六进制(0x开头)
2.八进制(0开头)
3.二进制(0b开头)

var a = 070;

像"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
为了避免这种现象,可以在parseInt()中传递一个第二个参数,来指定数字的进制

例:a = parseInt(a,10); //10表示的是进制

注:不一定所有浏览器都支持

运算符

运算符也叫操作符
* 通过运算符可以对一个或多个值进行运算,并获取运算结果
* 比如:typeof就是运算符,可以来获得一个值的类型
* 它会将该值的类型以字符串的形式返回
* number string boolean undefined object
*

此处仅提及js自己的特色

算数运算符

当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN
+
(1) +可以对两个值进行加法运算,并将结果返回
(2) 如果对两个字符串进行加法运算,则会做拼串
会将两个字符串拼接为一个字符串,并返回
(3)任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
- * / % 进行相应运算后返回结果

一元运算符(只需要一个操作数)

+ 正号 不会对数字产生任何影响
- 负号 可以对数字进行符号的取反
对于非Number 类型的值,先转换为Number然后再运算

逻辑运算符
对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值

  • 短路与&& (JS中的“与”属于短路的与,如果第一个值为false,则不会看第二个值)
    如果第一个值为true,则必然返回第二个值
    如果第一个值为false,则直接返回第一个值

  • 短路或 || (JS中的“或”属于短路的或如果第一个值为true,则不会检查第二个值)
    如果第一个值为true,则直接返回第一个值
    如果第一个值为false,则返回第二个值

赋值运算符

关系运算符

非数值的情况
* - 对于非数值进行比较时,会将其转换为数字然后在比较
* - 如果符号两侧的值都是字符串时,不会将其转换为数字进行比较而会分别比较字符串中字符的Unicode编码
(1) 任何值和NaN比较都是false
(2) 比较两个字符串时,比较的是字符串的字符编码
console.log("a" < "b");//true
(3)比较字符编码时是一位一位进行比较,如果两位一样,则比较下一位,所以借用它来对英文进行排序
(4)如果比较的两个字符串型的数字,可能会得到不可预期的结果
console.log("11123123123123123123" < +"5");//true
(5)比较中文时无意义。
注意:在比较两个字符串型的数字时,一定一定一定要转型

相等运算符

==和!=

当使用相等(==)或者不相等(!=)来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型, 然后在比较
(1)undefined 衍生自 null, 所以这两个值做相等判断时,会返回true
(2)NaN不和任何值相等,包括他本身
(3)不能用console.log(b==NaN); 判断b的值是否是NaN,可以通过isNaN()函数来判断一个值是否是NaN
* 如果该值是NaN则返回true,否则返回false

=== 和 !==

全等(===)和不全等(!==)用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换

条件运算符

条件运算符也叫三元运算符
* 语法:
条件表达式?语句1:语句2;
执行的流程:
* 条件运算符在执行时,首先对条件表达式进行求值,
* 如果该值为true,则执行语句1,并返回执行结果
* 如果该值为false,则执行语句2,并返回执行结果
* 如果条件的表达式的求值结果是一个非布尔值,
* 会将其转换为布尔值然后在运算

var a = 10,b=20;
a>b?alert("a大"):alert("b大");

运算符优先级

在JS中有一个运算符优先级的表,
* 在表中越靠上优先级越高,优先级越高越优先计算,
* 如果优先级一样,则从左往右计算。
* 但是这个表我们并不需要记忆,如果遇到优先级不清楚
* 可以使用()来改变优先级

break 与continue

break关键字可以用来退出switch或循环语句
(1)不能在if语句中使用break和continue
(2) break关键字,会立即终止离他最近的那个循环语句
可以为循环语句创建一个label,来标志当前的循环
* label:循环语句
* 使用break语句时,可以再break后跟着一个label,
* 这样break将会结束指定的循环,而不是最近的

outer:
			for(var i=0;i<5;i++){
				console.log("@外层循环"+i);
				for(var j=0;j<5;j++){
					break outer;
					console.log("内层循环:"+j);
				}
			}

continue 关键字可以用来跳过当次循环
同样,continue也是默认只会离他最近的循环起作用

网上有人分享经验,说到学习前端开发技术JavaScript很实用的一些书籍,从入门到高级,一一列举,很不错。整理了一下发上来。 名称: JavaScript+DOM编程艺术.pdf 概述: “本书理应奉为经典。文笔清晰,采用了优秀的编程原则,严格遵守相应的标准。真是完美的结合。” ——Slashdot “我要隆重推荐本书。它前所未有地演示了DOM脚本编程的真正潜力。无论你是JavaScript新手还是专家,本书都绝对必读。”——Garrent Dimon,Digital-Web.com 随着Ajax的兴起,JavaScript再一次成为炙手可热的技术。然而,在历史上,它并不是一直这么幸运,由于主流浏览器之间的不兼容,以JavaScript为核心的DHTML曾经昙花一现,很快被人遗忘。 俱往矣,如今的网页设计已经翻开了新的一页。在CSS彻底改变了Web页面布局的方式之后,万维网联盟跨浏览器的DOM标准的制定,使JavaScript终于突破瓶颈,成了大大改善网页用户体验的利器。 本书在简洁明快地讲述JavaScript和DOM的基本知识之后,过几个实例演示了大师级的网页开发技术,并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践,包括预留退路、循序渐进和以用户为中心等。读者可以非常直观地加以领悟,迅速使自己的编程技术更上一层楼。 第1章 JavaScript简史  1.1 JavaScript的起源  1.2 浏览器之争  1.3 制定标准  1.4 小结 第2章 JavaScript语法  2.1 准备工作  2.2 语法  2.3 语句  2.4 变量  2.5 操作  2.6 条件语句  2.7 循环语句  2.8 函数  2.9 对象  2.10 小结 第3章 DOM  3.1 文档:DOM中的“D”  3.2 对象:DOM中的“O”  3.3 模:DOM中的“M”  3.4 趁热打铁  3.5 小结 第4章 案例研究:JavaScript美术馆  4.1 编写标记语言文档  4.2 编写JavaScript函数  4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯  5.1 不要误解JavaScript  5.2 预留退路  5.3 向CSS学习  5.4 分离JavaScript  5.5 向后兼容性  5.6 小结 第6章 案例研究:JavaScript美术馆改进版  6.1 快速回顾  6.2 解决“预留退路”问题  6.3 解决“分离JavaScript”问题  6.4 JavaScript函数的优化:不要做太多的假设  6.5 DOM Core和HTML-DOM  6.6 小结 第7章 动态创建HTML内容  7.1 [removed]()方法  7.2 innerHTML属性  7.3 DOM提供的方法  7.4 重回“JavaScript美术馆”  7.5 小结  7.6 下章简介 第8章 充实文档的内容  8.1 不应该做的事情  8.2 把“不可见”变成“可见”  8.3 原始内容  8.4 XHTML文档  8.5 CSS  8.6 JavaScript代码  8.7 小结  8.8 下章简介 第9章 CSS-DOM  9.1 三位一体的网页  9.2 style属性  9.3 何时该用DOM脚本去设置样式信息  9.4 className属性  9.5 小结 第10章 用JavaScript实现动画效果  10.1 何为动画  10.2 实用的动画  10.3 改进动画效果  10.4 最后的优化  10.5 小结 第11章 学以致用:JavaScript网站设计实战  11.1 案例背景介绍  11.2 页面视觉效果设计  11.3 CSS  11.4 颜色  11.5 XHTML文档  11.6 JavaScript脚本  11.7 小结  11.8 下章简介 第12章 展望DOM脚本编程技术  12.1 Web的现状  12.2 Ajax技术  12.3 Web应用  12.4 小结 附录 DOM方法和属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值