Javascript学习打卡第一周!

一,认识一下Javascript

1.JavaScript是什么?

是一种具有函数优先的轻量级,解释型即时编译型编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式

2.Javascript的历史

JavaScript诞生于1995年,由网景公司发明,最初叫做LiveScript,后来由于SUN公司的接入更名为JavaScript

3.JavaScript的作用

处理网页中的前端验证,检查用户输入内容是否符号一定规范,用户名长度,密码长度,邮箱格式…

4.JavaScript基本规范标准

JS的标准名命名为ECMAScript ECMAScript这是一个标准,而这个标准需要由各个厂商去实现
一个完整的JavaScript需要由ECMAScript DOM BOM三个部分构成

二,流水的语言,铁打的“Hello world”

1,默认样式
<script></script> 
<script type="text/javascript"></script>
2.三条输出语句:

1.控制浏览器弹出一个警告框alert(“XXX”)
2.计算机在页面中输出一个内容document.write(“XXX”) (内容出现在body)
3在浏览器的控制台输出内容 console.log(“XXX”)

3.执行规则

JS代码是从上到下依次执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        alert("小刘同学请你看");
        document.write("hello!world")
        console.log("Elvira")
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

三,JavaScript的编写位置

【1】JavaScript的代码只有编写到标签的onclick属性中,我们点击按钮时,代码才会执行(onclick是属性)

单双引号要注意嵌套规范

<button onclick="alert();">点我一下</button>
【2】将JS代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
<a href="javascript:alert('elvira');">hello</a>
 <a href="javascript:;">world</a>

【3】可以把JS代码写在HTML标签属性中,但是它们属于结构与行为耦合,不方便维护,故不推荐使用

JS代码编写到Script标签中
JS代码编写在外部JS文件中
然后通过Script标签引入
优点:如果写在外部文件中可以方便在不同的页面中同时进行引入,也可以利用浏览器的缓存机制(推荐!)

<script src="../JavaScript/03.js"></script>

注:Script标签一旦用于引入外部文件后,就不能使用当前标签编写代码(因为每一个Script标签只能编写一个代码)
如果需要可以通过继续创建新的Script标签进行编写代码

四,JavaScript的语法

【1】在JavaScript语言中,大小写是严格区分的,一定要注意

abcd与ABCD是不一样的输入

【2】每一条语句以分号(;)结尾

如果不写分号的话,浏览器会自动添加,不仅会消耗一部分资源并且在某些时候还会加错分号,所以编写中分号不要忘记

【3】JavaScript中忽略多个空格和换行

我们可以使用空格和换行对代码进行格式化

【4】关于注释

和HTML和CSS一样,注释中的内容不会被解析器执行,但是会在源码中进行显示,一般用来对程序中的内容进行解释
格式

单行注释://注释内容(Ctrl+/
多行注释:/*注释内容*/(Shift+Alt+A)

五,变量与字面量(我们通过变量对字面量进行描述)

【1】字面量

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

【2】变量

可以用来保存字面量,而且变量的值可以随意改变,更加方便我们的使用,所以在开发中可以通过变量去保存一个字面量,而很少直接使用字面量

【3】声明变量

在JS中使用var关键字在声明一个变量

var a;
【4】赋值变量

为变量赋值

a = 123;
【5】声明与赋值变量

同时进行声明与赋值

var b = 789

六,标识符

在JS中所有可以由我们自助命名的都可以称为标识符(例如变量,函数,属性的名字或函数的参数)

【1】格式

第一个字符必须是字母,下划线(_),或者美元符号($)
其他字符可以由字母,下划线,美元符号或者数字构成
注意:按照惯例,ECMAScript标识符需采用驼峰命名法(首字母小写,每个单词的开头字母大写,其余字母小写),但是注意JavaScript中的标识符不能是关键字和保留字符
JS底层保存标识符时,实际上采用Unicode编码,所以理论上,所有的utf-8中含有的内容都可以作为标识符(中文也在utf-8中,但不推荐)

【2】关键字

