JavaScript语言

刘晶晶

目录

  • 1 JavaScript快速入门
    • 1.1 如何插入javascrip代码
    • 1.2 引用javascritp外部文件
    • 1.3 JavaScript在页面中位置
    • 1.4 JavaScript语句和符号
    • 1.5 JavaScript注释
    • 1.6 案例1-1 script标签在html中书写位置
    • 1.7 案例1-2  JavaScript引入方式
    • 1.8 JavaScript变量
    • 1.9 JavaScript判断语句
    • 1.10 JavaScript函数
    • 1.11 案例1-4 比较两个数大小
    • 1.12 案例1-8 改变网页皮肤颜色
    • 1.13 案例1-9 验证用户名和密码
  • 2 基本语法
    • 2.1 变量
      • 2.1.1 标识符
      • 2.1.2 保留关键字
      • 2.1.3 变量的使用
      • 2.1.4 变量的赋值
    • 2.2 变量的数据类型
      • 2.2.1 数据类型分类
      • 2.2.2 基本数据类型
      • 2.2.3 数据类型检测
      • 2.2.4 数据类型检测总结
      • 2.2.5 数据类型转换
      • 2.2.6 数据类型转换(程序1)
      • 2.2.7 数据类型转换(程序2)
      • 2.2.8 数据类型转换(程序3)
      • 2.2.9 数据类型转换(程序4)
      • 2.2.10 数据类型转换(程序5)
      • 2.2.11 数据类型转换(程序6)
    • 2.3 表达式
    • 2.4 运算符
      • 2.4.1 算数运算符
      • 2.4.2 字符串运算符
      • 2.4.3 赋值运算符
      • 2.4.4 比较运算符
      • 2.4.5 逻辑运算符
      • 2.4.6 三元运算符
      • 2.4.7 位运算符
      • 2.4.8 运算符优先级
    • 2.5 流程控制
      • 2.5.1 选择结构
      • 2.5.2 if单分支语句
      • 2.5.3 if...else双分支语句
      • 2.5.4 if...else双分支举例
      • 2.5.5 if...else多路分支语句
      • 2.5.6 if...else多路分支举例
      • 2.5.7 switch...case多路分支
      • 2.5.8 while循环语句
      • 2.5.9 do...while语句
      • 2.5.10 for语句
      • 2.5.11 九九乘法表
      • 2.5.12 判断素数
      • 2.5.13 判断红白黑球个数
  • 3 数组
    • 3.1 初始数组
    • 3.2 创建数组
    • 3.3 数组的基本操作
    • 3.4 常见二维数组操作
    • 3.5 数组排序
      • 3.5.1 冒泡排序
      • 3.5.2 选择排序
      • 3.5.3 插入排序
    • 3.6 常见数组方法
    • 3.7 案例 猴子选大王
    • 3.8 案例 省份城市的三级联动
  • 4 函数
    • 4.1 函数的定义与调用
    • 4.2 变量的作用域
    • 4.3 匿名函数
    • 4.4 嵌套与递归
    • 4.5 闭包函数
  • 5 对象
    • 5.1 面向对象概述
    • 5.2 自定义对象
    • 5.3 构造函数
    • 5.4 内置对象
      • 5.4.1 String对象
      • 5.4.2 Number对象
      • 5.4.3 Math对象
      • 5.4.4 Date对象
  • 6 BOM
    • 6.1 什么是BOM
    • 6.2 window对象
      • 6.2.1 弹出窗口
      • 6.2.2 窗口打开关闭
      • 6.2.3 定时器
      • 6.2.4 限时秒杀
    • 6.3 location对象
    • 6.4 history对象
    • 6.5 navigator对象
    • 6.6 screen对象
    • 6.7 动手实践
      • 6.7.1 限时秒杀
      • 6.7.2 定时跳转
      • 6.7.3 红绿灯倒计时
      • 6.7.4 显示时间与日期
  • 7 DOM
    • 7.1 DOM对象简介
    • 7.2 HTML元素操作
    • 7.3 DOM节点操作
    • 7.4 轮播特效
    • 7.5 购物车实现方法1
      • 7.5.1 购物车结构
      • 7.5.2 购物车样式
      • 7.5.3 购物车业务逻辑
    • 7.6 购物车实现方法2
      • 7.6.1 结构页面
      • 7.6.2 样式
      • 7.6.3 页面逻辑
    • 7.7 京东
  • 8 事件
    • 8.1 事件处理
      • 8.1.1 代码
      • 8.1.2 举例
    • 8.2 事件对象
      • 8.2.1 冒泡处理
      • 8.2.2 target与currentTarget
      • 8.2.3 禁止粘贴、右键、复制、剪切
    • 8.3 事件操作
      • 8.3.1 页面事件
      • 8.3.2 鼠标事件
      • 8.3.3 键盘事件
      • 8.3.4 表单事件
    • 8.4 图片无缝滚动
    • 8.5 看了又看
    • 8.6 放大镜
    • 8.7 商品详情页放大镜效果
      • 8.7.1 页面结构
      • 8.7.2 页面样式
      • 8.7.3 页面逻辑
    • 8.8 飘动的广告
    • 8.9 猜拳游戏
    • 8.10 瀑布流
    • 8.11 手风琴效果
  • 9 正则表达式
    • 9.1 认识正则表达式
    • 9.2 字符类别与集合
    • 9.3 字符限定与分组
    • 9.4 与正则相关的方法
    • 9.5 页面注册
      • 9.5.1 注册页面结构
      • 9.5.2 注册页面样式
      • 9.5.3 注册页面逻辑
    • 9.6 身份证验证
    • 9.7 成员注册
  • 10 实训
    • 10.1 JavaScript程序设计实训内容及要求
    • 10.2 实训报告
