JavaScript教程学习笔记

最新推荐文章于 2022-07-06 15:10:55 发布

Arvin233

最新推荐文章于 2022-07-06 15:10:55 发布

阅读量108

点赞数

JavaScript教程学习笔记

JavaScript教程-菜鸟教程

JS简介

轻量级编程语言
脚本语言
浏览器会在读取代码时，逐行地执行脚本代码；而对于传统编程来说，会在执行前对所有代码进行编译
可插入HTML页面，插入后可由所有的现代浏览器执行
对大小写敏感
使用 Unicode 字符集

插入方式

HTML 中的脚本必须位于<script>与 </script> 标签之间

<body>中的JS
<head>中的JS
外部JS（.js文件），利用script标签的src属性设置
外部脚本不能包含script标签

基本语法

字面量

一般固定值称为字面量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)
字符串（String）字面量可以使用单引号或双引号
表达式字面量用于计算
数组（Array）字面量定义一个数组
对象（Object）字面量定义一个对象
函数（Function）字面量定义一个函数
布尔（Bool）字面量 true false

5 + 6

[40, 100, 1, 5, 25, 10]

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

function myFunction(a, b) { return a * b;}

变量&数据类型

变量

使用关键字 var来定义变量，使用等号来为变量赋值
变量名必须字母/$/_开头

数据类型

值类型：数字/字符串/布尔/对空()/未定义/Symbol
引用数据类型：对象/数组/函数
未定值变量 Value = undefined（undefined为一个数据类型）
清空变量 Value=null（空对象的引用，为Object类型）
重新声明 JavaScript 变量，该变量的值不会丢失
动态类型
.constructor属性：返回所有 JavaScript 变量的构造函数
类型转换：自动(+)/强制（String()/.toString()/Date()/Number()）

var x, length;
x = 5;
length = 6;

var lastname="Doe", age=30, job="carpenter";

var lastname="Doe",
age=30,
job="carpenter";

var x,y,z=1;

*在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined*

操作符

算术运算符 + - * / % ++ –
赋值运算符 = += -= *= /= %=
条件运算符 == != <= >= =（绝对相等，即数据类型与值都必须相等）!
逻辑运算符 && || !
条件运算符 variablename=(condition)?value1:value2

语句&关键字&注释

语句用分号分隔（可选）
代码块： {}
单行注释： //
多行注释： /* */
折行： \（在文本字符串中使用）
常用关键字： new typeof NaN Indinity

函数

由事件驱动的或者当它被调用时执行的可重复使用的代码块

局部变量/全局变量（在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它）
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性
非严格模式下给未声明变量赋值创建的全局变量，是全局对象（window）的可配置属性，可以删除（del varl）

//函数定义-语法
function functionname({var1,var2})
{
    // 执行代码
    return {result};   //可选
}

//函数定义
function myFunction(a, b) {
   	return a * b;                                // 返回 a 乘以 b 的结果
}
//函数调用
myFunction(a, b);

字符串&字符串对象

字符串属性及方法
字符串可用+操作符连接
字符+数字，返回字符串
var x = “John”; //字符串
var y = new String(“John”); //字符串对象，与x非绝对相等

JavaScript对象

拥有属性和方法的数据类型
由花括号分隔
在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，由逗号分隔
属性：键值对；方法：函数
this：当前对象的一个引用/全局对象window

//JS对象定义
var person={firstname:"John", lastname:"Doe", id:5566};
//访问对象属性
name=person.lastname;
name=person["lastname"];

//创建对象方法
methodName : function() { code lines }
//访问对象方法
objectName.methodName()

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function()
	{
       return this.firstName + " " + this.lastName;
    }
};

条件&分支

//if else条件句
if (time<20)
{
    x="Good day";
}

//switch分支
var d=new Date().getDay();
switch (d)
{
  case 0:x="今天是星期日";
  break;
  case 1:x="今天是星期一";
  break;
  case 2:x="今天是星期二";
  break;
  case 3:x="今天是星期三";
  break;
  case 4:x="今天是星期四";
  break;
  case 5:x="今天是星期五";
  break;
  default:x="今天是星期六";
  break;
}

