Javascript WEB前端开发总结

初始JavaScript

JavaScript,通常缩写为JS,是一种高级的,直譯語言的编程语言。 JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。 它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。

JS是用来做什么的

1.用来表单验证
2.制作页面特效
3.制作页面特效

引入方式

1.在页面中写上scirpt标签 在标签写JS代码 任何地方都可以 通常在BODY后

2.外部引入 通过这种方式引入文件后 不能在标签中间写JS代码 否则浏览器不会读取.

3.直接在标签中使用

变量

XXX同学你好,你是JavaScript班的学生 ,你的班主任是张老师。 XXX就是变量

变量声明和赋值

1.使用关键字var+自定义变量名。自定义变量名 :不能以数字开头 组成部分只能有数字 字母 下划线.

2.为变量赋值 var num=10
注:
1.允许在一条语句中声明多个变量,变量之间用逗号隔开
2.声明变量时可以不用var 但是不推荐
3.如果声明变量 但是没有赋值 默认为undefined

变量命名规范

1.不要使用系统关键字
2.最好能见名知意
3.尽量使用小驼峰命名法 var userName; var UserName(大驼峰)
注:

变量名只要没出现在等于号的左边 一律都是取值操作

掌握JavaScript数据类型

1.number 数字类型
2.string 字符串类型
3.boolean类型 布尔类型 true false 取值 1或0
4.undefined 表示数据未定义
5.null 表示不存在
6.表达式和运算符 var x=y=10; + -*/%....

逻辑运算符

!(让表达式不成立”非“)
&&(与 两个同时成立)
||(或 成立其中一个即可)

数据类型转换

1.数据类型转换和强制转换

隐式转换 又称自动转换

1.数字加字符串 将数字转换为字符串

var num =18;
var str ="hello"
var sum = num + str;//结果为18hello

2.数字加布尔 将布尔转为数字

var bool = true;
var num =18;
var sum = num + bool;

3.字符串+布尔 将布尔转换成字符串

var bool = true;
var str="hello";
var sum = str+ bool;

4.布尔+布尔 将布尔转换为数字

var bool = true;
var bol=fales;
var sum = bol+ bool;

强制转换

1.toString 将任意类型的数据转换成字符串语法:var result = 变量.toString();

2.parseInt(); 将任意类型转换成整数如果转换不成功,结果为NaN(不是一个数值);var demo1 =parseInt(numb1);

3.parseFloat()将任意类型转换成小数如果不成功 为NaN

4.Number将任意类型转换成Number var result = Number(变量)如果包含非法字符 则返回为NaN

2.常量

定义:在程序中,声明之后不可以被修改的值

循环

FOR循环

for循环
语法:
for(条件一;条件二;条件三){
}
条件一:起始值
条件二:值的限制
条件三:起始值变化

WHILE循环

var.....
while(表达式){
     循环体
               迭代条件
}
注意:使用while首先要在外部申明一个已知变量 再循环过程中,一定要让这个值发生变化 否则死循环!
do while循环

DO WHILE循环

var ...
do{
循环体
迭代条件
}while(表达式)
无论是否满足条件 首先执行一遍循环体!然后在进行判断 如果满足条件就继续执行循环体

FOR IN 循环(针对数组)

var arr =[.....];
for(var i in arr){

}

跳出循环

1.break跳出循环 继续执行循环外面的代码;破坏了本次循环!

2.continue 跳出本次循环 继续下次循环!

SWITCH

switch(条件){
    case 判断变量值:
    程序体;
                 break;//结束判断,跳出!
      ....
     default
     当上面的条件都不满足执行此行代码!
     break;
}

数组处理

数组

var arr = [......]; 其中,arr 就是一个数组

访问数组属性

arr. 属性

数组方法

.push()方法 往数组最后一位添加成员!
.unshift()    往数组第一位添加成员!
.pop()     将数组最后一位成员弹出!
.shift ()   将数组第一位成员弹出!
.join()  将数组转换成字符串!
.split() 将字符串重新生成数组!括号里面写分隔符(自定义的);看字符串 
.reverse()  将数组成员倒序排列
.concat  ()将两个数组进行合并!
.splice(1,2,3,4)将数组中从下标为1的成员开始删除两个值 并在删除的位置添加3和4

函数

系统函数

parseInt() //转换成整数
parseFloat()//转成浮点数
prompt()//弹出
alert()//弹出

自定义函数

function函数名([参数一,参数二,.....]),可能有参数 可能还没有{

            代码块;

            [return 返回值]
}

1.带参数的函数 注意:形参随便定义,只在函数内部有效。函数名,数字/字母/下划线(不可以数字开头!) 小驼峰命名法。

2.不带参的函数 定义了函数,不调用是不会执行的

3.匿名函数

变量

1.全局变量:在全局生效

2.局部变量:只在块级生效

定时器

语法
var time = setInterval function(){
},时间毫秒数

clearInterval(time);清除

Math方法

ceil 上舍入
floor 下舍入
round 四舍五入
random 随机数 0.0---1.0

String对象用于文本处理

方法:
toLowerCase()将字符串中所有的大些变成小写

toUpperCase()将字符串中所有的小写变成大写

charAt(index) 返回指定下标的值

indexOf()返回指定值的下标 如果没有返回-1

substring(index1,index2)截取index1到index2的字符串 不包含index2 如果index2为0或者负数,则是从开始截取到index1(index1).

substr(index,length)从下标index开始截取length长度的字符串

split(分隔符) 将字符串分割成数组

window 顶级对象模型!!!!

浏览器对象模型

4个对象
history  第二级
location  第二级
document 第二级
window.history
back()返回
go()前进
window.location 
属性
href
方法 
reload()//刷新 
replace()取代
window.document

文档对象模型

window.document

事件

鼠标单击事件

1.在标签中写onclick,执行后面的JS代码

2.通过Dom操作节点,给节点绑定事件

onload事件

1.放在body中

2.在js中,放在window对象中

window.onload=function(){

}

onchange事件

检测input输入的内容是否发生变化,用户输入完成后,点击文本框以外的区域,是文本框失去焦点才触发的事件

事件绑定

1.获取节点,使用on的方式绑定事件

2.行内使用onclick属性

3.事件监听(addEVentListener)事件监听 移出事件remove addEVentListener

常用的JS事件

鼠标事件

onclick  单击
ondblclick 鼠标双击
onmouseover 鼠标移入
onmouseout  鼠标移出
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标抬起

键盘事件

onkeydown  按键按下
onkeyup     按键抬起
onkeypress  按键释放的一瞬间

正则表达式

正则表达式

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE),又称正规表示式、正規表示法、正規運算式、規則運算式、常規表示法,是计算机科学的一个概念。 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

正则表达式
/边界符/
【a-z】取值范围
* 匹配次数 最少0次
+ 最少一次
? 匹配0次或者1次
\d 匹配0-9
.点 匹配除了换行和回车之外的所有字符
{n} 匹配n次 n为一个非负整数
{n,m} 匹配最少N次 最大m次
【abc】字符集和
【^ abc】取反
\b单词边界
\d数字
\s 匹配任何不可见的字符
\w 匹配包括下划线的任何单词字符

reg.test(value) 返回的是Boolean
reg.exec(value) 返回的匹配内容 下标和input值
str.search(reg)  返回搜索内容的下标 没有则返回-1
str.match(reg) 返回匹配到的内容(数组)
str.replace(reg,text)将匹配的内容换成text

修饰符

1.i 对大小写不敏感
2.g 从头匹配到尾

javascript基础篇总结结束,关于高级篇另开一篇

你可能感兴趣的:(Javascript WEB前端开发总结)