JavaScript本身已经使用了的单词,我们就不能再用它们充当变量、函数名等标识符

【3】常见关键字

if,throw,delete,in,try,function,this,with,debugger,false,true,null,break,do,instanceof,typeof,case,else,new,var,catch,finally,return,void,continue,for,switch,while,default等

break	立即退出循环,防止再次反复执行任何代码
case	配合switch完成判断
catch	配合try进行错误判断
continue	退出当前循环,根据控制表default	配合
switch 当条件不存在时使用达式还允许继续进行下一次循环
delete	删除一个属性
do	用于do-while,后配合测试循环,即退出条件在执行循环内部的代码之后计算
else	配合if条件判断,用于条件选择的跳转
finally	预防出现异常是否发生异常都会进行处理
for	for语句,循环语句
function	函数关键词
if	if语句用于判断
in	配合for遍历对象&判断某个属性属于某个对象
instanceof	某个对象是不是另一个对象的实例
new	创建一个新的对象
return	从当前函数退出,并从那个函数返回一个值
switch	弥补if的多重判断语句
this	总是指向调用该方法的对象
try	配合catch进行错误判断
typeof	检测变量的数据类型
var	声明变量
void	声明没有返回值
while	while判断语句,可配合do做前置判断,或独立使用做后置判断
with	with语句用于设置代码在特定对象中的作用域
【4】保留字

预留的“关键字”:虽然还不是关键字,但是未来可能会成为关键字,不
能使用它们当充当变量名、函数名等标识符
常见保留字
class,enum,extends,super,const,export,import,implements,let,private,public,yield,interface,package,protected,static等

abstract	表达抽象类
byte	字节
boolean	对象用于将非布尔值转换为布尔值
char	字符Java语言的一个关键字,用来定义一个字符类型 
class	定义“类”
const	声明一个只读的常量,一旦声明,常量的值就不能改变
debugger	语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。
double	双精度浮点型
enum	枚举
export	可以输出一个模块,可以是变量或者方法
extends	用来创建一个普通类或者内建对象的子类
final	修饰用的关键字
float	Float() 函数可解析一个字符串,并返回一个浮点数
goto	无条件转移语句
implements	实现相应接口的方法
import	用于导入由另一个模块导出的绑定
int	整数类型
interface	将一个数值向下取整为最接近的整数的函数
long	表示一种长整型数据,是编程语言中的一种基本数据类型,为long int 的缩写,默认为有符号    长整型
native	表示一种长整型数据,是编程语言中的一种基本数据类型,为long int 的缩写,默认为有符号长整型
package	属性是 Java 解释器所知道的所有包的根
private	内部变量private;@private标签标记标识符为私有
protected	创建实用程序函数
public	全局变量
short	短整型
static	static的变量称为静态变量或类变量
super	super() 函数是用于调用父类(超类)的一个方法
synchronized	实例对象锁
throws	将异常抛给调用者可以使程序能够继续执行下去
transient	一种持久化对象实例的机制
volatile	作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值

七,JavaScript中的字符串

数据类型指的就是字面量的类型
在JavaScript中一共有六种数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined
未定义
Object
对象 symbol(ES6)
【1】string 字符串
在JavaScript中字符串需要使用引号(未加引号为变量/单引号与双引号均可以,但是不能混用和嵌套,如双引号里放双引号,单引号里放单引号)

var str = "hello"
console.log(hello);
``console.log("hello");
在字符串中可以使用\作为转义字符(表示一些特殊符号时可以使用)
str ="elvira:\"略略略"\"
常见转义符号 
《\"表示" \'表示' \n表示换行 \t表示制表符TAB \\表示\》
输出字面量,字符串str alert("str") 
输出变量str alert("str")

【2】Number 数值
在JS中所有的数值都是Number类型(包括整数和浮点数(小数))

var a =123     数字123 
var b ="123"   字符串123

