HTML5-JavaScript基础

JavaScript是一种基于对象和事件驱动的,并具有安全性能的语言.

特点:

• 向HTML中添加交互行为
• 一门脚本语言,语法和java类似
• 解释性语言,边执行边解释

组成:JavaScript由ECMAScript,DOM,BOM构成

调用:
<script src="export.js"  type="text/javascript"></script>外部标签

<input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你');"/>行内标签

语法:

• <script>JavaScript语句</script>
• document.write("<h1>Hello World</h1>")打印输出(并识别HTML语句)
• typeof检验数据类型范围值为数据类型
• .length返回字符长度
• chatAt(index)返回指定位置字符
• indexOf(str,index)查找某个字符第一次出现位置(index为开始区域)
• substring(index1,index2)截取某一段字符(包前不包后)
• split(str)将一段字符串以str分割为字符串数组
• alert(str)弹窗显示str内容
  
• prompt("提示信息","输入框默认信息")等同于java的input但更多样化

变量:

var关键字

var catName="皮皮";
var x, y,z = 10; 
function方法外是全局变量

function方法内是局部变量

数据类型:

• undefined没有赋值,初始值会被定义为undefined(例:var width;)
• null表示空值和undefined相等
• number所有数字类型
• boolean布尔类型false和true
• string一组被引号（单引号或双引号）括起来的文本(var string1="This is a string";)
• object数组,对象,和null

类型转换:

parseInt(string)将字符串转为整形

parseFloat(string)将字符串转为浮点类型
isNaN()检查类型是否是非数字

数组:

var 数组名=new Array(size);

var 数组名=new Array("apple","orange","banana")

    方法:

• .length数组长度
• join(str)把数组所有元素变成字符串并用str分割(str默认为",")
• sort()排序
• push(var)在数组末尾插入新的元素(返回值为新数组长度)
• 更多方法查询JavaScript Array帮助文档

运算符:

大部分与java相同,特殊"=="比较的是内容,"==="比较的是内容和地址值

循环语句:(for in 和 java的增强for类似)

for(var i in arr){
      document.write(arr[i]+"<br/>");

       //注意这里的值是fruit[i],与java不同的是var i代表的是数组的下标}

Chrome开发人员工具:(Chrome浏览器F12键进入Sources选项)

• 停止断点调试
• 单步调试,不进入函数内部
• 单步调试,进入函数内部
• 跳出当前函数
• 禁用所有断点,不作任何调试

与alert()方法相结合

函数:

语法:

    function 方法名(参数1,参数2,参数3...){

        JavaScript语句;

        return 返回值;

    }

调用:(函数调用一般和表单事件元素一起使用)

  事件名="函数名()";

例:<input name="name" type="button" value="value" onclick="function()">

事件:

• onload:页面或者图像加载完成
• onclick:鼠标单击事件
• ondblclick:鼠标双击事件
• onmouseover:鼠标移入事件
• onmouseout:鼠标移出事件
• onkeydown:键盘任意键事件
• onchange:域的内容被改变