U2随笔

Html 结构化

CSS 样式

JavaScript 行为交互

1、JavaScript基础

2、JavaScript操作BOM对象

3、JavaScript操作DOM对象*****

4、JavaScript的面向对象

------------------------------------------------------------------

jQuery（js）。css。js

jQuery选择器　　　　　*****

jQuery时间和动画

jQuery操作DOM对象　　*****

表单验证

表单验证的框架　　jquery　　validate

bootstrap　　封装了Html css js

JavaScript基础（liveScript）

1、和java的关系，只是借势！

2、是一个脚本语言，以（.js）结尾

3、流浪器编译JavaScript，解析器我们称之为JavaScript引擎！

4、无需预编译　　*****

　　js是一种弱语言类型　　var a=10;　　var a="101";　　var a=new Date();

5、运行在客户端　　***** 　　减轻服务器的压力

目的：

1、提升用户的体验

2、减轻服务器的压力、

组成部分：

1、ECMAScrip 规定了js的基本语法和基本对象

2、BOM（浏览器对象模型）提供了处理网页内容的方法和接口

3、DOM（文档对象模型）提供了与浏览器进行交互的方法和接口

我们一个页面中可以引入css文件还可以引入js文件？有没有顺序？

1、css写在head中

2、js文件的引入写在body的最下方

js的引入方式：

1、行内引入

2、内部引入

3、外部引人

js中的常用事件

1、不想让a超链接立即跳转至指定的页面

2、想让用户点击的时候　做一些处理工作

javascript：伪协议

　　1、先去执行js代码

　　2、根据js代码做操作

　　alert（‘就是不跳转’）　　后续会换成某个操作的函数（方法）

伪协议　　javascript：

onclick　　点击事件

onblur　　失去焦点事件

onfocus　获取焦点事件

js数据类型

undefined：声明但是没赋予初始值！没有被定义的变量！

　　　　var　　name；

　　　　alert（name）；//什么都没有

　　　　alert（typeof （name））；//undefined

number：包含了整数和浮点数

　　typeof （20）

　　typeof（20.2）

string：被单引号和双引号括起来的内容都是字符串

　　typeof （20）

　　typeof（20.2）

boolean：true 和 false

　　alert（typeof（TRUE））；//把TRUE当成一个变量名

　　alert（typeof（true））；　　// √

　　alert（typeof（“true”））；　　//string

object：js中的对象，包含数组，null和对象！

null：控制，表示对象不存在，等于undefined！

typeof 检测变量的数据类型

1、typeof 空格变量名称

2、typeof（变量名称）*****

初识JavaScript

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>初识JS</title>
	<!--
	JavaScript:
	组成：
	01.ECMAScript描述了js语言的语法和基本的对象！
	02.DOM（文档对象模型）描述了处理网页内容的方法和接口
	03.BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口
	特点：
	01.无需预编译弱语言类型
	02.运行在客户端减轻服务器压力

	网页中引入css和js文件的顺序！
	css引入在head标签中！目的就是在用户看到页面的时候有样式！
	js引入在body标签中的对下面！目的是在交互过程中，确保所有的内容加载完毕！
	-->
	</head>
	<!--01.行内 onload="alert('大家辛苦了1！');alert('大家辛苦了2！');"-->
	<body>


	<!-- 02.内部-->
	<script type="text/javascript">
	/* alert("大家辛苦了！");*/
	</script>

	<!--03.外部样式引入-->
	<script type="text/javascript" src="js/alert.js"></script>
	</body>
	</html>

基本事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本事件</title>
	</head>
	<body>
	<!--
	javascript: 伪协议！
	当我们运行到javascript: 的时候，程序会先执行对应的js代码！之后再操作！
	无论是超链接还是提交按钮，都不会立即执行！
	-->
	<a href="javascript:">跳转</a> <br/>
	<input type="button" value="普通按钮" onclick="javascript:alert('你说可以');"> <br/>

	<input type="text" placeholder="请输入用户名" on onblur="javascript:alert('失去焦点');">
	<!--
	onfocus="javascript:alert('获取焦点');"
	-->
	</body>
	</html>

