JavaWeb开发 —— JavaScript（JS）

目录

一、什么是JavaScript ？

 二、引入方式

三、基础语法

1.  书写语法

2.  输出语句

3.  变量

4.  数据类型

5.  运算符

6.  类型转换

四、函数

五、对象

1.  Array数组

2.  String 字符串

3.  JSON

4. BOM

5.  DOM

六、时间监听

---

一、什么是JavaScript ？

• JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
• JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
• JavaScript在1995年由Brendan Eich发明。并于1997年成为ECMA标准。
• ECMAScript 6(ES6)是最新的JavaScript版本（发布于2015年)。

ECMA：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

 二、引入方式

① 内部脚本：将JS代码定义在HTML页面中。

• Javascript代码必须位于标签之间
• 在HTML文档中，可以在任意地方，放置任意数量的

  ② 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中。

  • 外部JS文件中，只包含JS代码，不包含 alter("Hello JS")

    三、基础语法

    1.  书写语法

    ① 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。

    ② 每行结尾的分号可有可无。
    ③ 注释：

    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

    ④ 大括号表示代码块

    // 判断
    if(count == 3){
       alter(count);
    }

    2.  输出语句

    • 使用 window.alert() 写入警告框
    • 使用 document.write() 写入HTML输出
    • 使用 console.log() 写入浏览器控制台

    3.  变量

    ① JavaScript中用 var 关键字(variable的缩写)来声明变量。

    ② JavaScript是一门弱类型语言，变量可以存放不同类型的值。

    ③ 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线(_）或美元符号($)
    • 数字不能开头
    • 建议使用驼峰命名

    注意事项：

    • ECMAScript 6新增了 let 关键字来定义变量。它的用法类似于var，但悉所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
    • ECMAScript 6新增了const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

    4.  数据类型

    Javascript中分为：原始类型和引用类型。
    原始类型：

    • number：数字（整数、小数、NaN(Not a Number))。
    • string：字符串，单双引皆可。
    • boolean：布尔，比如true,false。
    • null：对象为空。
    • undefined：当声明的变量未初始化时，该变量的默认值是undefined。

    使用 typeof运算符 可以获取数据类型。

    5.  运算符

    • 算术运算符：+，-，*，/，%，++，--
    • 赋值运算符：=，+=，-=，*=，l=，%=
    • 比较运算符：>，<， >= ，<= ，!=，==，===(全等运算符)
    • 逻辑运算符：&&，ll，!
    • 三元运算符：条件表达式?  true_value：false_value

    注意： == 会进行类型转换， === 不会进行类型转换

    6.  类型转换

    ① 字符串类型转为数字：

    • 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

    ② 其他类型转为boolean：

    • Number：0 和 NaN为false，其他均转为true。
    • String：空字符串为false，其他均转为true。
    • Null 和 undefined：均转为false。

    四、函数

    ① 介绍：函数（方法）是被设计为执行特定任务的代码块。
    ② 定义：Javascript函数通过 function关键字 进行定义，语法为:

    function functionName(参数1,参数2,...){
           //要执行的代码
    }

    ③ 注意：

    • 形式参数不需要类型。因为Javascript是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用 return返回 即可

    ④ 调用：函数名称（实际参数列表）

    注意：JS中，函数调用可以传递任意个数的参数。

    五、对象

    1.  Array数组

    ① 介绍：Javascript 中Array对象用于定义数组。

    ② 定义：

    • 方式一：var 变量名 = new Array( 元素列表 ) ;
    • 方式二：var 变量名 = [ 元素列表 ] ;

    ③ 访问： arr[ 索引 ] = 值 ; 

    注意事项：JavaScript 中的数组相当于Java中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据。

    ④ 属性：

    属性	描述
    length	设置或返回数组中元素的数量。

    ⑤ 方法：

    方法	描述
    forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
    push()	将新元素添加到数组的末尾，并返回新的长度。
    splice()	从数组中删除元素。

    2.  String 字符串

    ① String字符串对象创建方式有两种：

    • 方式一：var 变量名 = new String(" ... ") ;
    • 方式二：var 变量名 = " .… " ;

    ② 属性：

    属性	描述
    length	字符串的长度

    ③ 方法：

    方法	描述
    charAt()	返回在指定位置的字符。
    indexof()	检索字符串。
    trim()	去除字符串两边的空格
    substring()	提取字符串中两个指定的索引号之间的字符。

    3.  JSON

    ① 介绍：

    • 概念：JavaScript Object Notation，JavaScript对象标记法。
    • JSON是通过JavaScript对象标记法书写的文本。
    • 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

    ② 定义：var 变量名 = ' { "key1" : value1，"key2" : value2 } ' ;

    ③ 示例：var userStr = ' { "name" : "Jerry" , "age" : 18 , "addr" : ["北京" , "上海" , "山东"] } ' ;

    注意：value的数据类型为：

    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true或false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null

    ④ 调用格式： 对象名 . 属性名 ;

    ⑤ JSON字符串转为JS对象：var jsObject = JSON . parse(userStr);

    ⑥ JS对象转为JSON字符串：var jsonStr = JSON.stringify(jsObject);

    4. BOM

    ① 概念：Browser Object Model 浏览器对象模型，允许 JavaScript 与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

    ② 组成：

    • Window：浏览器窗口对象
    • Navigato：浏览器对象
    • Screen：屏幕对象
    • History：历史记录对象
    • Location：地址栏对象

    ③ Window 详细内容：

    介绍	浏览器窗口对象
    获取	直接使用 window，其中 window. 可以省略。
    属性	history：对 History对象的只读引用。 location：用于窗口或框架的Location对象。 navigator：对Navigator对象的只读引用。
    方法	alert()：显示带有一段消息和一个确认按钮的警告框。 confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout()：在指定的毫秒数后调用函数或计算表达式。

    ④ Location 详细内容：

    介绍	地址栏对象
    获取	使用 window.location 获取，其中 window. 可以省略。
    属性	href：设置或返回完整的URL。

    5.  DOM

    ① 概念：Document Object Model，文档对象模型。

    ② 将标记语言的各个组成部分封装为对应的对象：

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

    ③ JavaScript 通过 DOM，就能够将HTML进行操作：

    • 改变HTML元素的内容
    • 改变HTML元素的样式（CSS)
    • 对HTML DOM事件作出反应
    • 添加和删除HTML元素

    ④ 获取元素对象：

    • HTML中的Element对象可以通过 Document对象获取，而Document对象是通过window对象获取的。
    • Document对象中提供了以下获取Element元素对象的函数：

    根据id属性值获取，返回单个Element对象	var h1 = document.getElementById('h1');
    根据标签名称获取,返回Element对象数组	var divs = document.getElementByTagName('div');
    根据name属性值获取，返回Element对象数组	var hobbys = document.getElementByName('hobby');
    根据class属性值获取，返回Element对象数组	var class = document.getElementByClassName('cls');

    案例：通过DOM操作，完成如下效果实现。

    1. 点亮灯泡
    2. 将所有的div标签的标签体内容后面加上：very good
    3. 使所有的复选框呈现被选中的状态

    
    
    
        
        
        
        
    
    
       
    
    
    
      
     JAVA 
     
    
      
     JavaScript 
     
    
    
       电影
       旅游
       游戏
        
    
    

    六、时间监听

    ① 事件：HTML 事件是发生在HTML元素中的 “事情” 。比如：

    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键

    ② 事件监听：JavaScript 可以在事件被侦测到时 执行代码。

    ③ 方式：

    • 方式一：通过HTML标签中的事情属性进行绑定。

    • 方式二：通过DOM元素属性绑定。

    ④  常见事件：

    事件名	说明
    onclick	鼠标单击事件
    onblur	元素失去焦点
    onfocus	元素获得焦点
    onload	某个页面或图像被完成加载
    onsubmit	当表单提交时触发该事件
    onkeydown	某个键盘的键被按下
    onmouseover	鼠标被移到某元素之上
    onmouseout	鼠标从某元素移开

    案例：通过事件监听及DOM操作，完成如下效果实现。

    1. 点击 “点亮” 按钮点亮灯泡，点击 “熄灭” 按钮熄灭灯泡。
    2. 输入框鼠标聚焦后，展示小写;鼠标离焦后，展示大写。
    3. 点击 “全选” 按钮使所有的复选框呈现被选中的状态，点击 “反选” 按钮使所有的复选框呈现取消勾选的状态。

    

    
    
    
        
        
        
        
    
    
       
    
    
      
      
    
      
     
    
    
      
      
     
    
    
       电影
       旅游
       游戏