JS基础
##### JavaScript概述
什么是javascript: JavaScript一种直译式脚本语言，
什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法:
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有
写在script标签
JS的数据类型:
基本类型
string
number
boolean
undefine
null
引用类型
对象, 内置对象
类型转换
js内部自动转换
JS的运算符和语句:
运算符和java 一样
"===" 全等号: 值和类型都必须相等
== 值相等就可以了
语句和java 一样
##### JS的输出
alert() 直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML: 向页面输出
获取页面元素: document.getElementById("id的名称");
JS声明变量:
var 变量的名称 = 变量的值
JS声明函数:
var 函数的名称 = function(){
}
function 函数的名称(){
}
JS：JavaScript客户端脚本语言
html
Java和JavaScript无关系
区别:
1.js客户端脚本 Java客户端语言
2.js基于对象 java面向对象
3.Java编译执行 js解释执行
4.java强语言 js弱语言
JS：javascript
函数:提高代码的复用性
function 方法名(参数列表){
执行语句;
return 返回值;
}
var str = 方法名()// 获取返回值
总结:
a.基本使用：函数封装了一段可重复代码function name(a,b,c){}
必有返回值：不写return返回值为underfined 函数调用时实参与形参不一致
函数无重载 后面的声明会覆盖前面的声明。函数里声明的参数都存放在arguments数组里
b.高级使用:在js里，函数也是数据类型，声明函数时 创造了function对象，对象名就
是函数名。
c.作为类的构造 如果调用时用new 代表该函数是构造函数
js的组成：核心(core)、DOM(文本对象) BOM(浏览器对象)
写法:
1.写在 head里 页面内容加载之前 在<head>标签里<script>中写
2.写在 body里 写在哪在哪加载 在<body>标签里<script>中写
3.js文件 <script language="script" type="text/javascript" src="目标文件"></script>
变量：String boolean number object null undefined(未定义)
boolean 的值true 相当于 1 false 相当于 0
定义变量: java 数据类型 变量名 = 初始值;
var 变量名 = 初始值;
-------------
alert()弹出一个信息框 会中断程序
document.write(); body 上书写文本内容 可以书写标签
-------------
字符串转数字:
parseInt()/parseFloat()
Math 数字方法
Math.random() 产生随机数
Math.ceil() 都进一位
Math.round() 四舍五入
Math.floor() 去小数
比较运算符: > < >= <= == != === 恒等(判断数据类型) !==
逻辑运算符: && || !
注意:js里对于真假界定宽泛，记住假值就行
js的假:0 false null undefined NaN (not a number) 空字符串 null
对象运算符：a instanceof A 检测一个对象 是不是某个类的对象
var b = new Boolean(true);
var n = new Number(23);
var s = new String("aaa");
js的条件表达式 其值只要不是否定含义都认为 true，不一定非要boolean类型
String 字符串各种常用方法
<script>
var str="gyag-djgT-RFVJY-35jahdi";
document.write("字符:"+str+"<br />");
document.write("字符长度为:"+str.length+"<br />");
document.write("字号增大:"+str.big()+"<br />");
document.write("字号加粗:"+str.bold()+"<br />");
document.write("字号变斜:"+str.italics()+"<br />");
document.write("字号加中划线:"+str.strike()+"<br />");
document.write("综合:"+str.big().bold().italics().strike()+"<br />");
document.write("转大写:"+str.toUpperCase()+"<br />");
document.write("转小写:"+str.toLowerCase()+"<br />");
document.write("根据位置找元素(6):"+str.charAt(6)+"<br />");
document.write("根据元素找第一次出现的位置:"+str.indexOf("d")+"<br />");
document.write("根据元素找第最后一次出现的位置:"+str.lastIndexOf("d")+"<br />");
var strs=str.split("-");
document.write("数组的长度:"+strs.length+"<br />");
document.write("数组的第2个元素:"+strs[2]+"<br />");
document.write("从第3个往后(不包含第3个)位置开始截取:"+str.substr(3)+"<br />");
document.write("从第3个往后(不包含第3个)位置开始截取:"+str.substring(3)+"<br />");
var x = "baidu".link("https://www.baidu.com")
document.write(x);
</script>
简单操作
<script>
var str1 = true;
var str2 = 1;
if(null){
document.write("?");
}
var n = new Number(23);
if(n instanceof Number){
document.write("?");
}
var stu = new Object();
stu.name = "张三";
stu.hobby = ["篮球","足球","乒乓球"];
alert(stu.hobby[2]);
</script>
JS的运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
str = (2>3)?"是":"否";
document.write("<font size='7' color='#00ffff'>"+str+"<br></font>");
var str="你好";
switch("你好"){
case "你好":
document.write(str+"<br />");
break;
}
var flag=0;
while(flag<4){
document.write(flag+"<br />");
flag++;
}
flag=0;
do{
document.write("?"+"<br />");
flag++;
}while(flag<4)
for(var a=0;a<3;a++){
document.write("?<br>");
}
</script>
</body>
</html>
JS书写九九乘法表
<script>
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+"="+(i*j)+"    ");
}
document.write("<br />");
}
</script>
JS的三种框
prompt("请输入欲购买的商品","法拉利430");
// 输入对话框 参数1:提示信息 参数2:默认值 返回值:输入的内容
//(选择结果 正确:输入的内容 错误和关闭窗口:null)
alert(str);// 信息提示框 无返回值
confirm("是还是否？");// 选择对话框 确定:true 取消/关闭窗口:false
类和对象
a.将一组相关数据与操作封装起来，只使用对象:var 对象名 = new object();
b.通过json格式字符串创建对象详情看demo03
demo03
<body>
<h1>普通</h1>
<script>
var stu = new Object();
stu.name="张三";
stu.age=23;
stu.hobbys=["wow","dota2","D3"];
stu.showMe=function(){
return this.name;
}
alert(stu.showMe());
</script>
<h1>JSON</h1>
<script>
var stu_plus = {
name:"李四",
age:78,
hobbys:["A","B","C"],
showMe:function(){
return this.name;
}
}
alert(stu_plus.showMe());
</script>
事件：种类和绑定
a.绑定方法 HTML上 脚本上
b.事件分类
1.body onload 事件，页面加载完成触发
2.鼠标类型:
onclick (单击) ondblclick(双击) onmousedown/onmouseup(鼠标按/松)
onmouseover/onmouseout/onmousemove 移入/移出/移动
3.键盘类型:
onkeydown/onkeyup 按下，松开 通过keycode得到编号
onkeypress 得到编号的值
4. html元素类型：
onfoucs:得到焦点
onblur:失去焦点
onchange:值改变 一般 select
form：onsubmit 表单提交事件 需要返回 返回值（boolean）
事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>事件</title>
<script>
function abc(){
alert("abc");
}
function changeMessageBe(){
var font_obj = document.getElementById("f1");
font_obj.style.color="red";
font_obj.innerHTML = "点击鼠标显示";
}
function changeMessageAf(){
var font_obj = document.getElementById("f1");
font_obj.style.color="black";
font_obj.innerHTML = "放开鼠标显示！";
}
</script>
</head>
<body>
<script>
function def(){
alert("def");
}
</script>
<div style="background-color:green;width:450px;height:400px;"
onmousedown="changeMessageBe()" onmouseup="changeMessageAf()">
<p>
<font size="7" id="f1">
原始事件
</font>
</p>
</div>
</body>
</html>
JS中常用事件
【JS中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
定时器
setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval
clearTimeout
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"
引入一个外部js文件
<script src="js文件的路径" type="text/javascript"/>
JS开发步骤
1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkForm(){
var inputObj = document.getElementById("username");
var uValue = inputObj.value;
if(uValue.length < 6 ){
alert("对不起,您的长度太短!");
return false;
}
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("对不起,您还是太短啦!");
return false;
}
var input_repassword = document.getElementById("repassword");
var uRePass = input_repassword.value;
if(uPass != uRePass){
alert("对不起,两次密码不一致!");
return false;
}
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("对不起,您的手机号无法识别!");
return false;
}
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("对不起,邮箱不合法");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="JS开发步骤.html" onsubmit="return checkForm()">
<div>用户名:<input id="username" type="text" /></div>
<div>密码:<input id="password" type="password" /></div>
<div>确认密码:<input id="repassword" type="password" /></div>
<div>手机号码:<input id="mobile" type="number" /></div>
<div>邮箱:<input id="email" type="text" /></div>
<div><input type="submit" value="注册" /></div>
</form>
</body>
</html>
使用JS完成图片的轮播效果
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var index = 1;
function changeAd(){
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg";
index++;
}
function init(){
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>
完成表单的校验
技术分析
【HTML中innerHTML属性】
【JS中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
var uValue = document.getElementById("username").value;
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
function checkPassword(){
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
function checkRePassword(){
var uPass = document.getElementById("password").value;
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
表格隔行换色
<script >
function init(){
var tab = document.getElementById("tab");
var rows = tab.rows;
for(var i=1; i < rows.length; i++){
var row = rows[i];
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
