一、javascript初识
1.1 javascript是什么
javascript是一种可以用来网页增加交互性的编程语言。
javascript是可插入html页面的编程代码
javascript插入html页面后,由浏览器执行
javascript是一种面向对象的编程语言
javascript是解释型编程语言。
1.2 亲切的hello world
<button type="button" onclick="alert('hello world!')">点击这里</button>
1.3 javascript和java的区别
虽然javascript与java有紧密的联系,但确实两个公司开发的不同的两个产品。Java是sun公司推出的面向对象的程序设计语言,特别适合于internet应用程序开发。
Javascript是netscape公司的产品,其目的是为了扩展netscapenavigator功能,而开发的一种可以嵌入web页面中的基于对象和时间驱动的解释性语言,它的前身是livescript。
1.4 javascript几个基本特点
Javascript语言脚本语言基于对象事件驱动安全跨平台
1.5 面向对象
Javascript是种脚本语言,它可以用来制作与网络无关的,于用户交互作用的复杂软件,他是一种基于对象(object based)和事件驱动(event driver)的编程语言,因而它本身提供了非常丰富的内部对象供设计人员使用。
Javascript是一种解释型的编程语言,其源代码在发往客户端执行之前不需要经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。
1.6 代码编辑
Javascript的代码是一种文本字符格式,可以直接嵌入html文档中,并且可动态装载,编写html文档就像编辑文本文件一样方便。
1.7 javascript代码格式
Javascript的基本架构
Javascript嵌入到html中
Jacascrip保存为文件,外部引入js
Javascript程序代码的英文大小写字母是不同的。
1.7.1程序语句
程序语句结束符号“;“
1.7.2程序批注
”//“单行的注释
“/“和”/“多行的注释
1.8javascript可以做什么
Javascript做页面端动态的交互,动态的东西包括但不限于:表单提交验证、样式改变、用户操作监控与相应、自动化处理、异步加载、页面游戏开发、音频视频处理、图形界面、页面游戏开发、音频视频处理
1.8.1javascript不可以做什么
javascript是一种客户端语言。设计他的目的是在用户的机器上而不是服务器上执行任务,因此,javascript有一些固有的限制,这些限制主要出于如下安全原因。
Javascript不允许写服务器机器上的文件。
不能做读写数据库服务器相关的操作。
不是后台的程序开发语言。
当然有人觉得通过node可以进行服务端的操作,但是javascript是解释性语言,node就像浏览器一样只不过把javascript转成c/c++代码运行,所以这里见仁见智吧;
1.9javascript组成
一个完整的javascript实现是由以下3个不同部分组成的
核心(ECMAScript)–js的核心ECMAScript描述该语言的语法和基本对象。
文档对象模型(DOM)–dom描述了处理网页内容的方法和接口
浏览器对象模型(BOM)–bom描述了与浏览器进行交互的方法和接口。
二、javascript关键字和标识符
2.0javascript关键字和标识符
Javascript关键字是指在javascript语言中有特定含义,成为javascript语法中一部分的那些字。
关键字不能成为变量名和函数名使用。
Break | do | instanceof | typeof | case | else | Volatile |
cinally | return | void | continue | for | switch | Double |
debugger | this | with | while | default | public | Import |
if | throw | delete | in | try | Abstract | Protected |
Int | Short | Boolean | Export | char | Static | Implements |
Extends | Long | Interface | Super | Final | Native | Debugger |
Throws | var | function | catch | Enum | Bute | Transient |
Class | new | Goto | Const | Float | Package | Private |
2.1javasccript变量和常量
常量又叫直接量,可以分为以下几个类别:
数值型(number)
布尔型(boolean)只有true和false
字符型(string)
空值null
未定义undefined。
以上几种类型,又叫js原始数据类型;当然由于这里只是解释变量和常量es6新增symbol,基本数据类型、引用数据类型等不详尽解释;
变量:主要作用是存取数据,提供存放信息的容器
2.1.1变量的命名
不能使用javascript中的关键字作为变量
一个有效的变量,必须以字母开头,中间可以出现数字如text1、test2等
除下划线”_”作为连字符外,变量名称不能有其他符号
区分英文字母大小写
2.1.2变量的声明
Javascript变量可以在使用前先做声明,并可赋值,通过使用var关键字对变量做声明。
var str='hello world';
var num =120;
alert(str);
alert(num);
由于js是弱类型语言,并不严格需要对变量的声明,所以JS中变量声明又分显式申明和隐式申明。
var i=10;//显式申明
i=10;//隐式申明
隐式声明时变量会默认为全局变量,当变量数量增多,引用复杂后,不进行变量的局部声明定义将会是一场灾难,所以我们仍需要时刻注意对变量的局部声明;
说道声明,简单说一下声明提升,也是面试时经常会问到的一个问题;
例如我们声明一个变量
var a = 10;
看起来我们直接生命了一个变量a=10;但是js在编译时,会将这部分拆分成两段var = a声明部分,以及a = 10赋值部分;而所有的声明部分会放在所在的作用域的顶部,这个过程称为声明提升。同样声明一个函数时也会进行声明的提升,并且函数的优先级会比变量更高;
console.log(a)
function a(){console.log('a')}
var a = 123;
//log的结果为ƒ a() { console.log('a') }
再上一到面试题:
+function(){
alert(a);
a();
var a=function(){
console.log(1);
}
function a() {
console.log(2);
}
alert(a)
a()
var c=d=a;
}();
alert(b)
alert(c)
这里就不放结果了,自己cv到console里打个断点看一眼更好理解;这种类型的题目经常是一看就会,稍微变个形,一做就废,所以只能说多看多练才能熟练掌握;
2.2 javascript表达式
在定义完变量后,就可以对他们进行赋值、改变、计算等一系列操作、这一过程通常有叫称一个叫表达式来完成,可以说他是变量、常量、布尔及运算符的集合,因此表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式
2.2.1算术运算符
Javascript中的算术运算符有单目运算符和双目运算符。
运算符 | 描述 | 例 y=5 | 结果 |
---|---|---|---|
+ | 加 | X=y+2 | X=7 |
- | 减 | X=y-2 | X=3 |
* | 乘 | X=y*2 | X=10 |
/ | 除 | X=y/2 | X=2.5 |
% | 求余数(保留整数) | X=y%2 | X=1 |
++ | 递加 | X=++y | X=6 |
– | 递减 | X=–y | X=4 |
此外还有三目运算符==?:==来进行简单的条件运算;一下两段代码执行结果是一致的
if(a>b){
max=a;
}else{
max=b;
}
//等价于
max=a>b?a:b
对于链式写法不同的运算符有着自己的优先级,有兴趣可以戳链接了解下,这里先不赘述
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
2.2.2 比较运算符
比较运算符他的基本操作过程是,首先对他的操作数进行比较,然后返回一个true或false的值,有7个比较运算符。
运算符 | 描述 | 例 x=7 | 结果 |
---|---|---|---|
== | 等于 | X==8 | false |
=== | 全等于(值和类型) | X === “7” | false |
!= | 不等于 | X!=8 | true |
> | 大于 | X>5 | true |
< | 小于 | X<5 | false |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | X<=8 | true |
2.2.3 布尔逻辑运算符
Boolean运算符有三种:&&、||、和!。
下面的真值表描述了逻辑&&运算符的行为
运算数1 | 运算数2 | 结果 |
---|---|---|
True | True | True |
True | False | False |
False | True | False |
False | False | False |
下面的真值表描述了逻辑 | | 运算符的行为
运算数1 | 运算数2 | 结果 |
---|---|---|
True | True | True |
True | False | True |
False | True | True |
False | False | False |
逻辑!运算符的行为如下:
如果运算数是数字0,返回true,
如果运算数是0以外的任何数字,返回false,
如果运算数是null,返回true,
如果运算数是undefined,发生错误。
三、javascript的语句
3.1输出语句
document.write()//输出到页面的内容(document-方法)
alert()//弹出警示框
console.log()//输出到调试窗口
转义字符
Javascript中有些以反斜杠\开头的不可现实的特殊字符。通常称为控制字符,
/b表示退格符;/n折行;/f表示换页;/r表示回车符;/t表示tab符号;/‘表示单引号‘/“表示双引号。
3.2表达式语句
1赋值型
x=y;
x=y+z;
x='hello'
2复合型
{
var name='world';
document.write('hello,'+name);
}
3.2if语句
结构
if(表达式){
//当表达式结果为真是,执行的代码段
}else{
//当表达式结果为假是,执行的代码段
}
3.3switch语句
结构
switch(表达式){
case值1:
//当表达式的值等于值1时候,执行的代码段
break;(跳出)
case值2:
//当表达式的值等于值1时候,执行的代码段}
break;
default://当表达式的值没有找到匹配的值的亲况下执行的代码段
}
3.4for循环语句
结构
for(初始化数值;条件表达式;增量表达式){code}
//当条件表达式值为真时,执行下边的代码。
说明:
初始化参数告诉循环的开始位置,必须赋予变量的初值,
条件适用于判别循环停止时的条件。若条件满足,则执行循环体,否则跳出
增量:主要定义循环控制变量在每次循环时按什么方式变化;
三个主要语句之间,必须是用分号分隔。
Break语句
Break;Break语句从for循环中跳出,跳出switch代码段;
Continue语句;从循环中跳过当前循环的剩下一部分,执行下一次循环。
3.5 for循环语句的嵌套
结构(100以内质数,面试题)
for(var i=2;i<=100;i++){//遍历100以内所有的数
var ctrue=true;//假设所有传过来的数字均为质数
for(var j=2; j<I;j++){//j永远不等于i
if(i%j==0){
ctrue=false;
}
}
if(ctrue){
document.write(i);}
}
}
3.6 while循环语句
结构
while(条件表达式){
//当条件表达式的值为真时,执行下面的代码段。
}
3.7do while 循环语句
结构
do{
//当条件表达式值为真时,执行下边的代码
}while(条件表达式)