Java Script 基本知识点
JavaScript是一种基于对象和事件驱动的脚本语言,它提供了一些专有的类、对象及函数
1.基本数据类型
JavaScript提供了4种基本的数据类型用来处理数字和文字
Number、String、Null、Boolean
1).变量
语法:
var 变量名=值;
变量命名规范:
1)变量名由字母、数字、下划线和$组成
2)变量名的首字母必须是字母、$或下划线
3)不能使用JavaScript 保留字,注意区分大小写
2).类型转换
parseInt (String)
将字符串转换为整型数字
parseFloat(String)
将字符串转换为浮点型数字
3).运算符
算术运算符
+、-、 * 、 / 、%、++、--
比较运算符
==、!=、>、>=、<、<=
逻辑运算符
&&、||、!
4).注释
JavaScript 注释有两种
单行注释
语法://注释内容
多行注释
语法:/*注释内容*/
5).流程控制语句
语法:
if条件语句
switch多分支语句
for、while、do…while循环语句
break 和 continue 语句
break 语句来中断一个循环的运行。
continue 语句用来跳过余下的代码块而直接转到下一次循环继续执行
6).函数的定义与调用
a.函数声明语法:
function 函数名 (参数列表)
{
b.函数代码块;
return 表达式;
}
c.函数调用语法:
函数名(实参1,实参2…) ;
var 变量名=函数名(实参1,实参2…);
7).变量的作用域
根据变量的作用范围,JavaScript中的变量可以分为全局变量和局部变量
8).事件处理
浏览器事件
onload、unonload、onsubmit
鼠标事件
onMouseMove、onMouseOver、onMouseOut、onMouseDown、onMouseUp
文本框事件
onchange、onselect、onfocus、onblur、
9).其他
onclick
2.浏览器对象模型
浏览器对象模型是用于描述对象与对象之间层次关系的模型,该对象模型提供了独立于
内容的、可以与浏览器窗口进行互动的对象结构
1).浏览器对象的分层结构
window对象
常用属性
常用方法
window属性和方法事例
var money=prompt("请输入取款金额",100);//接收用户录入对话框
alert(money);//输出100
var state=confirm("你取款金额为"+money);//确认和取消按钮对话框
alert(state);//返回true或false
setTimeout(“调用的函数”,”毫秒数”)
window.open("adv.html","","相关属性");
height: 窗口高度;
width: 窗口宽度;
top: 窗口距离屏幕上方的象素值;
left:窗口距离屏幕左侧的象素值;
toolbar: 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable: 是否允许改变窗口大小,yes或1为允许
location: 是否显示地址栏,yes或1为允许
status:是否显示状态栏内的信息,yes或1为允许;
history对象
作用:
history对象用来管理当前窗口最近访问过的URL
常用方法:
注意:
history.go(-1) 相当于 history.back()
history.go(1) 相当于 history.forward()
例子:
<a href="javascript:history.back()">后退</a>
相当于
<a href="javascript:history.go(-1)">后退</a>
<a href="javascript:history.forward()">前进</a>
相当于
<a href="javascript:history.go(1)">后退</a>
location对象
作用:
location对象用来管理当前打开窗口的URL信息
常用属性和方法:
例子:
window.location.href=”http://www.baidu.com”;
3.DOM概述
DOM-Document Object Model ,它是W3C国际组织的一套Web标准
DOM是一种与浏览器、平台、语言无关的接口
document对象
作用:
document对象代表浏览器窗口中加载的整个HTML文档
常用属性:
常用方法:
document对象访问页面元素的常用方式有四种
1)document.all.页面元素名称;
2)document.表单名.元素名称;
3)document.getElementById("ID名称");
4)document.getElementsByName("元素名称");
----------------------------------------------------------------------------------------
1. 属性示例:开灯关灯
<script type="text/javascript">
function setColor_()
{
var type =document.getElementById("setColor").value;
if(type=="关灯")
{
document.getElementById("setColor").value="开灯";
document.bgColor="black";
}else
{
document.getElementById("setColor").value="关灯";
document.bgColor="white";
}
}
</script>
2、
<input
type="button"
value="关灯"
id="setColor"
οnclick="setColor_()"
name="setColor"/>
属性示例:图片广告随滚动条滚动而滚动
核心代码如下:
1、
<script type="text/javascript">
function move()
{
document.getElementById("adv").style.top=400+document.documentElement.scrollTop+"px";
}
window.οnscrοll=move;
</script>
2、
<img src="足够大的背景图片" />
<div
id="adv"
style="position:absolute;
top:400px; left:10px;"><img src="需要漂浮的小广告图片"/></div>
方法示例:全选操作
核心代码如下:
1、
<script type="text/javascript">
function isChecked(state)
{
var v=document.getElementsByName("lover");
for(var i=0;i<v.length;i++)
{
if(v[i].type=="checkbox")
{
v[i].checked=state;
}
}
}
</script>
2、
<input type="radio" name="ischeck" οnclick="isChecked(true)" />全选<input type="radio" name="ischeck" οnclick="isChecked(false)"/>全否<br />
<a href="javascript:isChecked(true)">全选</a>
<a href="javascript:isChecked(false)">全否</a>
<hr />
<input type="checkbox" id="lover" name="lover"/>体育
<input type="checkbox" id="lover"name="lover"/>音乐
<input type="checkbox" id="lover" name="lover"/>美术
节点信息
document文档对象可以创建、添加、删除DOM支持的任何类型的节点
1、 使用document.createElement创建节点
document.createElement的功能是创建一个指定标签名的元素节点,标签名可以是任
何名字,包括自定义的标签
2、使用appendChild(node)将节点追加到所有子节点的末尾
3、使用insertBefore(newNode,node)将节点newNode插入到节点node之前
4、使用removeChild删除节点
innerHTML属性
innerHTML是DOM节点的一个属性,它表示节点的开始标签与结标签之间的内容
表单验证
作用: 表单验证可以保证提交数据的准确性
表单验证思路:
1) 编写表单处理函数,验证数据的合法性
2) 处理表单的onsubmit事件
String对象
常用属性 :
常用方法
示例:
var name="andy_liu";
var first1=name.substr(1,4); //从下表为1开始截取4个长度的字符
alert(first1); ///提示:ndy_
var first2=name.substring(1,4); //从下表为1开始取到下表为4的前一位结束
alert(first2); ///提示:ndy
例子:
var data = "宝马,大众,丰田";
var cars = data.split(",");//按逗号分隔进行拆分
for(var i=0;i<cars.length;i++){
alert(cars[i]);
}
正则表达式
定义:正则表达式是一种对文字进行模糊匹配的语言
正则表达式的功能:
1)实现数据格式的有效性验证
2)实现文本内容的替换和删除
3)实现文本模糊搜索
RegExp对象
RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象
两种创建方式:
1)var reg=new RegExp(“表达式”,”附加参数”);
2)var reg=/表达式/附加参数
RegExp对象的附加参数:
g:全局匹配
i:不区分大小写匹配
m:可以进行多行匹配
常用方法
test示例:
var str="CATs";
var regex=new RegExp("cat",'gi');
var result=regex.test(str);
document.write(result);
输出结果:true
exec示例:
var str="this is cat ,that is cat";
var pattern=new RegExp("cat","g");
var arr;
while((arr=pattern.exec(str))!=null){
document.write("在索引"+arr.index+"位置出现了");
document.write(arr+"<br/>");
}
注意:exec方法返回的数组有3个属性,分别是input、index和lastIndex
表达式模式
特殊字符
限定符
定位符
查找和替换
常用正则表达式
需求 |
表达式 |
匹配身份证号码 |
^d{15}|d{18}$ |
验证电子邮件格式 |
^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$ |
验证一个月的天数 |
^([0-2])\d$|^3(0|1)$ |
验证合法的标识名 |
^[a-zA-Z]\w{4,15}$ |
匹配中文字符 |
[u4e00-u9fa5] |
总结:
u 表单是用来收集用户信息的容器,onsubmit事件为提交表单时触发的事件
u 表单验证分为两步:第一步是编写验证函数验证表单数据的合法性,第二步是处理表单onsubmit,即在表单提交事件中调用表单验证函数
u String对象用于处理字符串,如获取字符串的长度、搜索字符串中的字符、转换字符的大小写等
u 正则表达式是一种对文字进行模糊匹配的语言,常用方法有test、exec等
u 使用正则表达式可以实现:
n 测试字符串是否匹配某个模式,从而实现数据格式的有效性验证
n 修正满足某正则表达式模式的文本内容
n 搜索某一类型的文本内容
u String对象中的match、search、replace方法以RegExp为参数完成模式搜索和替换功能
表单验证高级特效
转载于:https://www.cnblogs.com/scriptzky/p/3950536.html
Java Script 基本知识点相关推荐
- 屏蔽“网页上有错误”提示,屏蔽java script 错误的代码
<script> window.onerror=hide_error_message; function hide_error_message() {return true;} </ ...
- 清华学长免费分享Java基础核心知识点基础篇(2)
Java编程作为入门比较容易的编程语言,发展前景很好,非常适合零基础的小白入门学习. 对所学知识点没有全面了解,学习的过程中容易进入误区,影响学习进度,成从入门到放弃.所以,今天播妞整理了一些适合小白 ...
- Java刷题知识点之TCP、UDP、TCP和UDP的区别、socket、TCP编程的客户端一般步骤、TCP编程的服务器端一般步骤、UDP编程的客户端一般步骤、UDP编程的服务器端一般步骤...
TCP和UDP是两个传输层协议,广泛应用于网络中不同主机之间传输数据.对任何程序员来说,熟悉TCP和UDP的工作方式都是至关重要的.这就是为什么TCP和UDP是一个流行的Java编程面试问题. Jav ...
- java发送get请求_如何快速掌握Java技术 Tomcat知识点有哪些
如何快速掌握Java技术?Tomcat知识点概述有哪些?每一个对JavaWeb有所了解的人,都知道Tomcat是干什么用的!对,它是一个Servlet和JSP容器.然而,即使看过.使用过Tomcat, ...
- Java后台架构知识点(待补充)
Java后台架构知识点汇总
- java script 添加控件,【更新】GLG工具包Visualization and HMI Toolkit更新至v3.6,支持Java Script...
Visualization and HMI Toolkit的为开发高级图形的动态界面而设计的艺术化的框架:它不仅仅是简单的按键与菜单,它是全动态的能显示动态数据以及能反映用户互动的图片对象.它不仅仅是 ...
- 高级 Java 面试通关知识点整理
转载自 高级 Java 面试通关知识点整理 1.常用设计模式 单例模式:懒汉式.饿汉式.双重校验锁.静态加载,内部类加载.枚举类加载.保证一个类仅有一个实例,并提供一个访问它的全局访问点. 代理模式: ...
- java 鲜为人知的知识点_鲜为人知的Java 8功能:广义目标类型推断
java 鲜为人知的知识点 遍历Java 8的功能列表 , 广义目标类型推断使我震惊,因为它是一个特别有趣,鲜为人知的瑰宝. 看起来Java语言设计人员将减轻过去使用泛型(Java 5-7)时遇到的某 ...
- java script 对象
java script 对象 1.创建方式 1)通过字面量的形式创建 例:var = stt{x:1,y:2,y:3}; 或:var = stt{ x:1, y:2, 'for':3 } 注意关键字必 ...
- 牛客网Java刷题知识点之关键字static、static成员变量、static成员方法、static代码块和static内部类...
不多说,直接上干货! 牛客网Java刷题知识点之关键字static static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个"伪全局"的概 ...
最新文章
- 删除所有的.svn文件夹
- SQL Server日期计算
- 遗传算法可用什么算法代替_获取可用密码算法的列表
- pat 乙级 1005 继续(3n+1)猜想(C++)
- python树莓派串口通信实例_树莓派通过串口发送数据
- 2017.5.6 联合权值 思考记录
- java三角形创建子类,A派生出子类B,B派生出子类C,并且在Java源代码中有如下声明: 1.A a0=new 2.A a1 =new 3.A a2=new 问以下哪个说法是正确的?()...
- C++ const型成员函数与 non-const型成员函数 (二)
- 【优化算法】Iterative映射和单纯形法的改进灰狼优化算法(SMIGWO)【含Matlab源码 1746期】
- (转)DX11代表作!20款主流显卡决战[DiRT2]
- 获取计算机特征码,如何查看计算机特征码
- cisco 2800路由器密码恢复
- T70次列车(乌鲁木齐 到 北京)的列车时刻表
- Nginx中root与alias区别
- flutter 背景图片毛玻璃效果
- php仿qq登录界面安卓,Android_Android仿QQ登陆窗口实现原理,今天根据腾讯qq,我们做一个 - phpStudy...
- 消费者权益法规的精神
- Java之IO流技术详解
- 全能型终端神器——MobaXterm安装教程
- 计算思维与计算机导论,计算思维与计算机导论_董荣胜.pdf