1、概述

1.1 什么是JavaScript?

1.1.1 概念

JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.1.2 作用

1、为网页添加各式各样的动态功能,

2、为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.2 JavaScript历史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript 为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript 实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。

1.3 JavaScript的用法

JavaScript通常简称为js,或者js脚本。

1.3.1 HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间,script标签放在head中可以,body中也可以, 放在最后也可以,对位置要求不严格

我们可以在 HTML 文档中放入不限数量的script标签,通常的做法是把内容统一放入head或者页 面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

PS:有些案例中可能会在 script 标签中出现type="text/javascript"。现在完全可以省略了,JavaScript已 经 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
<script>
alert("hello JavaScript1-1");
</script>
<script>
alert("hello JavaScript1-2");
</script>
</head>
<body>
<script>
alert("hello JavaScript2-1");
</script>
<script>
alert("hello JavaScript2-2");
</script>
</body>
</html>
<script>
alert("hello JavaScript3-1");
</script>
<script>
alert("hello JavaScript3-2");
</script>

1.3.2 外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件 扩展名是 .js。

当我们使用外部文件时,在HTML页面的script 标签的 "src" 属性中设置该 .js 文件:

myScript.js文件 //外部js文件中不能有script标签,直接编写JavaScript脚本代码即可
function fun1(){
alert("hello JavaScript");
}
<!DOCTYPE html>
<html>
<head>
<script src="js/myScript.js"/>
</head>
<body>
<script>
fun1();//调用脚本中的内容s
</script>
</body>
</html>
外部文件引入一次即可,在head或者body中都可以。

PS:外部脚本不能包含 script 标签。

1.3.3 标签属性中的JavaScript

直接编写在HTML标签的一些属性中,用于简单的JavaScript代码的编写,用的偏少。

<a href="javascript:alert('ok')">登录</a>

1.4 JavaScript显示数据

1.4.1 使用window.alert()弹出框

PS:这里的window可以省略,等价于alert("hello world");

1.4.2 使用document.write()将内容写入到html文档

1.4.3 使用innerHTML写入到html元素

1.4.4 使用console.log写入到浏览器控制台

2、JavaScript的注释

JavaScript注释与java的单行和多行注释相同。

单行注释以 // 开头。

多行注释以 /* 开始,以 */ 结尾。

3、JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言。

3.1 JavaScript变量

声明变量的关键字:

var 语法:

var 变量名称;

变量的命名规则:

变量必须以字母开头

变量也能以 $ 和 _ 符号开头

变量名称对大小写敏感(y 和 Y 是不同的变量)

不能使用关键字保留字

变量的命名规范:

见名知意 。例如:breadPirce,userService等,避免无意义的a,b,c等 推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。

3.2 JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执 行前对所有代码进行编译。

3.3 JavaScript的数据类型

3.3 JavaScript的数据类型

3.3.1.1 字符串String

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;

3.3.1.2 数字Number

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

3.3.1.3 布尔Boolean

只能有两个值:true 或 false。

3.3.1.4 空Null

var email=null;

3.3.1.5 未定义Undefined

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

1、变量声明且没有赋值;

var obj;
alert(obj);//obj值为undefined

2、获取对象中不存在的属性时;

var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of
undefined"

3、函数需要实参,但是调用时没有传值,形参是undefined;

4、函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined。

function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined
alert(result);//result的值也是undefined,因为printNum()没有返回值

3.3.1.6 Symbol

后续介绍

3.3.2 引用数据类型:

对象(Object)、数组(Array)、函数(Function)。

3.3.3 JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var param; // param类型为 undefined
param = 5; // 现在 param 为数字
param = "John"; // 现在 param 为字符串

3.4 JavaScript中的运算符

运算符的运算规则与java一样,在这里不再赘述。

说两个特殊的

4、JavaScript对象

4.1 JavaScript的String对象

4.1.1 String对象属性--长度属性

var str="我喜欢看NBA,最喜欢的球员是\'小学生\'库里";
//注意:字符串中出现的\'是一个字符,转义为一个单引号
console.log(str);
//获取字符串的长度:,切记:所有转移符号的长度都算一个,即\'长度为1
console.log("字符串的长度="+str.length);//22

4.1.2 String对象方法

和java的String方法类似,需要自己查表

4.2 JavaScript的Array对象

Array 对象用于在变量中存储多个值,也就是数组。

4.2.1 声明数组

4.2.2 数组的长度 length属性

PS:大家需要注意的length是数组的属性,不是方法,所以调用的时候没有括号。

var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度

4.2.2 Array对象的方法

查表

4.3 JavaScript的Date对象

4.3.1 创建日期对象

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

4.3.2 日期对象的常用方法

4.4 JavaScript的Math对象

4.4.1 Math常用属性

var pi=Math.PI;//返回圆周率

4.4.2 Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

5 JavaScript调试

浏览器 f12 可以打断点进行调试

6、JavaScript的函数

6.1.1 isNaN(param) 用于检查其参数是否是非数字值。

是数值的返回false,不是数值返回true。

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

