JavaScript脚本编辑器

JavaScript—脚本语言

js是一个解释型的脚本语言
基本语法
变量命名：var
1、可以使用//字母开头2、首字符之后，可以使用数字//_/字母开头 2、首字符之后，可以使用数字///字母开头2、首字符之后，可以使用数字//_/字母
注意：不允许有空格
js数据类型
两类：基本数据类型：Number，String，Boolean
引用数据类型：Object
alert(" “);调程序（慎用）
console.log(” “);（控制台输出）
console.log(typeof obj);判断输入类型
三种弹出对话框的语句
alert（“”）
prompt(”"):通过prompt输入的数据，统统都是string类型
confirm("")

"+"运算符：一、算术相加，必须都得是number类型
二、如果有一个不为number类型，只起连接作用

数据类型转化：
parseInt(arg) 只保留整数部分
parseFloat(arg)
Number(arg): Number(arg)是个对象
如果给的参数无法转换为number类型数据，返回NaN
判断用户输入是不是数字： isNaN(arg)
Boolean(“0”)->true
Boolean()->false
Boolean("")->false
Boolean(null)->false

三、函数
1、函数声明不用写参数类型，所有函数都以小写字母开头
2、自定义函数不要与js系统函数名相同
3、js中不存在方法重载，后出现的方法会覆盖掉之前的方法
4、变量提升

var num=10;function myFunc(){var num;console.log(num);}myFunc();等价于
var num=10;function myFunc(){console.log(num);var num;}myFunc();

在函数中，后声明的变量，声明前就调用了。它是一种叫“变量提升“的机制。

插入：js 异常处理
try{
}catch(err){
}finally{
}

四、对象
js 中单引号与双引号无区别
内置对象
String
Boolean
Date
Math
Number
Array

//String对象
console.log(str.substr(2,3); //从2号索引位置，连续截取3个字符作为字符串
console.log(str.substring(5,10); //从5号位置到10号位置，组成字符串

//Date对象
var d=new Date();
console.log(d.toLocaleString());—>显示本地时间
console.log(d.toDateString);–>显示年月日
console.log(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay());—>年-月-日

//Math对象

var m=Math.ceil(12.1);consol.log(m);//向上取整（13）m=Math.round(9.5);//四舍五入（9）m=Math.random();//js中的random取随机数，0<=m<1//班里共50个人，随机点名m=parseInt(Math.random()*50);consol.log(m);

五、数组

//Array对象

var  arr=new Array();//var[] arr=new var[3];错误arr[0]="猪八戒";arr[1]="孙悟空";for (var i = 0; i<arr.length; i++) {console.log(arr[i]);}console.log(arr.join(" "));//for ... in语句for(var i in arr){console.log(arr[i]);}

js中Array对象可以当字典使用，.length属性就不能使用了
<–>如果遍历一个字典，只能使用for…in语句
访问对象只能使用key

arr=[1,2,3,4];for (var i = 0; i <arr.length; i++) {console.log(arr[i]);}//字典里的字面量表示方法var nameList={"name":"黄家驹","age":"21","address":"香港"};for (var key in nameList) {console.log(key+":"+nameList[key]);}console.log(nameList.name);console.log(nameList.age);console.log(nameList.address);

六、Json对象

Json对象，它是以”key:value"对集合的一种数据存储方式

var nameList1={"name":"黄家驹","age":21,"address":"香港"};var nameList2={"name":"成龙","age":42,"address":"香港"};var nameList3={"name":"黄晓明","age":32,"address":"上海"};nameList=[{"name":"黄家驹","age":21,"address":"香港"},{"name":"成龙","age":42,"address":"香港"},{"name":"黄晓明","age":32,"address":"上海"}];console.log(nameList.length);for (var i=0;i<nameList.length;i++) {console.log("name"+nameList[i].name);console.log("age"+nameList[i].age);console.log("address"+nameList.address);}

七、js的扩展函数

 var name="张三丰";String.prototype.biaoqing=function(bq){//给String对象扩展一个叫biaoqing的方法if (!bq) {bq="~_~";}return bq+this+bq;}console.log(name.biaoqing("@"));

八、全局变量与局部变量
1.js里没有块级作用域
2. 全局变量与局部变量
全局变量：在函数外部声明的变量是全局变量
在函数内部没声明的局部变量，默认为全局变量
局部变量：在函数内部声明的变量是局部变量

var a=10;function myFun(){a="我爱你们";b=a;}myFun();alert(a);alert(b);

九、事件
事件是js内置好的，所有事件都是以“on”开头
js里事件的三要素：事件源、事件、事件响应程序

十、DOM
DOM：文档对象模型
BOM：BOM>DOM
window对象，是一个顶级对象。window对象给我们提供了一些列的对象、方法、属性，供开发者使用。比如alert就是window对象的一个方法操作页面元素的方法``
由于window是一个顶级对象，所以js中可以省略不写。
DOM给我们提供一系列

<input type="button" value="链接到新浪" onclick="window.location.herf='http://www.sina.com.cn';">

DOM树
元素、节点、标记
html+css+js（类上样式，Id上动作）
十一、事件的注册
1.行内注册
2.动态注册
注意：1.注册代码必须出现在标记之后
2.注册时，只给要绑定的事件响应函数的函数名就行了，不要带圆扩号，带圆括号就成了方法调用。
但是，我们习惯把js 代码写在头部（head）；
终极的动态注册事件方法，就要用到window.onload事件，它在文档全部加载完毕后才会触发
this在任何时候都是指向当前触发事件的事件的事件源（对象）
js在web引用中的三大用处；
1、DOM操作 document.getElementById(),document.getElementByTagName()
2、控制样式
3、动画效果

十二、js控制样式
两种方法:1、行内样式，控制页面
$("test").style="background-color: orange;width: 500px;"
不正确（IE不支持）

$("test").style.backgroundColor="red";$("test").style.width="500px";

 2、控制元素的“类”，达到控制样式的目的需要控制元素的className属性，而不是class属性，class也是js的关键字

十五、Date对象

十六、正则表达式

1、任务：检查用户在文本框中输入的字符串是不是合法的电话号码
2、正则表达式的作用：做字符串的格式匹配
3、注意：正则表达式不是js独有的，Java、c#
4、元字符
1> ".“代表除了\n以外，任意的单个字符
a.b
“a/b”，“a/b”
2> "[ ]"代表在任意一定范围之内的任意1个字符
a[0-9]b ->表示a和b之间必须有一个阿拉伯数字
a0b,a2b
a[xyz]b ->表示在a和b之间必须有一个字符，这个字符必须是x 或 y 或 z
axb,ayb
a[0-9a-zA-Z] ->表示在a和b 之间必须有一个字符，这个字符可以是0-9a-zA-Z之间任意一个字符
aHb

3> “|” 代表或的意思
m|hello ->表示：m或者hello
千万别理解为：mello或者hello
(m|h)ello: mello或者hello

5、限定符
1> 表示前面出现的表达式可以出现0次或者多次（0-n)
abc
ab,abc,abcc
x(abc)*y
xy,xabcy
2> + 表示前面出现的表达式可以出现0次或者多次（0-n）
3 > ? 表示0次或者1次
4 > {n} 表示必须出现n次
x(abc){2}y xabcabcy
x[0-9]{5}
x[a-zA-Z]{5}y
x[^0-9a-z}{5}y

abc,abcabc,ayxabc

只能是abc,其他字符都不能有^abc$
^xy.z$ : xy9z , xy&z , 123xy&z
8、元字符简写方法
1> \d代表数字 [0-9]
2> \D 表示\d的取反
3> \w 表示字母、_ 、数字（汉字）
4> \W 表示\w的取反
5> \s表示空白符（空格，回车，制表符、\t）
6> \S 表示\s的取反

练习：
1、写出中国的电话号码的正则表达式
010-78656432 ，0372-2900006，95580，110，15537241221
^(\d{3,4}-?\d{7,8})|(\d{5})$
2、写出Email的正则表达式，3238301276@qq.com
^\w+@[0-9a-zA-z]+(.[a-zA-Z]+(.[a-zA-Z)+)+$

十七、定时器
js 里有两种定时器
1、每隔一段时间做一件事，（循环一直做，直到你强制停止了定时器）
2、多久之后，干一件事情（只做1次），延迟做一件事
setInterval(function,ms);
//假如我要设置一个定时器，要求5秒灯泡闪一下
1> setInterval（function(){//灯泡闪烁},5000);
2> function shake(){//灯泡闪烁}
setInterval(shake,5000);

 setInterval(shake(),5000);//错误写法

注意：setInterval()又返回值，这个返回值就是指向当前定时器对象的引用
清理定时器 clearInterval(timer);
setTimeOut(function,ms);

十八、this

this只能在函数内部出现，它永远代表的是直接调用该函数的对象。

十九、arguments

它是一个对象，只用在函数里，它的一些成员，是用来表示本函数执行是的一些重要数据
arguments.length :调用函数时传递的实参个数
arguments.callee: 正在执行的函数它自己本身

二十、动画效果

1、匀速动画
2、缓动动画
缓动动画公式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>缓动动画</title><style>#box{width: 100px;height: 100px;background-color: orange;position: absolute;top: 100px;left: 0px;}</style><script>function $(id){return document.getElementById(id);}window.onload=function(){var leader=0;//用来计算每次定时器跳动之后，盒子应该处在的位置var target=0;//目标位置setInterval(function(){leader=leader+(target-leader)/10;$("box").style.left=leader+"px";}, 30);$("btn").onclick=function(){target=500;}}</script>
</head>
<body><input type="button" value="开始" id="btn"><div id="box"> </div>
</body>
</html>

JavaScript脚本编辑器相关推荐

codemirror javascript在线脚本编辑器
codemirror javascript在线脚本编辑器 https://codemirror.net/ <title>codeMirror测试</title><link ...
dw上的php代码如何预览在浏览器_13个面向开发人员的JavaScript代码编辑器和IDE
根据知乎的说法,JavaScript(JS)是一种解释性的计算机编程语言.它最初是作为Web浏览器的一部分实现的,这样客户端脚本就可以与用户交互.控制浏览器.异步通信以及更改显示的文档内容. 在本文中 ...
随笔二——JavaScript脚本语言
模块三 JavaScript脚本语言 JavaScript(简称"JS")由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成.为了确保不同的浏览器 ...
11款最好的JavaScript源代码编辑器
源代码编辑器是一个允许你编辑任何编程语言的源代码的文本编辑器. 它可以是一个独立的应用程序,也可以是内置的一个集成开发环境(IDE). 有一些源代码编辑器能够在程序员编写程序的时候做语法检查,并在第一 ...
【JS】把JavaScript脚本作为书签收藏起来并可单击执行
效果说明从操作上说,是将JavaScript脚本作为书签,想用的时候点一下收藏栏中对应的书签,即可执行脚本: 从作用上说,主要可以对当前页面进行一些脚本上的操作,比如对特定页面DOM进行操作.改变字 ...
如何使用脚本编辑器为您的Google Apps增压
If you use Google Apps, then chances are you're not using them to their full extent. With Google App ...
Unity3D【Mono Develop脚本编辑器介绍】
Mono Develop脚本编辑器介绍 Unity3D目前支持三种语言的脚本,包括c#.JavaScript.Boo,在一个游戏中开发者可以使用一种或者同时使用多种语言来实现脚本的控制. 三种不同的语 ...
Mono Develop脚本编辑器介绍
Mono Develop脚本编辑器介绍 (Unity 自带脚本编辑器) 1.Unity3d目前支持三种语言的脚本程序,包括c#,JavaScript,boo;其中使用最多为c#. 2.注意: (1)项 ...
在苹果Mac上如何开始使用脚本编辑器？
"脚本编辑器"可让用户创建功能强大的脚本.工具,甚至是 App.用户可以创建脚本来执行重复任务.自动化复杂的工作流程以及控制 App 甚至是系统.用户可以使用不同的脚本编写语言,其 ...

JavaScript脚本编辑器

JavaScript脚本编辑器相关推荐

最新文章

热门文章