简单认识并使用JavaScript【供后端人员作为了解】

栏目: IT技术 · 发布时间: 4年前

内容简介:脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用作用:控制页面特效展示注:JavaScript没有访问系统的权限,并且JavaScript和Java没有任何关系!!!!!

JS(JavaScript)Web的脚本语言

脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用

作用:控制页面特效展示

注:JavaScript没有访问系统的权限,并且JavaScript和 Java 没有任何关系!!!!!

JavaScript组成:

ECMAScript(核心):规定了JS的语法和基本对象

DOM文档对象模型 (标记型文档) :处理网页内容的方法和接口  

BOM浏览器对象模型:与浏览器交互的方法和接口

JavaScript的引入方式:

1. 内部脚本:

<script type="text/javascript">
    ..........
</script>

2. 外部脚本(常用):

<script type="text/javascript" src="...">
</script>

<script>开发规定放在body结束标签之前

目的:增强用户体验性

变量声明:

var 变量名;  //如果没有赋值则自动赋值为undefined

变量名规则和JAVA一样

JavaScript基本数据类型: string、number、boolean、undefined、null

null: 空,一个占位符

undefined:未定义类型。(从null中派生出来的,所以undefined == null)

我们可以通过typeof运算符来分辨变量值属于哪种基本数据类型

注:typeof(null) -----> obj

引用数据类型的创建方式(例子):

var str = new String();

var str = new String;

JavaScript运算符和Java基本一致

特殊: ===全等:对比值且对比类型

JavaScript的逻辑运算符没有(位运算符)& 只有标准三个 &&、||、!

正则对象:确定某个字符串是否符合正则

RegExp对象的创建方法:

①var reg =newRegExp("表达式");

②var reg = /^表达式$/; (直接量方式的正则是对象,不是字符串)【 ^代表开始,$代表结束】

正则对象.text(String); 用来校验字符串是否匹配正则。全部字符匹配返回true。

普通正则表达式:var reg = /表达式/;

普通方式:除非全部字符不符合正则,否则返回true (适用于字符串查找、替换)

直接量方式:适用于表单校验

JS数组对象:可看作Java中的ArrayList集合。

1. var arr = [1,2,3,"a",true]; // 常用的JS数组
2. var arr = newArray(); // 数组长度默认为0
3. var arr = newArray(4);
4. var arr = newArray(1,2); // 数组元素是1,2  (其他基本数据类型也可以)

具体的方法实现:

arr.length; 设置或返回数组中元素的数目。

arr.join(); 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔。

arr.reverse(); 颠倒数组中的元素顺序 (物理反转) 会对当前数组进行操作。

arr.pop() 删除并返回数组最后一个元素。

arr.push() 向数组的末尾添加一个或更多元素,并返回新的长度。

全局函数(global): eval() 计算js字符串,并把他作为脚本代码执行 (可以扩展程序功能)

但只能传递基本数据类型的字符串, 不能传入字符串对象。

encodeURI() 把字符串编码为URI

decodeURI() 解码某个编码的URl

URI是统一资源标识符,标识资源详细名称。 URL是统一资源定位器,定位资源的网络位置。