6.1.2 parseFloat(String)

可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字 符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

字符串中只返回第一个数字。

开头和结尾的空格是允许的。

如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。

6.1.3 parseInt(string,radix)

可解析一个字符串,并返回一个整数

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
PS:旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5,当字符串以"0"开
头时默认使用八进制,ECMAScript 5使用的是十进制),所以在解析("010") 将输出8。

只有字符串中的第一个数字会被返回。

开头和结尾的空格是允许的。

如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。

在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制 的基数

6.2 JavaScript的自定义函数

6.2.1 自定义函数语法

使用function关键字定义函数。

function 自定义函数名称(参数列表){
//函数体
}

6.2.2 自定义函数实例

注意:

1、函数的形参直接写参数名称,不需要声明类型,即不需要写var.

2、函数的返回取决于函数体中是否有return关键字。

6.3 JavaScript的匿名函数

JavaScript课堂笔记一相关推荐

  1. JavaScript课堂笔记

    前置任务: 配套视频:https://www.bilibili.com/video/BV15v411K7qe/ 第一章:基本语法 第一节:JavaScript的来源 1.网景公司(Netscape): ...

  2. Nodejs课堂笔记02

    第3天课堂笔记 ##1. 知识点 模块系统 核心模块 1. 文件操作的fs 2. http服务的http 3. url 路径操作模块 4. path 路劲处理模块 5. os 操作系统模块 第三方模块 ...

  3. Linux课堂笔记(2)

    Linux课堂笔记(2) 1 Linux文件管理 1.1 touch命令 touch命令用于创建文件.修改文件或者目录的时间属性,包括存取时间和更改时间.若文件不存在,系统会建立一个新的文件. ls ...

  4. Day03_HTML课堂笔记

    Day03 HTML 课堂笔记 1 回顾 1.1 文本标签 em 文本加强,默认斜体显示,只需把需要加强的文字套入该标签中 strong 文本加强,默认粗体显示,同上 ins 插入,多用于价格更新,默 ...

  5. HTML5第7次课堂笔记(图片验证码的应用,xmlhttprequest对象的使用,跨域)

    HTML5第7次课堂笔记 1.  图片验证码的应用:(1)服务端Content-type的控制:(2)客户端防止缓存(仅对GET) 服务器端使用的是jsp 点击图片,实现刷新验证码 有时拿不到服务器的 ...

  6. JavaScript基础笔记集合(转)

    JavaScript基础笔记集合 JavaScript基础笔记集合   js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译   js存放的位置 html脚本必须放在< ...

  7. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  9. 管理系统中计算机应用第四章重点,管理系统中计算机应用课堂笔记第四章(4)...

    管理系统中计算机应用课堂笔记第四章(4) 分类:自考 | 更新时间:2016-07-08| 来源:转载 这个分析和抽象工作可分以下三步进行: 5.2.1数据流程图的绘制 数据流程图既是对原系统进行分析 ...

最新文章

  1. IIS7.5中神秘的ApplicationPoolIdentity
  2. 第18课:模型部署上线的几种服务发布方式
  3. div中图片下方有边距
  4. 移动互联网广告 - 第十更 - 广告投放运营 DashBoard - 2016/12/10
  5. nmealib解析-----(1)
  6. java string 对象地址_Java中String对象的存储位置(学习笔记)
  7. unity 特效shader下载_Unity shader消融特效——(1)逻辑节点篇
  8. editormd html 转义,Markdown(editormd)语法解析成html(示例代码)
  9. Python之struct详解
  10. 5G基站君的进化之路 — CU和DU分离
  11. Vue3.x-bate + Antd2.x 项目搭建报错
  12. 封神台靶场-尤里的复仇-第二章
  13. DVWA-不安全的验证码
  14. PRA006/PRA010 开发板,Quartus Altera JTAG 配置,以及常见故障解决
  15. Emgucv图像处理二
  16. php chinapay,GitHub - jakehu/chinapay-for-ecshop: 上海银联(chinapay)支付插件 for ECSHOP
  17. 【Linux】htop命令的使用详解
  18. discuz论坛怎么去掉标题和底部powered by discuz方法
  19. 2018,华米高歌猛进的一年 1
  20. android团购客户端,领团网团购导航Android手机客户端获机锋网力推

热门文章

  1. 已成功与服务器建立连接,但是在登录过程中发生错误。 (provider: Shared Memory Provider, error: 0-管道的另一端上无任何进程
  2. 望京有没有可能成为下一个硅谷?
  3. 教你一眼认出英语单词的意思
  4. 此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情
  5. c语言实现utf-8编码解码器
  6. 李云赫天津大学计算机,祝贺创业谷涌现全国自强之星,同济创业谷,陪伴这个世上最有梦想的人...
  7. j2cache入门使用
  8. 取模、乘法和除法运算在CPU和GPU上的效率
  9. OpenCV开发笔记(四十五):红胖子8分钟带你深入了解重映射(图文并茂+浅显易懂+程序源码)
  10. 苹果手机滑动光标怎么设置_苹果手机移动的光标怎么设置出来