JavaScript学习笔记1
JavaScript技术
1.DOM相关知识
什么是DOM:Document Object Model，文档对象模型
文档：指的是标记型文档(html,xml)
对象：可以使用dom里面的相关属性和方法来解析标记型文档。
Dom的组成：核心Dom，Html Dom，XML Dom。
Dom如何解析html文档：
Dom会根据html的层次结构，在内存中形成一个树形结构，树形结构里面有标记元素和树形和文本等元素
整个html文档对应一个document对象，通过document文档对象，可以操作html里面得到所有元素
2.节点的访问：
节点对象.childNodes:获取该节点的所有子节点。
节点对象.parentNode：获取该节点的父节点。
3.获取文档中的元素：
下面的方法是html dom的方法
根据标记的id属性值获取元素对象：document,getElementById(id属性对应的值)
根据标记的名称获取元素对象：document.getElementsByTagName(标记的名称)；
根据标记的name属性值获取元素对象：document.getElementsByName(name属性对应的值)；
1.2 JavaScript概述
什么是JavaScript:他是基于对象和时间驱动的语言，它应用于客户端。
***基于对象：再js里面提供了一些对象，可以直接使用。
面向对象：在java里面先创建对象再使用。
***事件驱动：js里面它触发事件，调用函数，实现网页里面的动态效果。
***客户端：浏览器。
JavaScript和java的区别：
1.javaScript是网景的产品，java是sun公司额产品，现在是oracle
2.javascript的运行只要系统里面有浏览器就可以，java的运行依赖于虚拟机。
2.javascript是弱类型语言，java是强类型语言。
弱类型语言：在js里面，所有的变量都用var定义：
var a=10; var b=”hello js”;
强类型语言：在java里面，int a=10;int b=”hello java”错误的写法
Javascript的组成：
1.EcmaScript：规范了js的基本语法。
2.Bom:Browser object model，浏览器对象模型，操作浏览器。
3.Dom:Document Object model,文档对象模型，操作文档。
Js作用：他是给网页增加动态效果。
1.内嵌式：
在网页里面引入js代码的基本语法：
<script type=“text/javascript”js代码</script>
2.外链式：
在网页里面引入js文件的预压：
<script type=”text/javvascript” src=”js文件的url”></script>
操作步骤：1.创建一个js文件2.在script标记里面，使用src属性来引入外部的js文件。
比如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="javascript1.js"></script> </head> <body> <br/> 来学习javascript </body> </html>
3.javascript的数据类型
Number：数字类型
String:字符串类型
Object:对象类型
Null：空类型
Undefined:未知的类型
Boolean：布尔类型
比如：
var a=10; //alert(typeof a); var b="hello js"; //alert(typeof b); var c=null; //alert(typeof c); var d; //alert(typeof d); var e=true; alert(typeof e);
4.变量的定义
在js里面定义变量都用var来定义。
5.运算符
算术运算符：+ -* /等等
比较运算符：> < >= <= !=等等
逻辑运算符：$$ || !
赋值运算符：+= -=等等
注意：
var 1=10;var b=”0”; var c=a-b;在进行减法（乘除法）操作时，会把String类型的值，转换为number类型
6.条件语句：
If，if else,if else if else等语句
其他语句：for语句，switch,case语句等等
比如：
var a3=10;
var b3=2r0;
if(a3==b3)
{
alert("相等的是10");
}
else
{
alert("other---");
}
1.3 javascript的使用
1.函数的定义和使用
在js里面定义函数三种方式：
1.创建普通的函数：
语法：
function add1(a,b){
Var sum=a+b;
Return sum;
}
2.创建匿名函数
语法：var add2=function (a,b){
Var sum=a+b;
Return sum;
}
3.创建动态函数：
语法：1.定义函数的参数：
var param=”a,b”;
2.创建函数体：
var method=”var sum=a+b; return sum;”
3.动态函数：
var add3=new Function(param,method);
2.事件处理
事件：它通过触发事件，去调用相关的函数，来实现网页的动态效果。
如何在网页里面触发事件？
网页里面绑定事件常用的两种方式：
第一种：直接通过事件绑定函数
比如：
<input type=”button” name=”btn” value=”点我”onclick=”add();”/>
Function add(){alert(“点我啊”);}
第二种：通过给事件属性赋一个函数
<input type=”button” name=”bbs” value=”aa” id=”inputID”/>
Document.getElementById(“inputID”)onclick=function(){
Alert(“点我了吗?”);
}
常用事件：
点击事件：onclick
失去焦点事件：onblur
获取焦点：onfocuse
键盘事件:onkeyup onkeydown onkeypress
页面加载事件：onload
注意：页面加载事件是在整个html网页加载完毕后才会执行这个事件对应的函数。
鼠标事件：onmouseout onmouseover onmousemove
3.常用对象
1.window对象
常用的属性:History,document,Navigator,location,Screen
比如：
var aa=window.location.href; alert(aa);//获取当前的url地址
常用的方法：
设置定时器方法
-
var id1=setInterval(js代码，事件):每隔一段时间s循环执行对应的js代码 2 .var id2=setTimeout（js代码，时间）：每隔一段见，执行一次对应的js代码 清楚定时器的方法： clearInterval(id1); clearTimeout(id2); 2.Date对象 使用方式和java的差不多。 Var myDate=new Date(); >>>获取年份：myDate.getFullYear(); >>>获取月份：myDate.getMonth(); >>>获取天：myDate,getDay(); 3.String对象 >>>0.获取字符串长度：length >>>1.与html相关的方法： 字体加粗：bold();字体变大:big(); >>>2.与java相似的方法： Indexof(),concat(),substr(),substring();
4.阶段性案列：传智书城的页面设计
1.传智书城的首页设计
通过div+css完成页面布局。
自己通过div+css完成一个简单的页面布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*设置id选择器*/
#header{
background-color:black;/*背景色*/
color:white;/*文字颜色*/
padding:50px;
text-align:center;
}
#left{
background-color: gray;
line-height:100px; /*两段文字之间的间距*/
height:400px;
width:100px;
padding:10px;/*中间的文字距离边界之间的距离*/
float:left;/*
*none-默认值，对象不漂浮
* left-文本流向对象的右边
* right-文本流向对象的左边
* */
}
#right{
color:red;
font-size:20px;
text-align: center;/*字体居中*/
padding:5px;
float:left;
}
#footer{
background-color: black;
color:white;
text-align: center;/*字体居中*/
padding:5px;
clear:both;/*不允许有浮动对象*/
}
</style>
</head>
<body>
<div id="header">导航菜单</div>
<div id="left">商品分类1<br/> 商品分类2<br/>
</div>
<div id="right">商品详细信息</div>
<div id="footer">版权信息</div>
</body>
</html>
2.传智书城的注册页面设计：
表单校验：1.用户输入的数据符合咱们定义的规范，允许用户提交表单，如果用户输入的数据不符合规范，不允许提交。
表单校验的知识点总结：1.错误信息:在一行显示，用他的innerHTML属性回显错误信息。
2.时间:onkeyup键盘松开触发事件，调用对应的函数
Onsubmit提交事件(提交按钮)，调用对应的函数
3.正则表达式和正则校验。
操作步骤：1.创建正则表达式对象2.调用test方法，来判断用户输入的数据是否符合规范
比如：
var regx=/^1[3|5|7|8]{1}[0-9]{9}$/;
//2.调用test方法，判断手机号是否符合规范
var value=“11012345678”;
var flag=regx.test(value);
alert(flag);
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>注册页面</h3>
<form action="registersuccess.html" method="get" onsubmit="return checkForm()">
用户名：<input type="text" name="username" id="usernameId" onkeyup="checkName();"/>
<span id="usernameMsg"></span><br/><br/>
密码：<input type="password" name="password" id="passwordId" onkeyup="checkPassword();"/>
<span id="passwordMsg"></span><br/><br/>
手机号：<input type="text" name="phone" id="phoneId" onkeyup="checkPhone();"/>
<span id="phoneMsg"></span><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
<script type="text/javascript">
//表单校验
//1.定义全局变量用来接收标记对象
var usernameObj;
var passwordObj;
var phoneObj;
var usernameMsg;
var passwordMsg;
var phoneMsg;
//2.获取标记对象
window.onload=function()
{//2.1获取输入控件的标记对象
usernameObj=document.getElementById("usernameId");
passwordObj=document.getElementById("passwordId");
phoneObj=document.getElementById("phoneId");
//2.2获取错误信息的标记对象--span标记
usernameMsg=document.getElementById("usernameMsg");
passwordMsg=document.getElementById("passwordMsg");
phoneMsg=document.getElementById("phoneMsg");
}
//3.校验用户名
function checkName()
{
//3.1获取用户名
var value=usernameObj.value;
//3.2创建正则表达式来校验用户户名书否符合规范
//用户名以不分大小写的字母开始，包含字母、数字、下划线，长度4-7位
var regex=/^[a-zA-Z]\w{3,6}$/;
//3.3校验
if(value=="")//!value等同与value==""
{
usernameMsg.innerHTML="用户名不能为空";
return false;
}
else if(!regex.test(value))
{
usernameMsg.innerHTML="用户名必须以字母开始，不区分大小写，包含字母数字下划线，长度4-7";
return false;
}
else//符合规范
{
usernameMsg.innerHTML="";
return true;
}
}
//4.校验密码
function checkPassword()
{
//4.1获取用户输入的密码
var value=passwordObj.value;
//4.2创建正则表达式
//密码是字母和数字组成，长度是3-6位
var regex=/^[a-zA-Z0-9]{3,6}$/;
//4.3校验
if(value=="")
{
passwordMsg.innerHTML="密码不能为空";
return false;
}
else if(!regex.test(value))
{
passwordMsg.innerHTML="密码是字母和数字组成，长度是3-6位";
return false;
}
else{
passwordMsg.innerHTML="";
return true;
}
}
//5.校验手机号
function checkPhone()
{
//5.1获取用户输入的手机号
var value=phoneObj.value;
//4.2创建正则表达式
//手机号开始1，第二位为3/5/7/8，后9位任意
var regex=/^1[3|5|7|8]{1}[0-9]{9}$/;
//4.3校验
if(value=="")
{
phoneMsg.innerHTML="手机号不能为空";
return false;
}
else if(!regex.test(value))
{
phoneMsg.innerHTML="手机号不符合规范";
return false;
}
else{
phoneMsg.innerHTML="";
return true;
}
}
//表单校验,通过返回true或者false来控制表单是否提交
function checkForm()
{
var usernameFlag=checkName();
var passwordFlag=checkPassword();
var phoneFlag=checkPhone();
return usernameFlag && passwordFlag && phoneFlag;
}
</script>
</html>
- 点赞 1
- 收藏
- 分享
- 文章举报
别团等shy哥发育
发布了26 篇原创文章 · 获赞 9 · 访问量 937
私信
关注
- Javascript（js）进阶学习笔记——String对象
- JavaScript高级程序设计-学习笔记1 （第一章--第四章）
- 【JavaScript学习笔记】7：函数提升,变量提升,异常抛掷和捕获,ES6的Map和Set
- JavaScript学习笔记
- JavaScript 学习笔记一些小技巧
- JavaScript 学习笔记（1）：关于函数、对象以及面向对象
- JavaScript学习笔记：检测数组方法
- javascript学习笔记1-3章
- JavaScript解析机制——学习笔记
- JavaScript 学习笔记— —Event（二）
- JavaScript学习笔记之对象属性
- JavaScript for Kids 学习笔记：准备
- JavaScript 学习笔记
- JavaScript for Kids 学习笔记3. 数组
- js-JavaScript高级程序设计学习笔记13
- JavaScript学习笔记2--面向对象编程(更新中)
- JavaScript正则表达式-学习笔记（不定期更新）
- JavaScript高级程序设计学习笔记--表单脚本
- JavaScript 学习笔记
- （5）JavaScript学习笔记 - 变量