Web学习笔记（六）：JavaScript基础知识

JavaScript基础知识

一、JavaScript作用

• 表单验证 - 减轻服务器端压力
• 实现页面的动态交互
• 实现页面动态效果

二、JavaScript概述

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

• 特点

  • 向HTML页面中添加交互行为
  • 脚本语言 , 语法和Java类似
  • 解析型语言 , 边执行边解释

• 基本结构

  <script type="text/javascript">
  <!-
  	JavaScript语句
  ->
  </script>
  

• 注意：

  • 因为HTML5中type属性默认是text/Javascript，因此HTML5中可以省略type属性

  • 可以在文档中的任何地方 . 一般放在头部或者尾部

三、JS的执行原理

1. 浏览器输入客户端网页
2. 客户端发送包含JavaScript的请求页面至服务器
3. 客户端从服务器端下载含JavaScript的页面

四、引入js的三种方式

1. 使用

    <script>
        alert("这是js的内部引入");
    </script>

2. 行内引入

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

3. 外部js文件

<script src="test.js"  type="text/javascript"></script>

五、JavaScript核心语法

• 变量

  使用关键字var,可以先声明再赋值，同时声明和赋值，也可以不声明直接赋值

• 数据类型

  • undefined 未定义（无默认值）
  • null 空值，与undefined值相等
  • number 包含整数和浮点数
  • booloean true和false
  • string 一组引号括起来的文本

• Typeof运算符

  用于检测变量的返回值

• String对象

  • 属性：字符串对象.length
  • 方法：字符串对象.方法名()
    • charAt(index) 返回在指定位置的字符
    • indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置
    • substring(index1， index2) 返回位于指定索引index1和index2之间的字符串， [index1,index2)
    • split(str) 将字符串分割为字符串数组

• 数组

  • 格式：var 数组名称 = new Array(size);

  • 数组访问与Java相似

  • 常用方法

    • join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
    • sort( ) 对数组排序
    • push() 向数组末尾添加一个或更多 元素，并返回新的长度

  • 常用属性：length 设置或返回数组中元素的数目

• 运算符号

  与Java类似

• 逻辑控制语句

  与Java类似

• 注释

  • 单行注释以//开始，以行末结束
  • 多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序 中的注释

• 弹窗提示

  • alert()

    alert(“提示信息”);

  • prompt()

    • prompt(“提示信息”, “输入框的默认信息”);
    • prompt(“请输入你喜欢的颜色”,“红色”);
    • prompt(“请输入你喜欢的颜色”,"");

• 语法约定

  • 代码区分大小写

  • 变量 , 对象 和函数的名称

    • JavaScript的关键字小写
    • 内置对象大写字母开头
    • 对象的名称通常是小写
    • 方法命名规则和Java相同

  • 行末使用分号

六、常用系统函数

• parseInt (“字符串”)

  将字符串转换为整型数字 ，如: parseInt (“86”)将字符串“86“转换为整型值86

• parseFloat(“字符串”)

  将字符串转换为浮点型数字 ，如: parseFloat(“34.45”)将字符串“34.45“转换为浮点 值34.45

• isNaN()

  用于检查其参数是否是非数字

七、自定义函数

• 定义函数

  function 函数名(参数1,参数2...){
  //JavaScript语句     
  [return 返回值] }
  }
  

• 调用函数

  函数调用一般和表单元素的事件一起使用 , 调用格式 :

  事件名＝ “函数名( )” ;

八、事件

• onload 一个页面或一幅图像完成加载
• onlick 鼠标单击某个对象
• onmouseover 鼠标指导移到某元素上
• onkeydown 某个键盘按键被按下
• onchange 域的内容被改变