一. 什么是JS
JS是JavaScript缩写,有以下特点:
(1)基于对象
JS本身就有一些现成的对象可供程序员使用,例如:Array,Math,String。。。
JS并不排除你可以自已按一定的规则创建对象
(2)事件驱动
(3)解释性
每次运行JS代码时,得需要将原代码一行一行的解释执行
相对编译型语言(例如:Java、C++)执行速度相对较慢
(4)基于浏览器的动态交互网页技术
如果JS嵌入到HTML中,可以不需要服务器支持,直接由浏览器解释执行
(5)嵌入在HTML标签中
JS必须嵌入到一个名叫<script src="引入外部js文件"></script>的标签中,方可运行
脚本语言
二. JS中的三种类型
(1)基本类型:number,string,boolean
number 包含正数,负数,小数
string 由''或""定界
boolean 由true或false,但js中的boolean也包含更多情况,例如:存在表示true,不存在表示false
var num = 100;
var str = "哈哈";
var flag = false;
window.alert(num);
window.alert(str);
window.alert(flag);
var num = 100; var str = "哈哈"; var flag = false; window.alert(num); window.alert(str); window.alert(flag);
页面会依次弹出三个对话框显示这三个值。
(2)特殊类型:null,undefined
null表示一个变量指向null
undefined表示一个变量指向的值不确定
<script type="text/javascript"> //多个script快中的内容,可以互相访问 //alert(flag); //window.alert(str); var person = null; var card; if(card == undefined){ alert("card变量暂时没有值"); }else { alert(card); } </script>
(3)复合类型:函数,对象,数组
对象包含内置对象和自定义的对象
三. JS中有三种定义函数的方式
(1)正常方式:function mysum(num1,num2){return num1+num2;}
function add(num1,num2){ return num1 + num2; } window.alert("10+20=" + add(10,20));
(2)构造器方式:new Function("num1","num2","return num1+num2;")
var add = new Function("num1","num2","return num1+num2"); window.alert("100+200=" + add(100,200));
(3)直接量或匿名或无名方式:var mysum = function(num1,num2){return num1+num2;}
var add = function(num1,num2){ return num1 + num2; } alert(add("100+200=" + 100,200));
四. JS中的四种对象
(1)内置对象 :Date,Math,String,Array,...
<script type="text/javascript"> //Date //var str = new Date().toLocaleString(); //window.document.write("<font size='44' color='red'>"+ str +"</font>"); //Math /*for(var i=1;i<=10;i++){ document.write(Math.floor(Math.random()*9)+1+"<br/>"); }*/ //String /* var str = "Hello你好"; var size = str.length; alert(size);*/ //Array var array = new Array("语文","数学","英语",true,123); for(var i=0;i<=10;i++){ document.write(array[i] + " "); } </script>
(2)自定义对象:Person,Card,...
function Student(id,name,sal){ //this指向s引用 this.id = id; this.name = name; this.sal = sal; } var s = new Student(1,"波波",7000); document.write("编号:" + s.id + "<br/>"); document.write("姓名:" + s.name + "<br/>"); document.write("薪水:" + s.sal + "<br/>");
(3)浏览器对象: window,document,status,location,history...
<script type="text/javascript"> /* var url = "test.html"; window.open(url);*/ //status /*var nowStr = new Date().toLocaleString(); window.status = nowStr;*/ //location /*var url = "test.html"; window.location.href = url;*/ //history,演示刷新 window.history.go(0); //0 -- 刷新 //1 -- 前进 //-1 -- 后退 </script>
(4)ActiveX对象:ActiveXObject("Microsoft.XMLHTTP"),...
五. 演示JS对象的属性,方法和事件的使用
(1)window.location.href
//跳转到test.html页面 var url = "test.html"; window.location.href = url;
(2)form.submit()
<form action="/test.html" method="POST"> <input type="button" value="提交到服务端" onclick="doSubmit()"/> </form> <script type="text/javascript"> function doSubmit(){ //表单提交 document.forms[0].submit(); } </script>
(3) inputElement.constructor = 函数
(4)document.createElement(“img”)
(5) imgElement.style.width/height