web前端----JavaScript基础
- 1.怎么向页面添加JavaScript
- 1.写在HTML代码中(内部JavaScript)
- 2.外部JavaScript
- 3.写到HTML标签中
- 2.输出代码
- 1.控制浏览器弹出一个警告框
- 2,在页面输出一个内容
- 3.向控制台输出一个内容
- 3.基本语法
- 1.JavaScript基本常识
- 2.声明变量
- 3.数据类型
- 4.强制类型转换
- 1.String
- 2.Number
- 3.Boolean
- 5.运算符
1.怎么向页面添加JavaScript
1.写在HTML代码中(内部JavaScript)
在HTML代码中js代码要存在就要写在<script></script>
中;写在</body>
前,一般推荐写在<head></head>
之间
<head>
<script type="text/javascript">
/*代码内容*/
</script>
</head>
type 属性(必须写,不写就是默认JavaScript脚本)规定脚本的 MIME 类型;
2.外部JavaScript
在html文件所在目录下创建一个JavaScript文件夹,里面创建一个js文件。然后在HTML文件中写
<script src="JavaScript/main.js" async></script>
书写位置与内部JavaScript代码一样,然后就能在外部文件进行JavaScript编辑了。
async:异步加载 async ,js文件加载完成就可以往下执行。浏览器默认的是同步(sync 同步,执行完js后才会往下执行)
defer:异步加载 defer ,页面加载完成之后才执行该js代码
我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序,更易于复用,且没有了脚本的混合,HTML 也会更加易读,也可以利用到浏览器的缓存机制,因此这是个推荐使用的方式。
引入外部JS文件的情况下,不能在<script></script>
之间插入代码,插入的代码不执行,只执行引入的外部文件。如果需要就新建一个<script></script>
用于编写内部代码。
3.写到HTML标签中
- 将JavaScript代码写到按钮标签的onclick属性中,当点击按钮时就会执行js代码。
<button onclick="alert('再点一下!')">点击吧</button>
- 将js代码写到超链接的href属性里;点击超链接时执行代码。
<a href="javascript:alert('不要点击了!');">点点看</a>
注意:该方式不推荐使用,它们属于结构和行为耦合,代码量多了后不方便维护。
2.输出代码
1.控制浏览器弹出一个警告框
代码:
alert("警告,警告,你即将访问本网页!");
/*alert用于输出一个警告框,注意括号内的双引号*/
2,在页面输出一个内容
document.write():向body中输出一个内容(仅仅在sync同步加载外部js文件时才有效果)
document.write("body里没写东西,那我哪来的?js里写的");
使用了document.write()输出的内容会把当前页面的内容全覆写掉。
使用了document.write()输出的内容会把当前页面的内容全覆写掉。
注意:异步加载的js是不允许使用document.write方法的。
3.向控制台输出一个内容
console.log():作用就是向浏览器的控制台输出一个内容
console.log("我在控制台里,页面看不到");
主要是开发人员能看到。
3.基本语法
1.JavaScript基本常识
- js中严格区分大小写;
- js的每条语句以分号(;)结尾,如果不加分号,浏览器会自动添加,但是会消耗部分系统资源,并且浏览器可能会加错分号,所以务必加分号。
- js会忽略多个空格和换行,我们可以利用空格和换行来对代码进行格式化。
2.声明变量
使用var来声明变量;
var a;
a=123;
var b=123;
console.log(a);
console.log(b);
上面的a也叫标识符。
命名标识符的规则:
- 标识符中可以含有字母,数字,下划线(_),$。(其他特殊符号就不行了,比如@就不可以)
- 标识符不能以数字开头
- 标识符不能是js标准的关键字和保留字(NULL if等等)
- 标识符一般采用驼峰命名法,首单词的首字母小写,后面的单词的首字母大写;例如:helloWorld,xxxYyyLll。
- js底层保存标识符时,实际上采用的是unicode编码,也就是utf-8中的符号都可以,中文也行,但不要使用中文。
3.数据类型
JavaScript中一共有六种数据类型:
- String 字符串
字符串要使用单引号或者双引号,var a="hello";
字符串中可以使用 \作为转义字符。var a="\"hello\""
,\\
表示\
,\n转行,\t制表符。 - Number 数值
JavaScript里所有数值都是number类型,包括整型和浮点型。
JavaScript中能表示的数字的最大值是Number.MAX_VALUE,值为1.7976931348623157e+308。
如果Number的值超过了最大值,就会返回一个Infinity无穷(-Infinity:负无穷);其类型依然为Number;
Number.MIN_VALUE:最小正值(5e-324)。
NaN:表示Not A Number。当js进行字符串和字符串相乘之类不能计算值的运算时就会返回NaN非法数字。
在js中整数的运算基本可以保证精确,但是使用js进行浮点运算,可能得到一个不精确的结果(可以试试0.1+0.2),所以千万不要使用js来进行精确度要求比较高的运算,最好放到服务器里区进行。 - Boolean 布尔值
只有两个,真(值为true),假(值为false)。
主要用来进行逻辑判断。 - Null 空值
专门用来表示一个为空的对象,使用typeof检查一个Null值时,会返回object类型。 - Undefined 未定义
只有一个值,就是Undefined,出现在声明一个变量却不给变量赋值时,用typeof检查Undefined,还是返回Undefined。 - Object 对象(object为引用数据类型,上面五个为基本数据类型)
使用运算符typeof来检查一个变量的类型,使用语法:typeof+标识符;alert(typeof a);
4.强制类型转换
- 指的是将一个数据类型强制转换为其他的数据类型。
- 其他的数据类型指的是 string number boolean这三种,不会去转化为空和未定义。
1.String
将其他数据类型转化为String;
方法一:
- 调用被转换类型的toString()方法(调用xxx的yyy()方法就是:xxx.yyy());
- 该方法不会影响到原变量,只会将转换的结果返回。
- 注意:Null和Undefined没有toString()方法,调用会报错;
var a=123;
console.log(typeof a);//输出number
var b=a.toString();
console.log(typeof b);//输出string
方法二:
- 调用String()函数,将要被转化的数据作为参数传递给函数;
- 使用String()函数做强制类型转换时,对于number和Boolean实际上调用调用toString()方法。
- 而对于Null和Undefined,就不会调用toString()方法,而是将Null直接转化为字符型"null", undefined直接转化为"undefined"。
var a=NUll;
var b;
a=String(a);
b=String(b);
console.log(a);//输出null
console.log(b);//输出undefined
2.Number
将其他数据类型转化为Number;
方式一:使用Number()函数;
- 字符串------>数字
1.如果是纯数字的字符串,则直接将其转化为数字;
2.如果字符串中含有非数字的内容,则将其转化为NAN;
3.如果字符串是一个空串或者全是空格的字符串,则将其转化为0; - 布尔----->数字
false转换为0;
true转换为1; - Null------>数字
就是0; - Undefined------>数字
转换为NaN
方式二:
专门对于字符串转换为数字;
1.parseInt():其可以将字符串中的有效部分提取出来,然后转换为number;(有效数字到非数字部分结束)
例子:
var a=123abc456q;
a=parseInt(a);//a=123,后面因为间隔了字母。所以456不会被读取
2.parseFloat():与parseInt()类似,不同的是它获取的是有效的浮点数。
例子:
var a=123.123abc;
a=parseInt(a);//a=123.123
注意:如果非string使用上面两个函数,它们会先将其转为string再进行操作;parseInt()里可以指定数字的进制;parseInt(a,10);//指定a为10进制
,比如a为070时,有的浏览器会当作70,有的会当作八进制值56。这时就要指定进制以统一数值。
3.Boolean
将其他数据类型转换为Boolean;
使用Boolean()函数进行转换。
- 数字------>Boolean
除了0和NaN,其他都是true; - 字符串------>Boolean
除了空串都是true; - 另外null和undefined都是转换为false;
- 对象object也会转换为true;
5.运算符
运算符也叫操作符,通过运算符可以对一个或多个值进行运算,并获取运算结果
例如:typeof也是运算符,用来获取一个值的类型。
算数运算符(二元运算符)常见的有:+,-,*,%,/
注意:这些算数运算符可以进行隐式的类型转换。
任何值做-,*,/,的运算都会自动转换成Number,原理和Number()函数一样,使用起来简单些,比如可以通过-0,*1,/1
来进行数据类型转换。
%:取模运算(取余数)7%3=1
另外最特殊的就是+号了,同样它除了进行普通数字运算外也具有一些其他特性;
如果对两个字符串进行加法运算,则会进行拼串操作,即将两个字符串合成一个字符串并返回,与其他符号不同,加法运算中任何值遇到字符串都会进行先转换为字符串,然后进行拼串操作。
//加法应用于字符串定义
var a="asdfg"+
"zxcvb"+
"qwert";//为了美观所以要换行时,
双引号却不能换行就可以这样做
一元运算符:仅仅对一个数字进行操作的运算符。+
:正号
正号不会对数字产生任何影响。
对于非number的值,会先将其转换为number然后进行运算(隐式类型转换),对一个非number的数据类型使用+,可以使其转换为number,原理和number()函数一样。var a=1+ +"2"+3;//a等于6,字符串前的+使其变为了数字
-
:负号
对数字进行负号的取反。
逻辑运算符:这里简单说说js里的不同,其他与c语言一致。!
:非,使用非运算可以对一个布尔值进行取反运算,false变为true,true变为false。对于非布尔值则先转化为布尔值再进行取反。使用var=!!123;//!!取两次反就能将数字123转变为true布尔值
。
&&
:与;
&&两边的值,一般从左向右看(js中属于“短路的”与,看下面例子)
例子:
true&&alert("运行过来了");//前面是true,js会看第二个,这里会弹窗。
false&&alert("不会运行过来");//前面是false,则已经得出结论总体为false,不会看后面的。
非布尔值运算(js中可以):
例子:var a=1&&2;//a=2
.
都为非布尔值时先转为布尔值运算,而后再转会原值。
两个都为true时只返回靠后的那个。var a=0&&2;//a=0
,因为0转为布尔值是false;有一个false,就返回false的那一个。var a=NaN&&0;//a=NaN
.两个都是false,则返回前面那一个。原理是js最后运行的是哪个(“短路性质”)
||
:或;
js中特点和&&差不多,然后不同的就是,只要有一个true,它总体的值就为true。其他的非布尔值运算原理也相同。
关系运算符:和C语言一样的性质。
<, >, =, <=, >=。关系成立即为true,不成立为false。
注意:非数值情况下
- 在非数值情况下,会先将其转换为数字再进行比较,
var a=1>true;//结果为false,因为1=1.
- 任何值和NaN进行比较都是false。
alert(10<"hello");//输出false,因为hello会转为false。
- 如果两侧都是字符串形式时,则不会将其转换为数值形式再比较,而是根据unicode编码进行比较。比较字符串编码时是一位一位比的,如果两位一样则比较下一位,可以用它来进行对英文的排序。
alert("bac"<"bb");//输出true,比到了第二位
,alert("11"<"5");//输出true,拿1和5比Unicode编码
比较数字字符串时一定记得转型,即加个+什么的,不然几位数有可能会小于一位数。
这里说说Unicode编码:
- 字符串中可以使用转义字符输入Unicode编码(\u加4位编码)。
alert("\u0031");//输出1
一般用于特殊符号,不好手打输入的。 - 网页中输入Unicode编码;
&#编码
;这里编码要求是十进制的,所以要先转换。<h1>☠</h1>
,一个骷髅符号,查Unicode表能发现很多有趣的符号。
相等运算符:==
(!=也一样的性质
)
与c相似(相等返回true,不相等返回false),这里说说js中该注意的几点:
- NaN不和任何值相等,包括它本身
alert(NaN==NaN);//返回false
所以js中不能通过==来判断某某值是否为NaN。所以通过isNaN()函数来进行判断,是就返回true,不是就返回false。
- 使用==来进行比较时,两个值不是同一个类型,会先转换类型再比较,具体转为什么类型,不能确定。
===
用于全等,与相等类似,但其不会做类型转换,也就是比较时类型也会被考虑。(!==不全等
) - undefined衍生自null,所以这两个相比时会返回true。
条件运算符(也叫三元运算符):
语法:条件表达式 ? 执行语句1 : 执行语句2 ;
在执行时,先对条件表达式进行求值,如果值为true,则执行语句1并返回执行结果,返回false则执行语句2并返回执行结果。var max=a>b?a:b;
路过条件执行语句是个非布尔值,会先将其转换为布尔值,"hello"?alert(语句一):alert(语句二);//输出语句一,hello为true
这一篇文章主要记录认识了JavaScript里的五种类型和基本的一点语句,这五种类型属于基本类型,在此之外的所有类型都属于对象,将记录在下一篇文章。