1.概述
JavaScript一种直译式脚本语言,用来为网页添加各式各样的动态功能
(javaScript可以操作网页内容),不需要编译可直接通过浏览器解释运
行,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
JavaScript与html,css关系:
JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言,其目的
就是增 强Web客户交互。弥补了HTML的缺陷。
2.基本语法
javaScript
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>/*导入外部的脚本 一旦标签中导入其他的js文件,就不能写其他脚本了,写了也没用*/<script src="js/text.js"></script><script>//调用对话框库函数//alert("大家好");//创建函数调用对话框库中的函数function text(){alert("大家好")}</script></head><body><input type="button" value="测试" onclick="text()"/></body>
</html>
变量_数据类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//java是强类型语言 数据类型 值/*javaScript弱类型,变量是没有类型的,你给他赋什么类型的值,它的类型就是什么使用var关键字声明*//* var a;a=10;//数值alert(a);a="abc";//字符串alert(a);var b;b=true;*//* 数据类型 *///1.数值类型 包含整数和浮点数var a=10;var b=10.5;/* alert(typeof(b));number typeof(b)返回变量的数据类型 *///2.布尔类型var c=true;var d=false;/* alert(c==d);返回c与d是否相等 *///3.字符串,单引号和双引号都表示字符串var e="abc";var f='abc';/* alert(typeof(e));alert(typeof(f)); typeof(f)返回变量的数据类型 *///4.undefined类型 声明了变量,却没有赋值var g;/* alert(g==undefined);返回是否进行了赋值,赋值返回true,反之false *///5.对象类型var date=new Date();alert(date.getFullYear());alert(date.getMonth()+1);alert(date.getDate());</script></head><body></body>
</html>
运算符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 算术运算符 + - * % / ++ -- */var a="10";var b=5;var c=10;var d="a";/* alert(a+b);//字符串连接alert(b+c);//加法*//* alert(c-b);//5 减法alert(a-b);//5 字符串-数值=数值alert(c-d);//NaN : not a number *//* alert(b*c);//50alert(b*d);//NaN *//* alert(a==c);//true 等于 只比较值alert(a===c);//false 全等 比较值和类型 *//* if(c>b){alert(c);}*//* for (var i = 0; i <5; i++) {alert(i)} */</script></head><body></body>
</html>
函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 定义函数 *///alert("你好");函数调用/* function test(){alert("你好");} *//* function test(a,b,c){alert(a+":"+b+":"+c);}test(true,"abc",new Date());*//* function test(a,b){return a+b;}var c=test(10,5);alert(c); *///函数调用//test();//在系统中的全局函数 在系统中已经定义好的,直接调用//alert(输入内容);返回弹窗var a=10.5;var b="10";var c=5;/* parseInt(a); //把浮点数转为整数alert(parseInt(b)+c); //把字符串转为整数,字符串不能字母开头,只能将开头的数字部分转换 *//* parseFloat(c); alert(parseFloat(c)); *//* typeof(b); //获取变量的数据类型*//* var s="2*5*1";alert(eval(s));//把传进来的字符串当作js脚本执行 */</script></head><body></body>
</html>
事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){console.log("事件被触发了");}</script></head><body onload="test()"><!-- onclick:鼠标点击事件时触发onblur:当标签失去鼠标焦点时触发onfocus:当标点获得鼠标焦点时触发onmouseover:当鼠标移入标签上时触发onmouseout:当鼠标从标签上移走时触发onload:当网页加载完毕后触发onchange:当内容改变,且失去鼠标焦点时触发--><input type="button" value="单击事件" onclick="test()"/><div onclick="test()">单击事件</div><input onblur="test()"/><br /><input onfocus="test()"/><div style="background-color:aqua;" onmouseover="test()" onmouseout="test()">aaaa</div><input onchange="test()"/><br /></body>
</html>
HTML_DOM对象
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 如何在javaScript中操作网页中的标签 javaScript认为网页中的每一个标签都是一个对象,在js中把这一类标签对象成为html dom对象如何在javaScript中获得网页中的标签对象?在网页加载完毕后,在js中生成一个document对象(表示整个html文档)里面提供了一个方法 getElementById();*/function test(){var tobj1 = document.getElementById("txt1");//通过标签id获得网页中的标签对象var tobj2 = document.getElementById("txt2");tobj2.value=tobj1.value;tobj1.value="";}</script></head><body><input type="text" id="txt1" value=""/><input type="text" id="txt2" value=""/><input type="button" onclick="test()" value="测试"/></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 如何在javaScript中操作网页中的标签 javaScript认为网页中的每一个标签都是一个对象,在js中把这一类标签对象成为html dom对象如何在javaScript中获得网页中的标签对象?在网页加载完毕后,在js中生成一个document对象(表示整个html文档)里面提供了一个方法 getElementById();*/function test(){var divobj1 =document.getElementById("box1");var divobj2 =document.getElementById("box2");//alert(divobj1.innerText)//获得标签体中的文本内容//innerHTML 可以获得标签内所有的内容(包括子标签和文本)//divobj2.innerText=divobj1.innerText;divobj2.innerHTML=divobj1.innerHTML;}</script></head><body><p>qqqqq</p><div id="box1"><b>html dom对象</b></div><div id="box2"></div><input type="button" onclick="test()" value="测试"/></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 如何在javaScript中操作网页中的标签 javaScript认为网页中的每一个标签都是一个对象,在js中把这一类标签对象成为html dom对象如何在javaScript中获得网页中的标签对象?在网页加载完毕后,在js中生成一个document对象(表示整个html文档)里面提供了一个方法 getElementById();*/function test(){var divobj=document.getElementById("box1");//通过dom对象操作标签的css属性divobj.style.backgroundColor='green';divobj.style.width='200px';divobj.style.height='200px';}</script></head><body><div id="box1" style="background-color: aqua;">aaa</div><input type="button" onclick="test()" value="测试"/></body>
</html>