前端- JavaScript - 总结
1、JavaScript的介绍
javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。
它运行在客户端从而减轻服务器的负担。
.javaScript的特点：
javaScript主要用来向html页面中添加交互行为
javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。
javaScript一般用来编写客户端脚本，如node.js例外。
javaScript是一种解释型语言，边执行边解释无需另外编译。 .javaScript的用途:
解决页面交互和数据交互，最终目的是丰富客户端效果以及数据的有效传递。
.实现页面交互，提升用户体验实现页面特效。即js操作html的dom节构或操作样式。
.客户端表单验证即在数据送达服务端之前进行用户提交信息即时有效地验证，减轻服务器压力。即数据交互。 .javaScript和ECMAScript的关系：
ECMAScript是欧洲计算机制造商协会，基于美国网景通讯公司的Netscape发明的javaScript和
Microsoft公司随后模仿javaScript推出JScript脚本语言制定了ECMAScript标准。 .javaScript的组成：
ECMAScript、DOM、BOM
2、三种引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外链式 -->
<script src="./1.js"></script>
</head>
<body>
<!-- 行内式引入-->
<p id='p1' onclick="clickhandler()">123</p> </body> <!-- 内部式 -->
建议 引入的时候要在body之后，我们要等待所有的dom元素加载完成之后再去执行相应的js操作
<script type="text/javascript">
document.write('<span class="span1">233</span>')
console.log('星儿今天很漂亮！')
</script> </html>
3、js的输出方式
3、变量
1.变量与常量
变量：即在程序运行过程中它的值是允许改变的量。
常量：即在程序运行过程中它的值是不允许改变的量
2.变量的声明和定义
#1.先声明后定义 var dog;
// alert(dog) //undefined 未定义
// 定义
dog = '小黄'; #2.声明立刻定义 var dog_2 = '小红';
console.log(dog_2); //小红
3.变量名规范
.严格区分大小写
.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字 ，不能包含关键字和保留字。
关键字：var number
除了关键字 top name 也尽量不使用。 .推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写
.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
4、javascript中的数据类型
数据类型包括：基本数据类型和引用数据类型
# 5种基本数据类型
基本数据类型指的是简单的数据段
1.number
var a = 123;
2.string
var str = ''
3.boolean
var b1 = false;
4.null
var c1 = null;//空对象. object
5.undefined
var d1;
//表示变量未定义
#5种引用数据类型
引用数据类型指的是有多个值构成的对象 Function
Object
Arrray
String
Date
查看数据类型： console.log(typeof b1);
5、数据类型的转换
<script type="text/javascript">
// 1.将数字类型 转换成字符串类型
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
// 强制类型转换 String() toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
// 2.将字符串类型 转换成数字类型
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
// 3.在我们js中所有的数据类型 都被转化为boolean类型
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity; //
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0真1
console.log(Boolean(b7))
</script>
6、js的运算符
1，算术运算符(+ - * / % ++ -- )
2，比较运算符(> >= < <= != == === !==)
3，逻辑运算符(&& || ！)
4，赋值运算符(= += -= *= /=)
5，字符串运算符(+ 连接，两边操作数有一个或两个是字符串就做连接运算)
<script type="text/javascript">
// 1.赋值运算符
var money = prompt('请输入金额....');
var saveMoney = money * (1+0.02);
console.log(saveMoney)
// 2.算数运算 + - * / %
var a = 10;
var b = 9;
var sum = a + b;
var min = a - b;
var div = a /b;
var lef = a % b;
// 3.复合运算符 a++ ++a
var c = 7,d = 8;
// d = c + d;
d+=c;
console.log(d);
d++; //d = d+1
console.log(d);
// 自增 自减
// d++ :先赋值后++ 先将d的值赋值给c1 然后再让d加上1 对d赋值
var c1 = d++;
console.log(c1); //
console.log(d); //
// ++d:先相加后赋值
var c2 = ++d;
console.log(c2); //
// 3.比较运算符
// > ,<, >=, <=,== ,===
console.log(5>6);
// 隐式转换== 比较的是值的大小。=== 是类型和值都进行比较
console.log("5" === 5);
// 4.逻辑运算符 && and || or
console.log(false && false); // && 都真为真 只要有一个是假就为假
console.log(false || false); // || 有真就真。或者的意思
</script>
特殊：字符串拼接
// 不能对字符串进行+运算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1+a2); //
console.log(typeof(a1*a2));
6、流程控制
.if语句：
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
注意：浏览器解析代码的顺序 是从上往下执行，从左往右 .switch:
var gameScore = 'good';
switch(gameScore){
case 'best':
console.log('best');
break;
case 'good':
console.log('good');
break;
case 'better':
console.log('better');
break;
default:
console.log('default')
} .while:
循环三步走：
.初始化循环变量
.判断循环条件
.更新循环变量 var j=;
while(j<=){
if(j%===){
console.log(j)
}
j++;
} .do_while:
.初始化循环变量 .判断循环条件 .更新循环变量
//不管有没有满足while中的条件do里面的代码都会走一次
var i = ;
do{
console.log(i);
i++;
}while(i<=); .for:
.初始化 .循环条件 .更新循环变量
for(var i = ; i < ; i++){
if(i% === ){
console.log(i)
}
}
for(var i=;i<=;i++){
for(var j=;j<=;j++){
document.write('*')
}
document.write('<br>')
}
# 打印三角形
*
* *
* * *
* * * *
* * * * *
* * * * * * for(var i=;i<=;i++){
for(var j=;j<=i;j++){
document.write('*')
}
document.write('<br>')
} # 打印三角形 * *-
*** *-
***** *-
******* *-
********* *-
*********** *- for(var m=;m<=;m++){
for(var n1=m;n1<;n1++){
document.write(' ')
}
for(var n2=;n2<=*m-;n2++){
document.write('*')
}
document.write('<br>')
} # 打印三角形 * *-
*** *-
***** *-
******* *-
********* *-
*********** *-
*********
*******
*****
***
* for(var a=;a<=;a++){
if(a<=) {
for (var a1 = a; a1 < ; a1++) {
document.write(' ')
}
}else{
for(var a2=;a2<=a; a2++){
document.write(' ')
}
}
if(a<=){
for(var a3=;a3<=*a-;a3++){
document.write('*')
}
}else{
for(var a4=a*-;a4<;a4++){
document.write('*')
}
}
document.write('<br>')
}
7.内置对象
数组Array，字符串String，日期Date，Math内置对象
内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法
http://www.cnblogs.com/venicid/p/9128094.html
8.函数和Object
在javascript中,函数是一等公民,函数在javascript是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.
<script type="text/javascript"> //函数：
// 1.函数的声明
//js中的函数的声明 记得：有函数的声明 就一定有调用
function add(){
alert("函数被调用了")；
alert(this);
}
add();
或者：
var add = function(){
alert('函数被调用了')；
}
add(); // 2.带参数 形参 实参
function add2(x,y) {
alert(x+y)
}
add2(3,4);
// 3.函数有返回值
function add3(x,y) {
return x+y;
}
alert(add3(5,6));
</script>
<script type="text/javascript"> //对象：
// 对象的创建：
// 1.字面量方式创建 推荐使用这种方式 简单 直观
var stu = {
name:'alex',
age:22,
fav:'鸡汤'
};
点语法 包括get方法 set方法
console.log(stu.name);
stu.age = 34; // set
console.log(stu.age); // 2.Object() 构造函数 1.首字母大写 碰见构造函数 要想创建对象new
var obj = new Object();
obj.name = 'xiaoma';
console.log(obj); // 3.构造函数 使用构造函数得方式创建对象 推荐使用的构造函数的方式：
1.函数名首字母要大写
2.构造函数不需要return
3.为对象添加成员变量 this.name = 'alex' var Stu = function () {
this.name = 'alex';
this.age = 18;
this.fav = function () {
console.log('吃饭饭')
}
};
</script>
对象补充：json转换
<script type="text/javascript">
var json1 = {
name : '张三',
age : '李四',
fav : '唱歌'
};
var str1 = '{"name": "Alex", "age": 18}'; //将JSON转化为JSON字符串
var jsonStr1 = JSON.stringify(json1)
console.log(jsonStr1) //将json字符串转化为JSON
var json2 = JSON.parse(str1);
console.log(json2) </script>
对象 详解：
创建对象的几种常用方式：
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
http://www.cnblogs.com/venicid/p/9128149.html#_label1
9、定时器
setInterval() 在指定时间为周期循环执行
setTimeout() 只在指定时间后执行一次
1.setTimeout（）
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器 2.setInterval（）
//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
10、正则表达式
https://www.processon.com/view/link/5add4ef9e4b04691064d5e37
（1）创建方式
//RegExp对象
//1.构造函数创建
//参数1 正则表达式（不能有空格）
//参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧）
var str = 'hello World';
var reg1 = new RegExp('e','ig');
console.log(reg1)
//2.字面量方式创建
var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配
（2）方法：
var str = 'hello world';
var reg2 = /d/gi; //1.test() 检测字符串中是否包含定义字符模式，返回布尔值
console.log(reg2.test(str)); //true false //2.exec() 检索字符串中指定的值。匹配成功返回一个数组，匹配失败返回null
console.log(reg2.exec(str)); //["d", index: 10, input: "hello world", groups: undefined] //3.match() 在字符串内检索指定的值,匹配成功返回存放匹配结果的数组，否则返回null
var reg2 = /o/gi;
console.log(str.match(reg2)); //(2) ["o", "o"] //4.search() 在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置，否则返回-1。
console.log(str.search(reg2)); // //5.replace() 替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段。
console.log(str.replace(reg2,"*")) //hello worl* //6.split() 把一个字符串分割成字符串数组
var reg2 = /o/gi;
console.log(str.split(reg2)); // (3)["hell", " w", "rld"]
（3）元字符:单个字符和数字
//元字符
//1 . 匹配除换行符以为的任意字符
var str = "oweb";
var reg = /./g;
console.log(reg.exec(str));
var str = "www/baidu/com";
var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\
console.log(reg.exec(str)); //2. [] 匹配[]里面的任意一个字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字
console.log(reg1.exec(str1)); var str2 = "1s34";
var reg2 = /[0-9][0-9][0-9]/g;
console.log(reg2.exec(str2)); //3. [^] 所有不在这个范围内的字符
var str3 = "abd";
var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符
console.log(reg3.exec(str3)); //4. \
var str4 = "web";
var reg4 = /\d/g; //匹配数字
var reg5 = /\D/g; //非数字
console.log(reg4.exec(str4)); //null
console.log(reg5.exec(str4)); //w var reg6 = /\w/g; //匹配数字 字母 下划线_
var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符
console.log(reg6.exec(str4)); //w
console.log(reg7.exec(str4)); //null var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str4)); //null
console.log(reg9.exec(str4)); //w //5 锚字符 ^以什么开头 $以什么结尾
var str = "www.";
var reg10 = /^www/g; // ^字符
console.log(reg10.exec(str)); var reg11 = /www\.$/g; //字符$
console.log(reg11.exec(str));
（4）重复字符
//重复的字符
//1. ? 匹配前面的字符0个或一个 ，
var strs = "webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs)); //2. * 匹配0个或任意多个字符 尽可能多的匹配
var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个
console.log(reg13.exec(strs)); //3. + 至少匹配一次
var reg14 = /\d+/g;
console.log(reg14.exec(strs)); //4. {4}
var stra = "11274567800";
var rega = /^1\d{10}$/g; //匹配连续的四个数字
console.log(rega.exec(stra)); //{1,4} 最少一个最多4个
var strb = "edg";
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb)); //5. || 竖线 或者
var strc = "www.google"; //baidu google ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc)); //6. () 分组
var strc = "www.google"; //baidu google ujiuye
var regc = /www.(baidu)|(google)|(ujiuye)/g;
console.log(regc.exec(strc)); console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3); var str = "helloworld";
var reg = /(hello)(world)/g;
/* console.log(reg.exec(str));
console.log(RegExp.$1);*/
console.log(str.replace(reg,"$2 $1"));
（5）正则表达式练习
<script type="text/javascript">
//正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
window.onload = function () {
//1.检索字符串中是否不包含字母
var str = '12';
var reg1 = /[^a-zA-Z]/g;
console.log(reg1.test(str));
if(reg1.test(str)){
console.log('不包含');
}else{
console.log('包含');
}
//2.去除字符串首尾空格
var str2 = ' hello world! ';
//开头的空格
var reg =/^\s+/ig; // + 1到多次！
var str3 = str2.replace(reg,"");
var reg2 = /\s+$/ig;
var str4 = str3.replace(reg2,"");
console.log("|"+str4+"|");
//3.检查用户账号
function checkUser(str) {
var re = /^[a-zA-Z]\w{3,15}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkUser('alex_haha');
//4.手机号码 11位数字以1开头
function checkMobile(str) {
var re = /^1\d{10}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkMobile('13788881239');
checkMobile('137893813323');
//5.电话号码 区号+号码 区号以0开头 3位或4位
// 号码由7位或8位数字组成
// 区号与号码之间可以无连接符，也可以"-"连接
function checkPhone(str) {
var re = /^0\d{2,3}-?\d{7,8}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkPhone("095-12345678");
//6.邮箱
//规则：第一部分@第二部分
//第一部分：由字母 数字 下划线 短线 - 点号 . 组成
//第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成
// 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn,
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkEmail('alex@cnbolgs.cn');
}
</script>
11、DOM
19-[JavaScript]-DOM
12、BOM
20-[JavaScript]-BOM
前端- JavaScript - 总结的更多相关文章
- 前端JavaScript规范
前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...
- 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 前端javascript
前端 JavaScript javaScript----数据库jquery $(function(){ 执行代码 }); 基本语法:$(selector).action() $(" ...
- Fundebug前端JavaScript插件更新至1.2.0
摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...
- Fundebug前端JavaScript插件更新至1.8.2，修复2个小BUG
摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
随机推荐
- Sqlserver2014 迁移数据库
由于当初安装sqlserver 的时候选择默认安装的路径,导致现在c盘爆满,安装不了其它软件.因此想到了迁移数据库,网上搜索了一些简介,但是缺少一些步骤,导致数据库附加的时候失败.现总结如下: 1.将 ...
- 在table中选中某条数据，让其显示对应详细信息
在第一个页面中使用 ccms.dialog.open({url:url+$(this).attr("code"),id:"dialogPic",width:10 ...
- [翻译] CRPixellatedView-用CIPixellate滤镜动态渲染UIView
CRPixellatedView-用CIPixellate滤镜动态渲染UIView https://github.com/chroman/CRPixellatedView 本人测试的效果: Usage ...
- 铁乐学python_day24_面向对象进阶1_内置方法
铁乐学python_day24_面向对象进阶1_内置方法 题外话1: 学习方法[wwwh] what where why how 是什么,用在哪里,为什么,怎么用 学习到一个新知识点的时候,多问问上面 ...
- 线段树&&线段树的创建线段树的查询&&单节点更新&&区间更新
目录 线段树 什么是线段树? 线段树的创建 线段树的查询 单节点更新 区间更新 未完待续 线段树 实现问题:常用于求数组区间最小值 时间复杂度:(1).建树复杂度:nlogn.(2).线段树算法复杂度 ...
- 1.6 Navigating This Book（本书导航）
1.6 Navigating This Book(本书导航) 如果之前没有接触过Python,那么你应该在第2章和第3章多花一些时间.这两章介绍了Python语言的特性和IPython shell以及 ...
- Mysql数据库的mysql Schema 究竟有哪些东西& 手工注入的基础要领
#查看数据库版本号 mysql> select @@version; +------------+ | @@version | +------------+ | 5.5.16-log | +- ...
- Linux配置CentOs7.4(网络连接处理)
说明:CentOS 7.0默认安装好之后是没有自动开启网络连接的! 进入登录界面 账号输入root 回车 再输入上面设置的root密码回车 系统登录成功 设置IP地址.网关DNS cd /etc/s ...
- 【CF917D】Stranger Trees
题目 看题解的时候才突然发现\(zky\)讲过这道题啊,我现在怕不是一个老年人了 众所周知矩阵树求得是这个 \[\sum_{T}\prod_{e\in T}w_e\] 而我们现在的这个问题有些鬼畜了, ...
- 「GXOI / GZOI2019」旧词
题目 确定这不是思博题 看起来很神仙,本来以为是\([LNOI2014]LCA\)的加强版,结果发现一个点的贡献是\(s_i\times (deep_i^k-(deep_i-1)^k)\),\(s_i ...