自定义对象

1.对象的定义

语法:对象的定义是通过“{ }”语法实现的。

组成:对象以对象成员(属性和方法)构成,多个成员之间使用逗号分隔。

成员:对象的成员以键值对的形式存放在{}中。




JSON与对象的区别:

JSON是一个字符串。

JSON不仅可以用来保存对象,还可以保存数字、字符串、数组等其他类型的数据。


2.访问对象成员

3.对象成员遍历


4.深拷贝与浅拷贝

拷贝(copy):是指将一个目标数据复制一份,形成两个个体。

深拷贝:参与拷贝的两个目标,改变其中一个目标的值,不会影响另一个目标的值。

浅拷贝:参与拷贝的两个目标,一个目标的值改变,另一个目标的值也会随之改变。

实现深拷贝

基本类型(如数值、字符型):通过变量赋值即可实现。

引用类型(如数组、对象):复制对象里的成员到另一个对象。


实现浅拷贝

引用类型(如数组、对象):通过变量赋值即可实现。

提示:浅拷贝是引用类型中才有的概念。

浅拷贝的优势

浅拷贝可以节省内存开销。

5.参考代码

<script>

//1.定义对象

var obj1 = {};//定义空对象

var obj2 = {name:"AAA"};//定义含有name属性的对象

var obj3 = {

        name:"BBB",

age:20,

gender:"男",

//定义方法

speak:function(){console.log("hello!");}

};//定义含有3个属性的对象

//任务:定义一个学生的对象

var stu1 = {

name:"CCC",

age:21};

var obj4 = new Object();//创建对象

obj4.firstname = "DDD";

obj4.lastName = "EEE";

//2.访问对象成员

document.write(obj3.name +" "+ obj3.age +" "+ obj3.gender);

document.write(obj4.firstname +" "+obj4.lastName);

//对象的属性值得访问 通过 对象名.属性名访问

console.log(stu1);

console.log(stu1.name);

console.log(stu1.age);

//方法的调用

obj3.speak();

</script>

//*******************

<script>

var obj ={};

//为空对象添加属性

obj.name = "AAA";

obj.age  = 20;

//为空对象添加方法

obj.printHello = function(){ console.log("hello!");};

obj.printNihao = function(){console.log("你好!");};

//成员的访问

console.log(obj.name);

console.log(obj.age);

obj.printHello();

obj.printNihao();

//遍历对象中所有成员

for(var key in obj)

{

console.log("成员名:"+key+",成员值:"+obj[key]);

}

//任务:自己定义一个对象,完成成员的添加与遍历

</script>

//********************

<!--

1.JSON的语法规则:

数据在名称/值对中

数据由逗号分隔

大括号保存对象

中括号保存数组

2.JSON数据书写格式:名称/值

"name":"长春工业大学人文信息学院"

"URL":"www.ccutchi.com"

3.JSON值

数字(整数或浮点数)

字符串(在双引号中)

逻辑值(true或者false)

数组(在中括号中)

对象(在大括号中)

4.举例

{"age":22,"name":"Jack","biye":false}

JSON数组,数组中包括多个对象

{"site":[

{"name":"百度","url":"www.ccutchi.com"},

    {"name":"淘宝","url":"www.taobao.com"},

    {"name":"新浪","url":"www.xinlang.com"}

]}

5.一个JSON对象包含另外一个JSON对象

-->

<body>

<script>

var site = [

    {"name":"百度","url":"www.ccutchi.com"},

    {"name":"淘宝","url":"www.taobao.com"},

    {"name":"新浪","url":"www.sina.com"}

];

console.log(site[0].name+site[0].url);

var person1 = {"age":22,"name":"Jack","biye":false};

console.log(person1.name+person1.age);

console.log(person1["name"]);//注意加上双引号

var myObj = {

"name":"长春工业大学人文信息学院",

"code":"10000",

"zhuanye":{

         "zy1":"外语",

"zy2":"法学",

"zy3":"自动化"

      },

"sites":["www.ccutchi.com/waiyu",

         "www.ccutchi.com/faxue",

"www.ccutchi.com/zidonghua"]   

};

console.log(myObj.name+" "+myObj.code +" "+ myObj.zhuanye.zy1+" "+myObj.sites[0]);

//定义一个城市相关的JSON对象

</script>