JavaScript

  • 基于对象和事件驱动

  • 简单描述性语言

  • 函数优先

  • 解释型（即时编译型）

  • 具有安全性的脚本语言

1.js组成

  • 核心语法（ECMAScript）：开放的、标准的脚本语言规范，主要包含了语法，变量及运算符，逻辑控制语句等

  • 浏览器对象模型（BOM）：独立于内容与浏览器窗口进行交互的对象，可以实现与HTML页面的交互。

  • 文档对象模型（DOM）：访问和操纵HTML文档。

2.使用js

  • 使用外部js文件

<script src="js/write.js"></script>

write.js

document.write("学习《使用前端技术展现 Web 系统》课程");

外部脚本文件中不能包含<scirpt>标签，只能包含脚本代码

  • 使用内嵌js

将js函数放在<head>标签中

<script>

<!-- JavaScript脚本代码-->

</script>

  • 属性js

特别简短的js代码，可以直接在html标签中加入

<input

  type="button"

  name="alert"

  value="警告"

  onclick="javascript: alert('我是JavaScript脚本代码！');"

/>

浏览器本身并不会执行js，而是通过内置js引擎（解释器）；来执行js代码。

3.js语法

  • js基础语法

function 函数名(参数) {

  return 返回值;

}

js是一种弱类型语言，在声明变量时，不需要指定变量的类型，变量的类型由值决定。用var 关键字声明变量，可以直接赋值。

var height = 80;

var left,

  right,

  top,

  bottom = 20;

var info = "I’m fine!";

js对大小写敏感

js数据类型包括：

字符串、数字、布尔、数组、对象、空、未定义（未赋值的变量），字符串需要用单引号或双引号括起来

可以用typeof运算符来判断一个变量的数据类型

js中所有事物都是对象

var text = { width: 80, height: 20, name: "密码框", color: "blue" };

document.write(

        text.name + "的宽和高分别为：" + text.width + " " + text.height

);

  • js流程控制

js 的运算符和java非常类似

js控制流程分为if..else switch for while break continue

switch可以使用字符串。java中直到jdk7才可以使用字符串

js中的输入和输出可以分为对用户和对网页

针对用户输入、输出：弹出警告框alert(text)、对话框要求用户输入prompt(提示，默认值)

针对网页输入、输出：操作HTML元素，通过document.getElementByTag(id)获取元素

  • js函数

类似于Java中的方法，主要是为了使程序结构清晰，代码复用和便于维护。

js函数直接通过函数名调用就行。js也预定了一些系统函数

 var input1 = prompt("请输入第一个操作数：", "10");

        var oper = prompt("请输入操作符（仅支持:+ - * /）：", "+");

        var input2 = prompt("请输入第二个数：", "8");

        var rst;

        num1 = parseFloat(input1);

        num2 = parseFloat(input2);

4.js内置类型与对象

  • js类与对象

创建js对象：使用对象字面量

空对象：一队花括号

var myCar = {};

对象的属性：

// 汽车的名字

myCar.name = "Fiat";

// 汽车的型号

myCar.model = "500";

// 汽车的重量

myCar.weight = 850;

// 描述汽车重量的单位

myCar.wUnit = "kg";

// 汽车的颜色

myCar.color = "white";

对象的方法：

对象名.方法名 = function(){方法体};

myCar.start = function () {

  // 控制台语句表明这台车正在启动

  console.log("汽车正在启动......");

};

方法中访问属性：this代表当前对象

myCar.start = function () {

  console.log("在对象内部，'this'这个词指代对象本身:" + (myCar === this));

  console.log(this.name + "正在行驶中......");

};

在对象声明中定义属性：

属性名：值，属性名：值，

方法名：function(){方法体},

var myCar2 = {

  /*属性名*/ /*冒号*/ /*属性值*/ /*属性定义分隔符*/ name: "Fiat",

  model: "500",

  weight: 850,

  wUnit: "kg",

  color: "white" /*方法定义分隔符*/ /*冒号*/ /*函数定义*/,

  /*方法名*/ start: function () {

    console.log("名字是" + myCar.name + "的汽车正在启动......");

  },

  drive: function () {

    console.log(this.name + "正在行驶中......");

  },

  brake: function () {

    console.log(this.name + "紧急刹车!");

  },

  stop: function () {

    console.log(this.name + "已经停稳了......");

  },

};

  • js数组、字符串

js数组：Array()

定义数组：

new Array();

new Array(size);

new Array(element0,element1,...,elementN);

数组属性：length

数组方法：big——大号字体 small——小号字体 blink——闪动字体 bold——粗体 italics——斜体 strike——删除线 flexed——打印机文本 sub——上标 sup——下标 toLowerCase——小写

toUpperCase——大写 fontcolor——指定颜色 fontsize——字体大小 concat——连接字符串

charAt charCodeAt——返回Unicode编码 search——检索索引位置 indexOf——检索索引位置，可以指定开始位置 lastIndexOf match——类似indexOf，返回值 slice——从起始位置提取子串 substr——从开始位置提取指定长度的子串 substring——从指定位置提取子串 replace split——分割为字符串数组，第二个参数表示返回数组的最大长度 fromCharCode——字符编码构建字符串 anchor——创建为锚 link——创建为链接 toSource——返回对象的源代码 toString valueOf

  • 基本包装类型Number、Date、Math、Global