循环

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for (var i=0;i<cars.length;i++)
{
    document.write(cars[i] + "<br>");
}

//for/in循环
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

//do while循环
do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

正则表达式

语法

结构

/正则表达式主体/修饰符(可选)

var patt = /runoob/i;
str.search(/Runoob/i);

构造

修饰符

i 执行对大小写不敏感的匹配
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 执行多行匹配
表达式主体模式

表达式	描述
[abc]	查找方括号之间的任何字符
[0-9]	查找任何从 0 至 9 的数字
(x\|y)	查找任何以 \| 分隔的选项

元字符	描述
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符

量词	描述
n+	匹配任何包含至少一个 n 的字符串
n*	匹配任何包含零个或多个 n 的字符串
n?	匹配任何包含零个或一个 n 的字符串

方法

search()：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
replace()：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
RegExp.test()：检测一个字符串是否匹配某个模式（含有true，否则false）
RegExp.exec()：返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为 null

var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
var n = str.search("Runoob");

var patt = /e/;
patt.test("The best things in life are free!");

/e/.test("The best things in life are free!");
/e/.exec("The best things in life are free!");

输出

JS没有打印/输出函数，但可使用不同方式达到输出目的

window.alert() 弹出警告
document.write() 将内容写到 HTML 文档中
innerHTML 写入到 HTML 元素
console.log() 写入到浏览器的控制台

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

/*相当于加了一行显示日期*/
/*如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖*/
<script>
document.write(Date());
</script>

HTML事件

发生在 HTML 元素上的事情，可以是浏览器行为，也可以是用户行为，如：

HTML 页面完成加载 load
HTML input 字段改变时
HTML 按钮被点击 onclick
onkeydown

触发

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素

<some-HTML-element some-event='JavaScript 代码'>

//按钮示例
  //调用函数
<button "getElementById('demo').innerHTML=Date()">现在的时间是?</button>
  //简单指令
<button "displayDate()">现在的时间是?</button>

错误处理

try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义错误
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行

var txt="";
function message()
{
    try {
        adddlert("Welcome guest!");
        if(txt=="") throw "值为空";
    } catch(err) {
        txt="本页有一个错误。\n\n";
        txt+="错误描述：" + err.message + "\n\n";
        txt+="点击确定继续。\n\n";
        alert(txt);
    }
    finally {
    document.getElementById("demo").value = "";
    }
}

变量提升&严格模式

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部，
变量可以在使用后声明，也就是变量可以先使用再声明
初始化不会提升
JavaScript 严格模式(strict mode)不允许使用未声明的变量
严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明

示例-表单验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
"return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

//自动验证（required [HTML输入属性](http://www.runoob.com/html/html5-form-attributes.html)）
<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

this & let & const & void

this

在方法中，this 表示该方法所属的对象
如果单独使用，this 表示全局对象
在函数中，this 表示全局对象
在函数中，在严格模式下，this 是未定义的(undefined)
在HTML事件中，this 表示接收事件的元素，见例
类似 call() 和 apply() 方法可以将 this 引用到任何对象

<button "this.style.display='none'">
点我后我就消失了
</button>

let & const

let 声明的变量只在 let 命令所在的代码块内有效
const 声明一个只读的常量，一旦声明，常量的值就不能改变

void

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

参考手册

JavaScript 内置对象

Arvin233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程学习笔记

JavaScript教程学习笔记JavaScript教程-菜鸟教程JS简介轻量级编程语言脚本语言浏览器会在读取代码时，逐行地执行脚本代码；而对于传统编程来说，会在执行前对所有代码进行编译可插入HTML页面，插入后可由所有的现代浏览器执行对大小写敏感使用 Unicode 字符集插入方式HTML 中的脚本必须位于<script>与 </script> 标...
复制链接

扫一扫