Web前端开发核心组件：HTML与JavaScript详解

第一行第一列第一行第二列

跨行 colspan

跨列 rowspan

第3章 表单

属性&＃xff1a;name 、 action (URL) 、method(post、get 默认)

有外观&＃xff0c;没有固定的外观(因为input中的type属性)

标签&＃xff1a;from 向服务器发送信息&＃xff0c;实现交互功能。

子标记&＃xff1a;input

(默认为文本框&＃xff0c;10个通用属性)

属性&＃xff1a; disabled 设置标记不可用

文字字段&密码域&＃xff1a;

单选按钮&＃xff1a;

男女

复选框

读书

跑步

代码

文件

重置&提交&普通按钮&＃xff1a;

图片&＃xff1a;

隐藏域&＃xff1a;

下拉框&＃xff1a;

山东

山西

广东

广西

湖南

省

内容框&＃xff1a;

Javascript

直接嵌入Html文档中&＃xff0c;在客户端执行的解释性脚本语言

基于对象和事件驱动并具有安全性能的脚本语言

Javascript与java没有联系

加法计算器

注意&＃xff1a;

js用到表单时&＃xff0c;要将js代码放到body后面&＃xff0c;(先加载表单代码&＃xff0c;在查找所需内容)。

2.运算符

一元运算符(&＃43;&＃43;、--)&＃xff0c;二元运算符(&＃43;、-、*、/)&＃xff0c;三元运算符()

逻辑运算符(与--&&、或--||、非--&＃xff01;)

//一元运算符&＃xff0c;一个操作数

var a &＃61; 0;

var b &＃61; a&＃43;&＃43;; //先赋值后再自加

document.write("a&＃61;"&＃43;a&＃43;",b&＃61;"&＃43;b); // a&＃61;1,b&＃61;0;

//三元运算符&＃xff0c;三个操作数 ?:

var num1&＃61;10 , num2&＃61;20;

document.write("最大数:"&＃43;(num1>num2)?num1:num2);

3.弹窗(alert、confirm、prompt)

function CloseWin(){

if(confirm("你确定要关闭窗口吗&＃xff1f;")){

window.close();

}

}

function GetColor(){

var color &＃61; prompt("输入你喜欢的颜色","blue");

alert("您喜欢的颜色为&＃xff1a;"&＃43;color);

}

4.条件语句

if 语句、if...else 语句 、switch 语句

function add(){

var a &＃61; Number(document.MyForm.num1.value);

var b &＃61; Number(document.MyForm.num2.value);

//获取

var op &＃61; document.MyForm.op.value;

var c &＃61; 0 ;

switch(op){

case "&＃43;": c &＃61; a&＃43;b; break;

case "-": c &＃61; a-b; break;

case "*": c &＃61; a*b; break;

case "/": c &＃61; a/b; break;

case "%": c &＃61; a%b; break;

case ">": c &＃61; a>b; break;

case "

default: alert("符号选择有误");

}

document.MyForm.num.value&＃61;c;

}

&＃43;

-

*

/

%

5.循环(for、while、do while)

四大部分-----初始化&＃xff0c;条件&＃xff0c;执行&＃xff0c;迭代(缺一不可)

var sum&＃61;0;

for(var j&＃61;1;j<&＃61;100;j&＃43;&＃43;){

sum &＃61; sum &＃43; j;

}

document.write("打印1&＃43;2&＃43;3&＃43;4&＃43;5&＃43;6&＃43;...&＃43;100的结果&＃xff1a;"&＃43;sum&＃43;"
");

document.write("

document.write("打印直角三角形
");

/*

1

12

123

1234

12345

123456

*/

for(var i&＃61;1;i<11;i&＃43;&＃43;){

for(var j&＃61;1;j

document.write(j);

}

document.write("
");

}

6.Javascript函数

内置函数

eval函数&＃xff1a;用于计算字符串表达式的值

isNaN函数&＃xff1a;用于验证参数是否为NaN(非数字)(true为字符串)

function fn1(){

var value &＃61; prompt("写一个表达式&＃xff0c;我给你计算","1&＃43;1");

var num &＃61; eval(value);

alert(value&＃43;"&＃61;"&＃43;num);

}

function fn2(){

var value &＃61; prompt("写一个字符&＃xff0c;我判断是否为数字","0");

if(isNaN(value)){

alert(value&＃43;"不是一个数字&＃xff01;");

}else{

alert(value&＃43;"是一个数字&＃xff01;");

}

}

7.Javascript对象简介

String对象

使用var语句(栈里开辟空间)

var newstr &＃61; "";

创建String对象(动态声明(堆里面开辟空间))

var newstr &＃61; new String(""); new后必有构造函数

属性和方法

indexOf() 从左向右找(前--->后)

lastindexOf() 从右向左找 (后--->前)

chartAt(4) 获取相应下标的字符

Math.random() 随机小数

Math.round(2.8) 四舍五入

document.write("两秒钟刷新一次页面&＃xff0c;图片随机变化
");

//获取一个1~4的随机整数

var i &＃61; Math.round(Math.random()*3&＃43;1);

document.write("");

//声明一个String对象

var str &＃61; "abcdefcg";

document.write("字符串的长度&＃xff1a;"&＃43;str.length&＃43;"
");

document.write("字符串的小字体&＃xff1a;"&＃43;str.small()&＃43;"
");

document.write("字符串的正常字体&＃xff1a;"&＃43;str&＃43;"
");

document.write("字符串的大字体&＃xff1a;"&＃43;str.big()&＃43;"
");

//如果能找到就返回相应的下标&＃xff0c;反之&＃xff0c;返回-1. 注意&＃xff1a;下标从0开始&＃xff1b; indexOf()从左往右找。

document.write("获取“c”首次出现的位置&＃xff1a;"&＃43;str.indexOf("c",0)&＃43;"
");

//

document.write("获取“c”末次出现的位置&＃xff1a;"&＃43;str.lastIndexOf("c",str.length-1)&＃43;"
");

document.write("获取相应下标的字符&＃xff1a;"&＃43;str.charAt(2)&＃43;"
");

document.write("获取PI的值&＃xff1a;"&＃43;Math.PI&＃43;"
");

document.write("获取常量E的值&＃xff1a;"&＃43;Math.E&＃43;"
");

document.write("获取ln 10的值&＃xff1a;"&＃43;Math.LN10&＃43;"
");

document.write("获取-8的ju绝对值&＃xff1a;"&＃43;Math.abs(-8)&＃43;"
");

document.write("获取两个数的最大值&＃xff1a;"&＃43;Math.max(8,12)&＃43;"
");

document.write("获取0~1的随机小数&＃xff1a;"&＃43;Math.random()&＃43;"
");

document.write("获取四舍五入的值&＃xff1a;"&＃43;Math.round(2.8)&＃43;"
");

document.write("获取2~7的随机数&＃xff1a;"&＃43;Math.round(Math.random()*5&＃43;2)&＃43;"
");

function checkEmail(){ //小案例

var email &＃61; document.getElementById("email").value;

if(email.length&＃61;&＃61;0){

alert("请输入邮箱名");

}else{

if(email.indexOf("&＃64;",0)&＃61;&＃61;-1||email.indexOf(".",0)&＃61;&＃61;-1){

alert("邮箱格式不正确&＃xff01;");

}else{

alert("注册成功&＃xff01;");

}

}

}

Date对象