内容简介:脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用作用:控制页面特效展示注: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
[美]Avinash Kaushik / 郑海平、邓天卓 / 清华大学出版社 / 2011-4-26 / 48.00元
向数据驱动型决策转变以及如何利用网站数据来获得竞争优势 在过去几年中,互联网、在线营销以及广告经历了巨大的变革,然而大家处理数据的方式跟几十年前相比还是大同小异,停滞不前。网站分析领域的领跑者Analytics kaushik通过《精通Web Analytics 2.0——用户中心科学与在线统计艺术》提出了下一代网站分析的框架,将能很大程度地帮助你提高组织的能动性和对市场的反应速度。 ......一起来看看 《精通Web Analytics 2.0》 这本书的介绍吧!