JavaWeb
B/S架构说明
html
字符实体
- < : <
- 大于号: >
- 空格  
超链接标签
<!--target:重新开一个页面-->
<a href="" target="_blank"></a>
表格
<table border="6" width="500" cellspacing="0">
<tr>
<!--th表头自动加粗-->
<th>姓名</th>
<th>电话</th>
<th>住址</th>
</tr>
<tr>
<td>完全</td>
<td>十大</td>
<td>阿斯蒂</td>
</tr>
<tr>
<td>撒旦</td>
<td>十大</td>
<td>自行车</td>
</tr>
<tr>
<td>支持下</td>
<td>自行车</td>
<td>自行车</td>
</tr>
</table>
汉字对齐输入法切换全角空格
input多选框
<input type="checkbox" name="水果1">香蕉
<!--checked设置默认选项-->
<input type="checkbox" name="水果1" checked>苹果
单选按钮
<input type="radio" name="sex">男
<input type="radio" name="sex">女
隐藏表单元素******
<input type="hidden" name="add" value="">看不到,给服务器发生消息
- span标签是内联标签,不像是块级标签(div,p 标签)有换行效果
<body>
用户购买了<span style="color: red;font-size: 40px" >10</span>个商品
</body>
表格练习题的css样式
<style type="text/css">
table,tr,td,th{
border: 2px solid blue; solid 实现的意思,不加不显示边框
border-collapse: collapse;
}
table{
background: silver;
text-align: center;
width: 500px;
}
</style>
css(层叠样式表)
js语言
- 解释型的脚本文件
- 基于对象的脚本语言
- 弱类型语言
数据类型
- 数值类型: number
- 字符串类型:string
- 对象类型: object
- 布尔类型: boolean
- 函数类型:function
数据类型特殊值(undefined,null,NaN)
var a;
console.log(a);
undefined未赋值
var a = null
NaN 不是一个数
var a;
console.log(a);
undefined未赋值
var b = null
console.log(b);
console.log(a*b)
NaN 不是一个数
逻辑运算注意事项和使用细节
<script type="text/javascript">
var a = null*1;
if (a){
console.log(a)
}else
console.log("NaN是假")
var a = ("123")&&80;
console.log(a); 80
a = null&&80;
console.log(a); null
var a = ("123")||80;
console.log(a); 123
a = null||80;
console.log(a); 80
</script>
-
在js语言中,所有变量都可以作为一个boolean变量去使用
- 0,null,undefined,""(空串) ,NaN都认为是false
-
&& 返回值遵循短路与原则(两种情况,两个为真,返回最后一个表达式的值,第一个为假返回第一个表达式的值,第一个为真第二个为假返回第二个表达式)
-
|| 返回值遵循短路或原则(第一个为假,第二个为真返回第二个表达式的值,第一个为真返回第一个表达式的值)
数组定义
//第一种方法
var care1 = ["asd","asd",100];
console.log(care1);
//第二种方法
var car2=[];
car2[0] = "";
car2[1] = "";
car2[2] = "";
//如果该元素不存在,返回undefined
console.log(care2[10]);
//第三种方法
var car3 = new Array("","","");
//第四种方法
var car4 = new Array();
car4[0] = "";
car4[1] = "";
car4[2] = "";
//被跳过的元素为undefined,浏览器可能显示,,,,,,,
car4[10] = "红旗"
方法细节
- js中的函数重载会覆盖掉上一次的定义 (js没有重载)
function test02 (name){
alert("hi"+name);
}
function test02 (){
alert("hi,asd");
}
test02(12); //会执行alert("hi,asd");
-
函数的arguments隐形参数(作用域在function 函数内)
function test03(){ //arguments类似java里的可变参数,下面的逗号是细节,展开数组输出 console.log("args = ",arguments); } test03(1,2,3,4,5,"123"); -
如果我们函数有形参,在传入实参的时候,仍按照顺序匹配
- 如果没匹配上也无所谓,多了给arguments,少了就undefined
创建对象
//第一种方式
var person = new Object();
person.name = "zzh";
person.age = 18;
person.say = function (){
console.log("hi~"+this.age,+this.name);
}
console.log(person.name);
console.log(person.age);
person.say();
//第二种方式
var student ={
name: "qwe",
age :20,
say : function (){
return this.name+this.age;
},
roof:function (){
return "嗷嗷叫"
}
}
事件
动态注册和静态注册
单击事件(onclick)
<script type="text/javascript">
function test01(){
alert("hi,b1");
}
//动态注册
window.onload =function () {
var b2 = document.getElementById("button2");
b2.onclick = function (){
alert("hello,b2");
}
}
</script>
</head>
<body>
<input id="button1" type="button" onclick="test01()" value="b1">
<input id="button2" type="button" value="b2">
</body>
失去焦点事件(onblur)
<script type="text/javascript">
function test01() {
var b1 = document.getElementById("b1");
b1.value = b1.value.toUpperCase();
}
//动态注册
window.onload = function (){
var b2 = document.getElementById("b2");
b2.onblur = function (){
b2.value = b2.value.toUpperCase()
}
}
</script>
</head>
<body>
<input id="b1" type="text" value="hello" onblur="test01()">
<input id="b2" type="text" value="world">
</body>
内容发生改变事件(onchange)
<script type="text/javascript">
function change(){
alert("内容以改变");
}
//动态注册
window.onload = function (){
var s2 = document.getElementById("sels");
s2.onchange = function (){
alert("内容以改变")
}
}
</script>
</head>
<body>
<select onchange="change()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br/>
<select id ="sels" onchange="change()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
表单提交事件(onsubmit)
<script type="text/javascript">
function register() {
var name = document.getElementById("name");
var pwd = document.getElementById("pwd");
if (name.value == "" || pwd.value == "") {
alert("用户名和账户不能为空")
return false;
}
return true;
}
//动态注册
window.onload = function (){
var form1 = document.getElementById("form1");
form2.onsubmit = function (){
if (form2.name2.value==""||from2.pwd2.value==""){
alert("用户名和账户不能为空")
return false;
}
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return register()" action="https://www.baidu.com">
<input id="name" type="text"><br>
<input id="pwd" type="text">
<input type="submit" value="提交">
</form>
<form id="form2" action="https://www.baidu.com">
<input id="name2" type="text"><br>
<input id="pwd2" type="text">
<input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
window.onload = function (){
var form1 = document.getElementById("form1");
form1.onsubmit = function (){
var uname = form1.uname.value;
var pwd = form1.pwd.value;
var tpwd = form1.tpwd.value;
var email = form1.email.value;
if (!(uname.length>=4&&uname.length<=6)){
alert("用户名长度为4-6")
return false;
}
if (pwd.length!=6){
alert("密码长度为6")
return false;
}
if (pwd!=tpwd){
alert("确认两次密码输入一样")
return false;
}
var eamilPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!eamilPattern.test(email)){
alert("邮箱格式不对")
return false;
}
return true;
}
}
</script>
</head>
<body>
<form id="form1" action="https://www.baidu.com">
用户名:<input type="text" id="uname">(4-6)<br>
密 码:<input type="pwd" id="pwd">(6)<br>
确 认:<input type="pwd" id="tpwd"><br>
电 邮:<input type="pwd" id="email"><br>
<input type="submit" value="注册">
</form>
</body>
dom
what
DOM全称是Document Object Model 文档对象模型
就是把文档中的标签,属性,文本转换成对象来管理
通过各种方法调用节点的上级下级和评级的节点
JQ
/★*
*老师说明
*1.初次使用query,你会觉得语法比铰奇怪，其实jquery.的低层仍然是js,只是做了封装
*2.$(function(){})等价window.onLoad=function()
*3.$()可以理解成是一个函数[可以定义function$(id)}..]
*3.$("#btn01")底层：document.getElementById("btn01")
*4.注意$("#btn01")不能写成$("btn01")
*5.通过$("#btn01")返回的对象就是jquery对象（即进行了封装），而不是原生dom对象
*/
XML
JSON
Servlet(java 服务器小程序)
如何让你用html,css,js.实现用户购物,留言等功能你可以实现吗?所以servlet出现了,动态网页(能和用户交互的技术)出现了
Ajax
异步通信(可以选择发送的数据),局部刷新
Ajax技术
验证用户是否存在过程图
Vue
为了一下看清楚省略tomcat和数据库
生命周期
beforecreated:vue对象的数据池和方法区内容还没有加载好
created:对象的数据池和方法区已经加载好了当网页内容还没有加载到,模板还没有加载到内存(经常在这给位置发送ajax请求)
beforemount:
mounted
beforeupdated
updated
标签：function,console,JavaWeb,value,name,var,log From： https://www.cnblogs.com/lz2z/p/17704260.html