数据类型

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>数据类型</title>
	</head>
	<body>
	<!--
	undefined :只声明了变量，但是没有赋予初始值，就是undefined
	//声明变量
	var myName;
	alert("姓名是："+myName); //name什么都没有
	alert("name的数据类型是："+(typeof(myName)));


	null：空值，不存在的对象等于undefined
	alert(null==undefined);

	number：包含了整数和浮点数
	alert("20的数据类型："+typeof(20));
	alert("20.5的数据类型："+typeof(20.5));
	boolean：true 和 false
	alert(typeof(TRUE)); // 把TRUE当成了一个变量所以输出 undefined
	alert(typeof(true));
	alert(typeof("true")); //string

	string ：被单引号或者双引号引起来的文本
	alert(typeof('a'));
	alert(typeof("a"));

	object：js中的对象，包含数组，对象和null
	var arr1=new Array(1,2,3);
	var arr2=new Array("小黑","小白");
	var arr3=[];
	arr3[0]=1;
	arr3[1]=12.2;
	arr3[2]="小黑"; //可以存放不同的数据类型

	alert("arr3的数据类型"+typeof(arr3));
	alert("arr3的第3个元素"+arr3[2]);
	alert("null的数据类型"+typeof(null));
	var date=new Date();
	alert("date的数据类型"+typeof(date));
	-->


	<script type="text/javascript">



	</script>
	</body>
	</html>

输入和确认

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>输入和确认</title>
	</head>
	<body>

	<!--
	alert("大家\n辛苦了"); // \n是换行
	alert：是一个提示框，具有确定按钮！
	confirm：是一个提示框，具有确定和取消按钮！
	prompt：是一个对话框，有两个参数
	01.第1个参数，是提示语
	02.第2个参数，是输入框的默认值，可以省略此参数
	-->
	<script type="text/javascript">

	var flag= confirm("你想迎娶白富美吗？");
	if(flag){ //用户点击的是确定
	var answer= prompt("你月收入多少呀？","请输入收入"); //获取用户的输入
	document.write("您的收入是："+answer);
	}else{
	alert("你就一屌丝！")
	}


	</script>

	</body>
	</html>

类型转换

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<script type="text/javascript">
	var num1="123.45a",num2="a123.45";
	/*
	* parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者非数字时返回得到整数
	* parseFloat():前提字符串第一个位置必须是数字直到遇到非数字时返回得到浮点数
	*/
	document.write(parseInt(num1)+"<br/>");
	document.write(parseInt(num2)+"<br/>"); //NaN 说明不是一个数字
	document.write(parseFloat(num1)+"<br/>");
	document.write("<hr/>");
	/**
	* 强制类型转换
	* Boolean():里面的参数只要不是false,0,null,undefied,空,NaN,未定义的变量之外都会返回true
	* Number(): 是把整个字符串作为参数之后进行强制类型转换！要确保参数是数值类型或者boolean true=1 false=0;
	* String()
	*/
	document.write(Boolean(true)+"<br/>");
	document.write(Number(num1)+"<br/>");
	document.write(String(typeof (num1))+"<br/>");
	alert(typeof 1);
	alert(typeof (1)); //推荐使用

	</script>

	</body>
	</html>

运算符

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>常用的运算符</title>


	</head>
	<body>
	<script type="text/javascript">
	/**
	* 常用的运算符
	*/
	document.write("+运算："+(5+5)+"<br/>");
	document.write("-运算："+(5-5)+"<br/>");
	document.write("运算："+(55)+"<br/>");
	document.write("/运算："+(5/5)+"<br/>");
	// % 取余
	var num=3;
	/*
	++在变量前先自身加1 之后参与运算
	++在变量后先参与运算之后自身加1
	*/
	document.write("%运算："+(5%3)+"<br/>");
	document.write("++运算："+(num++)+"<br/>");
	document.write("--运算："+(num--)+"<br/>");
	document.write("--运算之后："+(num)+"<br/>");


	</script>

	</body>
	</html>

