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则承载着整 ...

随机推荐

01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
vue去除地址栏上的'#'号
const router = new VueRouter({ routes:[], mode :"history"//除去#号 }
2017 WebStorm 激活码更新 Pycharm同样可用
[有效时间到2017 年 11月 23日] BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1Iiw ...
mysql数据库单表增删改查命令
数据库DB-database-mysql 课程安排第一天: 1.数据库定义以及设计 2.mysql服务端的安装 3.mysql-dos操作库的操作表的操作 4.mysql客户端navicate工 ...
42、和为S的两个数字
一.题目输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 二.解法 import java.util.ArrayLis ...
Python3 反射及常用的方法
反射就是通过字符串映射或修改程序运行时的状态.属性.方法有四个常用方法: hasattr(obj,name_str) 判断一个obj对象是否有对应name_str的方法 getattr(obj,na ...
Vue-Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...
python基础===用9种方式生成新的对象
class Point: def __init__(self, x, y): self.x = x self.y = y point1 = Point(1, 2) point2 = eval(&quo ...
【技术分享】ReBreakCaptcha：利用谷歌来破解谷歌的验证码
概述从2016年开始,我就在琢磨寻找一种新的绕过谷歌验证码v2的方法会有多难,如果这种方法能够适用于任何环境而不仅仅是针对特定的案例,那这种方法将是非常理想的.接下来我将向你介绍ReBreakCap ...
c/c++中static用法总结
static的作用主要有两种: 第一个作用是限定作用域:第二个作用是保持变量内容持久化: c语言中static的用法: 1.全局静态变量: 用法:在全局变量前加上关键字static,全局变量就定义成一 ...

U2随笔

U2随笔的更多相关文章

随机推荐

热门专题