可以使用运算符typeof来检查一个变量的类型
JavaScript中可以表示的数字的最大值 Number.MAX.value(1.7976931348623157e+308) 如果表示的数字超过了最大值,则返回结果为Infinity(表示正无穷 字面量)
JavaScript中可以表示大于0的最小值 Number.MIN.value(5e-324)如果表示的数学小于最小值,则返回结果为-Infinity(表示负无穷 字面量)
Infinity&-Infinity分别是正无穷和负无穷 使用typeof检查Infinity&-Infinity则会返回Number
NaN 是一个特殊的数字,表示没有数字,即Not X Number 使用typeof检查NaN则会返回Number
Number中的计算
整数的运算基本上可以保证精确 浮点数的运算可能得到一个不精确的结果(如0.1+0.2)所以在运算精确度要求较高的运算不要使用JavaScript
【3】Boolean 布尔值
在JavaScript中布尔值只有两个值: true表示真 false表示假
bool是Boolean的缩写
【4】Null 空值
在JavaScript中空值只有一个值:Null
Null值专门用来表示一个为空的对象
使用typeof来检查一个null值是,结果为object

使用typeof来检查一个null值是,结果为object
var a = null``console.log(typeof a)
输出为object

【5】Undefined 未定义
在JavaScript中未定义只有一个值:undefined
当声明一个变量,但不给变量赋值时,它的值就是undefined
未声明变量与未定义变量不一样
使用typeof来检查一个undefined时,则会返回undefined

八,强制类型转换

将一个数据类型强制转换为其他的数据类型
将其他的数据类型,转换为String/Number/Boolean
【1】将其他数据类型转换为String:
法一:
调用被转换数据类型的toString()方法
不会影响到原变量,它会将转换的结果返回
注意:null和undefined这两个值没有toString()方法,如果调用它们的方法,会报错
法二:
调用String()函数,并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时,
对于Number和Boolean实际上就是调用的toString()方法
对于null和undefined,不会调用toString()方法,它会将 null 直接转换为 “null”
将 undefined 直接转换为 “undefined”
【2】其他数据类型转换为Number:
法一:
使用Number()函数
字符串→数字
1.若是纯数字的字符串,直接将其转换为数字
2.若是字符串中有非数字的内容,则转换为NaN
3.若字符串是一个空串或者是一个全是空格的字符串,则转换为0
布尔值→数字
true 转成 1 false 转成 0
空值→数字
null 转成 0
未定义→数字
undefined 转成 NaN
法二:
在JavaScript中这种方法专门用于对付字符串
paresInt() 把一个字符串转换成一个整数
parseFloat() 把一个字符串转换成一个浮点数
对非String使用parseInt()或parseFloat() 它会先将其转换为String然后在操作

九,其他进制中的数字

若需要表示进制的数字需要前缀:16进制0x 8进制0 2进制0b(类似于C)
注意:不是所有的浏览器都支持2进制,如IE,但目前主流浏览器都支持
像"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析,所以输出结果也会不一样
如何解决
可以在parseInt()中传递一个第二个参数,来指定数字的进制(底数)

a = parseInt(a,10);

注意:如果提供了十六进制参数,那么字符串前面的"0x"可以省掉
parseFloat()只解析十进制值,因此不能指定底数

十,运算符

运算符也叫操作符,通过运算符可以对一个或多个值进行运算并获取运算结果

var a = 1327;
var result = typeof a;
console.log(result);	//(number)
console.log(typeof result);		//(string)
【1】

算数运算符+
两个值的加法,对非Number的值会优先转化为数字在进行运算,布尔值的运算真为1、假为0。
任何值和NaN做运算结果都是NaN 字符串相加为拼串(两个字符串拼接为一个字符串) 任何值和字符串做加法运算,会先转化为字符串,在于字符串进行拼串

隐式转化:将任意的数据类型+“”即可将其转换为String var c = 123 c = c+""
使结果明显:(“c= ”+c);
隐式转化:可以通过一个值 -0 *1 /1来将其转化为Number %(两个值取模运算)