URI标识资源的详细名称,包含资源名。 URL定位资源的网络位置(包含http:// )。

资源:可以通过浏览器访问的信息统称为资源

字符串转数字: parseInt() 解析一个字符串并返回一个整数。

parseFloat() 解析一个字符串并返回一个浮点数。

均从第一个字符开始解析,如果第一个字符解析错误则会返回NaN。

NaN(Not A Number, 一个数字类型的标识,表示不是一个正确的数字)。

自定义函数/自定义方法: 如果一段代码需要被重复编写使用,那么我们可以将其进行封装成一个函数(方法)中。

作用:增强代码的复用性。

函数格式:

function 方法名(参数列表){
    函数体
}

注意事项:

JavaScript函数定义必须用小写的function。

JavaScript函数无需定义返回值类型,直接在function后面书写方法名即可。

参数的定义无需使用var关键字,否则报错。

JavaScript函数体中,return可以不写,也可以return具体值,或者仅仅写return。

JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,则返回值为undefined

JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义。

因为JavaScript不存在函数重载,所有JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用。

如果形参未赋值,就使用默认值undefined。

自定义对象:

function构造函数:

无形参格式:(相当于java中创建某个class类)

function 对象名(){
    函数体
}

形参格式:

function n(a,b){
    this.name=a;
    this.age=b;
}
// 实现
var p = new n("Charles",20);
p.sex = "man"; //为n对象声明了一个sex并赋值
// 调用只需要 p.name p.age p.sex 即可

应用场景:适用于对象构造及代码复用

对象直接量:开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式成为“对象直接量”。

格式:var 对象名 = {属性名1:“属性值1”,属性名2:“属性值2”......};

该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可。

应用场景:适用于快速创建实例对象及数据封装。

BOM对象:

BOM(Browser Object Model)浏览器对象模型

作用:用来实行浏览器的相关操作(例如:浏览器的地址、弹出消息等)

一般情况下,window代表了BOM对象

window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写

消息框:

alert():警告框,用来弹出警告消息。

注:不同浏览器显示的组件样式不同,无需关注。

confirm():确认框,用于告知用户信息并收集选择 // 可用于电商

返回Boolean类型的返回值

定时器:

启动循环定时器:调用一次就会创建并循环执行一个定时器

格式:setInterval(调用方法,毫秒值);

获取元素节点对象:

4种方式获取对应的元素对象:

document. getElementById(); ---通过元素ID获取对应元素对象

document.getElementsByName(); ---通过元素的name属性获取符合要求的所有元素

document.getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素 //通过标签名

document. getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素

注:通过name属性,获取所有需要的元素,返回是一个元素节点对象数组,如果找不到,就返回空数组 0

元素对象常见属性:

value

元素对象.value   // 获取元素对象

元素对象.value=属性值   // 修改value属性值 修改元素属性

className

元素对象.className 获取元素对象

元素对象.className=属性值 修改class属性值 修改元素样式

注:HTML中checked="checked" 在js当中赋值true 就是默认选中

JS事件驱动机制:事件源、事件、监听器、注册/绑定监听器

事件源:专门产生事件的组件。

事件:由事件源所产生的动作或者事情

监听器:专门处理事件源所产生的事件

注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。

常见的JS事件:

点击事件(onclick):由鼠标或热键点击元素组件时触发。

onclick="函数"

焦点事件(onblur、onfoucs):即整个页面的注意力

通常焦点也能反映出用户目前的关注点,或者正在操作的组件

获取焦点事件:当元素组件获取焦点时触发

onfoucs="函数"

失去焦点事件(onblur):

onblur="函数"

域内容改变事件:元素组件的值发生改变时触发

onchange="函数"

加载完毕事件:元素组件加载完毕就触发

onload="函数"

表单提交事件(onsubmit):表单的提交按钮被点击时触发

主要用于表单的校验  该事件也能控制表单的提交

true 允许表单提交 false 阻止表单提交

键位弹起事件(onkeyup):在组件中输入某些内容时,键盘键位弹起时触发该事件 可以进行输入的实时校验

鼠标移入事件(onmouseover):鼠标移入某个元素组件时触发

鼠标移出事件(onmouseout):鼠标移出某个元素组件时触发

元素事件句柄绑定方式:将事件以元素属性的方式写到标签内部,进而绑定对应函数

事件句柄绑定方式:

优点:①开发快捷 ②传参方便 ③可以绑定多个函数

缺点:JS和HTML代码高度糅合在一起,不利于多个部门的项目开发维护。

DOM绑定方式:对象.事件属性  ①window.onload=run1;  ②window.onload=function(){...};

优点:使得HTML代码和JS代码完全分离

缺点:①不能传递参数。   解决方法:匿名函数是可以的 ②一个事件只能绑定一个函数   解决方法:匿名函数内部是可以绑定多个函数。

以上就是JS的简单基本内容了,可供后端人员了解。

加油!

时间:2020-03-20 22:09:18


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通Web Analytics 2.0

精通Web Analytics 2.0

[美]Avinash Kaushik / 郑海平、邓天卓 / 清华大学出版社 / 2011-4-26 / 48.00元

向数据驱动型决策转变以及如何利用网站数据来获得竞争优势 在过去几年中,互联网、在线营销以及广告经历了巨大的变革,然而大家处理数据的方式跟几十年前相比还是大同小异,停滞不前。网站分析领域的领跑者Analytics kaushik通过《精通Web Analytics 2.0——用户中心科学与在线统计艺术》提出了下一代网站分析的框架,将能很大程度地帮助你提高组织的能动性和对市场的反应速度。 ......一起来看看 《精通Web Analytics 2.0》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具