switch

<!DOCTYPE html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>switch</title>

	</head>
	<body>



	<script type="text/javascript">
	var num=window.prompt("请问：今天周几？"); //让用户输入整数
	switch (parseInt(num)){ // 因为用户输入的是字符串要么 case "1" 要么 parseInt(num)
	case 1:
	alert(1);
	break;
	alert(111); // 没有意义但是不会报错
	case 2:
	alert(2);
	break;
	case 3:
	alert(3);
	break;
	default :
	alert("default");
	}


	</script>
	</body>

	</html>

7、break continue

<!DOCTYPE html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>break,continue</title>
	</head>
	<body>
	<script type="text/javascript">
	for(var i=0;i<=5;i++){ //break
	if(i==5) break;
	document.write(i+"<br/>");
	}
	document.write("<hr/>");
	for(var i=0;i<=5;i++){ //continue
	if(i==3)continue;
	document.write(i+"<br/>");
	}

	</script>
	</body>

	</html>

= =和 = = =

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>== 和 ===</title>
	</head>
	<body>

	<!--
	== ：在比较的时候，会把相对来说复杂的类型转换成简单类型之后比较两个变量的值
	===:先比较两个变量的数据类型，如果数据类型一致，再比较值！
	-->
	<script type="text/javascript">
	var num1=5;
	var num2="5";
	document.write("num1==num2:::"+(num1==num2)+"<br/>");
	document.write("num1===num2:::"+(num1===num2));

	</script>

	</body>
	</html>

函数

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>函数</title>
	</head>
	<body>

	<!-- 方法的调用-->
	<input type="button" value="hello" onclick="sayHello();"> <br/>
	<input type="button" value="bye" onclick="sayBye();"><br/>
	<input type="button" value="haha" onclick="haha();"><br/>



	<script type="text/javascript">



	//01.定义一个函数
	function sayHello(){
	alert("大家好！");
	}
	//02.定义一个函数
	var sayBye=function(){
	alert("拜拜大家！");
	}


	function haha(){
	sayHello();
	sayBye();
	}

	</script>

	</body>
	</html>

数组

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>数组</title>
	</head>
	<body>



	<script type="text/javascript">
	var arr1=new Array(); //没有长度
	var arr2=new Array(5); //只有一个参数是长度
	var arr3=new Array(1,2,3,4,5); // 定义数组的同时开辟空间并赋值
	var arr4=[1];
	document.write("arr1.length"+arr1.length+"<br/>");
	document.write("arr2.length"+arr2.length+"<br/>");
	document.write("arr3.length"+arr3.length+"<br/>");
	document.write("arr4.length"+arr4.length+"<br/>");
	document.write("arr4[0]"+arr4[0]+"<br/>");
	document.write("arr4[1]"+arr4[1]+"<br/>");

	//定义一个字符串转换成数据
	var str="haha,heihei,hehe,houhou";
	var arr5= str.split(","); //返回一个数据
	document.write(arr5.length+"<br/>");
	//向数组中添加一个元素
	arr5.push("heiheihahahehe");
	document.write("arr5[4]"+arr5[4]+"<br/>");
	//把数组中的每一个元素通过一个分隔符连接在一起形成新的字符串
	str=arr5.join("+");
	document.write(str);

	</script>

	</body>
	</html>

for in

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>for in</title>
	</head>
	<body>


	<script type="text/javascript">
	var arr=[1,2,3,4,5,6];
	/* i 是下标 */
	for(var i in arr){
	document.write(arr[i]);
	}

	</script>
	</body>
	</html>