两个值减法运算 -
两个值乘法运算 *
两个值除法运算 /
== 不管何值做以上运算时都会自动转换为Number==

【2】一元运算符
一元运算符
只需要一个操作数 
(1)正号不会对数字产生影响 
对其他数据类型使用+使其转化成Number 
(2)负号*会对数字产生影响 
对于非Number的值先转换成Number
【3】自减与自增

(1)自增 ++ 通过自增可以使变量在自身的基础上增加1 对于一个变量自增后原变量的值会立即自增1
自增分成两种:后++(a++) 和 前++(++a)
无论是a++ 还是 ++a,都会立即使原变量的值自增1
不同点
a++ 和 ++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于新值 (自增后的值)
(2)自减 – 通过自减可以使变量在自身的基础上减少1 对于一个变量自减以后,原变量的值会立即自减1
自减分成两种:后–(a–) 和 前–(–a) 无论是a-- 还是 --a 都会立即使原变量的值自减1
不同点
a-- 和 --a的值不同
a-- 是变量的原值 (自减前的值)
–a 是变量的新值 (自减以后的值)

【4】逻辑运算符

(1)逻辑或 || 操作符
如果第一个操作数能够转为 true(不是 false),结果就是第一个操作数,否则结果是第二个操作数

console.log(true || true);     // true  第一个操作数为true则结果为第一个操作数
console.log(true || false);    // true 
console.log(true || 10);       // true
console.log(true || (4 > 7));  // true  

console.log(false || 10);      // 10  第一个操作数不是true,则结果为第二个操作数
console.log(false || "");     // 
console.log(false || 0);       // 0
console.log(0 || 7);           // 7   

(2)逻辑非 ! 操作符
首先把数据转化为布尔值,然后取反,结果为 true 或 false

console.log(!true);         // false  
console.log(!false);        // true 
console.log(!0);            // true
console.log(!"");           // true  
console.log(![1, 2, 3]);    // false

(3)逻辑与 &&操作符
如果第一个操作数为 true,计算结果就是第二个操作数。如果第一个操作数为 false,结果就是 false(特殊数值除外)

console.log(true && true);     // true  操作数为true则结果为第二个操作数
console.log(true && false);    // false 
console.log(true && 10);       // 10
console.log(true && (4 > 7));  // false  

console.log(false && 10);      // false  操作数为false则结果为false
console.log(false && "");      // false
console.log(" " && 0);         // 0
console.log(2 && 7);           // 7   

【5】赋值运算符
= 可以将符号右侧的值赋值给符号左边的变量
+=   :a += 5 等价于 a = a + 5
-=    : a -= 5 等价于 a = a - 5
*=    : a -= 5 等价于 a = a - 5
/=    : a /= 5 等价于 a = a / 5
%=  : a %= 5 等价于 a = a % 5
【6】关系运算符
等于:
等于是简单的做字面值的比较
全等于:
=== 除了做字面值的比较之外,还会比较两个变量的数据类型
var a = 12;
var b = "12";

alert(a == b);//true
alert(a === b);//false
// == 是等同运算符
alert(1 == true); // true
alert(1 === true); // false

通过关系运算符可以比较两个值之间的大小关系
如果关系成立则会返回1
关系不成立则返回0

> 大于号 判断符号左侧的值大于右侧的值
>= 大于等于 判断符号左侧的值大于等于右侧的值
< 小于号 判断符号左侧的值小于右侧的值
<= 小于等于 判断符号左侧的值小于等于右侧的值

如果比较的是两个字符串型的数字,可能会得到不可预期的结果 在比较两个字符串型的数字时,所以一定要记得转型

【8】条件运算符

JavaScript 仅有的使用三个操作数的运算符
一个条件后面会跟一个问号(?)
如果条件为 truthy ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:)
如果条件为 falsy ,则冒号后面的表达式B将会执行
本运算符经常作为 if 语句的简捷形式来使用
如果表达式 condition 的计算结果是 truthy (它和 true 相等或者可以转换成 true ),那么表达式 exprIfTrue 将会被求值

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值