js基本类型有undefined、null、boolean、number、string，其中后三种存在包装类Boolean、Number、String，包装类使得方法可以直接调用

Number包装类：

var myNum = new Number(value);

Number()不是构造函数，只是普通函数

Number属性：

MAX_VALUE MIN_VALUE NaN——非数字值 NEGATIVE_INFINITY ——负无穷大 POSITIVE_INFINITY——正无穷大 toString toFIxed——转换为字符串，按指定小数位四舍五入 toExponential——转换为科学技术法，保留小数点后n位数字 toPrecision——格式化为指定长度 valueOf

Date：

var date = new Date();

      document.write("Date显示：" + date + "<br>");

      document.write("Date.toUTCString显示：" + date.toUTCString() + "<br>");

 date.setFullYear(2014, 8, 8); // 2014 年 9 月 8 日

      date.setHours(18);

      date.setMinutes(18);

      date.setSeconds(18);

document.write("设置后，Date显示：" + date + "<br>");

      date = new Date("Jan 09, 2014, 19:19:19"); // 注意格式

      document.write("设置后，Date显示：" + date + "<br>");

  var today = new Date();

                var h = today.getHours();

                var m = today.getMinutes();

                var s = today.getSeconds();

  document.getElementById('txt').innerHTML = "现在时间为：" + h + ":" + m + ":" + s;

                setTimeout('Time()',500);

Math：js内置对象

Math 方法都是静态的

Math：PI LN2 SQRT1_2——0.5的平方根 E LOG2E abs() ceil() exp() floor() max() min() random() round()

Global：是一个对象，不是一个类，既没有构造参数，也无法实例化

Global：infinity——正无穷大 java——java.*包，一个包 NaN packages undefined

Global方法：decodeURI encodeURI decodeURIComponent encodeURIComponent escape——对字符串编码 eval——计算js字符串，作为js脚本执行 getClass——返回js对象的类 isNaN

Number()——转换成数字 parseFloat——解析为浮点数 parseInt——解析为整数 String()——转换为字符串 unescape——解码 isFinite——是否为无穷大

21JavaScript笔记（1）的更多相关文章

  1. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记（三）

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

随机推荐

  1. 12 shell case in语句

    Shell也支持两种分支结构(选择结构),分别是 if else 语句和 case in 语句.当分支较多,并且判断条件比较简单时,使用 case in 语句就比较方便了. if else 语句与ca ...

  2. 矩阵按对角线打印---python

    将一个矩阵(二维数组)按对角线向右进行打印.(搜了一下发现好像是美团某次面试要求半小时手撕的题)Example:Input:[[1,2,3,4],[5,1,2,3],[9,5,1,2]]Output: ...

  3. Spring中如何使用自定义注解搭配@Import引入内外部配置并完成某一功能的启用

    文章背景 有一个封装 RocketMq 的 client 的需求,用来提供给各项目收.发消息,但是项目当中常常只使用收或者发消息的单一功能,而且不同的项目 group 等并不相同而且不会变化,可以在项 ...

  4. SpringBoot自动装配原理之Configuration以及@Bean注解的使用

    Configuration以及Bean注解的使用 该知识点在Spring中应该学过,没有学过或者遗忘的的朋友需要预习或温习前置知识点.SpringBoot其实就是Spring的进一步简化,所以前置知识 ...

  5. 前端009-vue框架

    vue-admin-element https://panjiachen.github.io/vue-element-admin-site/zh/ 基于vue的生态做的很好,提供的很多的文档,中文.并 ...

  6. win10 删除WPS提示存在wpsupdate.exe进程

    这个进程在:WIN10  任务管理器  的"详细列表"查找可能有1-2个类似的,全部关闭才能删除

  7. C语言：char总结

    char字符型数据1.用单引号限制的1字节的字符称为字符型数据,字符型常量2.字符型常量实质保存的是对应字符的ASCII码值,是一个整数3.字符型常量表示范围:0-2554.声明字符型变量 char ...

  8. 从新建文件夹开始构建ShadowPlay Engine游戏引擎（4）

    本篇序言 这次博客更新距离上次的时间间隔变短了好多,因为最近硬是抽出了一大部分时间来进行引擎的开发.而且运气很好的是在写链表这种很"敏感"的的数据结构的时候并没有出现那种灾难性的后 ...

  9. 微信小程序云开发-数据库-更新数据

    一.js文件代码使用.update更新数据 写一个更新数据的函数,函数内使用.update更新数据.一定要通过.doc指定修改哪一条数据.  二.wxml文件修改数据的按钮 在wxml文件中写[修改] ...

  10. 《手把手教你》系列技巧篇（十）-java+ selenium自动化测试-元素定位大法之By class name（详细教程）

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍By ClassName.看到ID,NAME这些方法的讲解,小伙伴们和童鞋们应该知道,要做好Web自动化测试,最好是需要了 ...