捕获异常

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>捕获异常</title>
	</head>
	<body>


	<script type="text/javascript">
	/*
	* ex.name 错误名称
	* ex.message 错误信息
	*/
	try{
	sasas
	}catch(ex){
	alert(ex.name+":"+ex.message);
	}
	alert("大家辛苦了2");
	</script>
	</body>
	</html>

debug

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>debug</title>
	</head>
	<body>

	<!--
	网页中 F12
	如果网页有代码错误会在console台中显示错误信息
	之后选中错误出现的行！
	就到达 sources页面
	就可以打断点（选择行号）



	NetWork 是我们所有访问的资源文件
	-->

	<img src="data:images/a.jpg">

	<script type="text/javascript">

	document.write(1+"<br/>");
	document.write(2+"<br/>");
	document.write(3+"<br/>");
	sasaasa
	document.write(4+"<br/>");
	document.write(5+"<br/>");
	document.write(6+"<br/>");
	</script>
	</body>
	</html>

待续

U2随笔的更多相关文章

Matlab随笔之线性规划
原文:Matlab随笔之线性规划 LP(Linear programming,线性规划)是一种优化方法,在优化问题中目标函数和约束函数均为向量变量的线性函数,LP问题可描述为:min xs.t. ...
AI人工智能系列随笔
初探 AI人工智能系列随笔:syntaxnet 初探(1)
【置顶】CoreCLR系列随笔
CoreCLR配置系列在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
C++随笔：.NET CoreCLR之GC探索（4）
今天继续来带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...
C++随笔：从Hello World 探秘CoreCLR的内部(1)
紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...
ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
使用Beautiful Soup编写一个爬虫系列随笔汇总
这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识完成了一个简单的爬虫服务:从all ...
利用Python进行数据分析基础系列随笔汇总
一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

spring bean初始化及销毁你必须要掌握的回调方法
spring bean在初始化和销毁的时候我们可以触发一些自定义的回调操作. 初始化的时候实现的方法 1.通过java提供的@PostConstruct注解: 2.通过实现spring提供的Initi ...
TED_Topic2：My desperate journey with a human smuggler
My desperate journey with a human smuggler By Barat Ali Batoor When I was a child there was a toy wh ...
indexof()函数
js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf, 成功,返回索引值,失败返回 -1. 转载: http://www.cnblogs.com/fishtreeyu/arc ...
PHPMailer发送邮件(一)
Github 地址:(已更新,适用于旧版) PHPMailer : https://github.com/PHPMailer/PHPMailer 一.基本要求 Web访问正常(apache可以正常访问 ...
前端QRCode.js生成二维码（解决长字符串模块和报错问题）
QRCode 用法 1.使用npm安装到你的项目中 npm install qrcode2 --save 使用commonjs或者es6模块方式导入 var QRCode = require('qrc ...
docker-It's possible that too few managers are online. Make sure more than half of the managers are online.
问题:docker ---- It's possible that too few managers are online. Make sure more than half of the manag ...
关于servlet中重定向、转发的地址问题
先写一个正斜杠"/",再判断是服务器使用该地址还是网站使用该地址. 访问网络资源用/,访问硬盘资源用\. 例如: 转发: request.getRequestDispat ...
password passphrase passcode 的区别
In general, passphrases are long passwords and passcodes are numeric-only passwords.
makefile初步制作,arm-linux- (gcc/ld/objcopy/objdump)详解【转】
转自:http://www.cnblogs.com/lifexy/p/7065175.html 在linux中输入vi Makefile 来实现创建Makefile文件注意:命令行前必须加TAB键 ...
nfs挂载无法卸载
故障现象:今天发现服务器的upload负载很高,到18左右,同时df查看磁盘命令卡住用top\vmstat\iostat查看并未发现可以服务或进程. 上网查发现可能是nfs问题. 卸载nfs挂载的方 ...

U2随笔

U2随笔的更多相关文章

随机推荐

热门专题