JavaScript学习攻略

HTML 定义了网页的内容HTML 对大小写是敏感的。HTML注释以 <-- 开始以 --> 结束的
CSS 描述了网页的布局
JavaScript 网页的行为: 对大小写敏感，是发给浏览器的命令。驼峰法的命名规则,分号来分隔 JS 语句。单行//；多行注释以 /* 开始，以 */ 结尾。
函数 getElementById 与 getElementbyID 是不同的。变量 myVariable 与 MyVariable 也是不同的。

1.直接写入 HTML 输出流：document.write("<h1>这是一个标题</h1>");
2.对事件的反应：<button type="button" onclick="alert('欢迎!')">点我!</button>
3.改变 HTML 内容：x=document.getElementById("demo"); //查找元素 是 HTML DOM 中定义的x.innerHTML="Hello JavaScript"; //改变内容
4.改变 HTML 图像：
<script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
//
function changeImage(){var s = document.getElementById('myimage');s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
//
<script>
function changeImage(s){s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>5.改变 HTML 样式：x=document.getElementById("demo")  //找到元素 x.style.color="#ff0000";           //改变样式
6.验证输入：if isNaN(x) {alert("不是数字");}if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){//正则alert("不是数字");}
7.
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p><h3>这是一个段落。</h3></p>");
</script>
8.<head> 中的 JavaScript 函数
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
9.<body> 中的 JavaScript 函数
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
10.外部的 JavaScript        外部 JavaScript 文件的文件扩展名是 .js。
外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>
//myScript.js 文件代码如下：
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

可以在文本字符串中使用反斜杠对代码行进行换行：
document.write("你好 \
世界!");
不能像这样折行：
document.write \
("你好世界!");
//
JavaScript 显示数据:使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。
//
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
//写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

//语法
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号:
数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}
//
<body>
<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>
</body>JavaScript语言有多种类型的运算符：
类型  实例  描述
赋值，算术和位运算符   =  +  -  *  /     在 JS 运算符中描述
条件，比较及逻辑运算符  ==  != <  >    在 JS 比较运算符中描述
//https://www.runoob.com/js/js-syntax.html
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。JavaScript 语句标识符 (关键字) ：
语句  描述
break   用于跳出循环。
catch   语句块，在 try 语句块执行出错时执行 catch 语句块。
continue    跳过循环中的一个迭代。
do ... while    执行一个语句块，在条件语句为 true 时继续执行该语句块。
for     在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in  用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function    定义一个函数
if ... else     用于基于不同的条件来执行不同的动作。
return  退出函数
switch  用于基于不同的条件来执行不同的动作。
throw   抛出（生成）错误 。
try     实现错误处理，与 catch 一同使用。
var     声明一个变量。
while   当条件语句为 true 时，执行语句块。 JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var carname1="Volvo XC60";
var answer1='It\'s alright';
var answer2="He is called \"John\"";
var answer3='He is called "John"';
document.write(carname1 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
</body>
</html>
//
Volvo XC60
It's alright
He is called "John"
He is called "John"//数组
创建名为 cars 的数组：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"];
//对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
as
<script>
var person=
{firstname:"John",lastname:"Do",id: 5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>//new
Undefined 和 Null
Undefined 这个值表示变量不含有值。通过将变量的值设置为 null 来清空变量。
<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>
//
undefined
Volvo
null声明变量类型,可用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;//new
<body>
<p>
有两种方式可以访问对象属性：
</p>
<p id="demo"></p>
<script>
var person = {firstName : "John",lastName : "Doe",id : 5566
};
document.getElementById("demo").innerHTML =person.firstName + " " + person.lastName;
</script>
</body>
//有两种方式可以访问对象属性：John Doe
//new
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;}
};
document.getElementById("demo").innerHTML = person.fullName();
//fullName()一定加括号，否则原样输出function++++++++++++++++++
</script>//new
var x = "John";
var y = new String("John");
(x === y)
ans=false
=== 为绝对相等，即数据类型与值都必须相等。//new
常见的HTML事件的列表:事件               描述
onchange    HTML 元素改变
onclick     用户点击 HTML 元素
onmouseover     用户在一个HTML元素上移动鼠标
onmouseout  用户从一个HTML元素上移开鼠标
onkeydown   用户按下键盘按键
onload          浏览器已完成页面的加载在字符串中可以使用转义字符转义的特殊字符：
代码  输出
\'     单引号
\"     双引号
\\  反斜杠
\n  换行
\r  回车
\t  tab(制表符)
\b  退格符
\f  换页符//new
JavaScript for/in 语句循环遍历对象的属性：
var person={fname:"John",lname:"Doe",age:25};
for (x in person)  // x 为属性名
{txt=txt + person[x];
}
//as
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){var x;var txt="";var person={fname:"B",lname:"G",age:6}; for (x in person){txt=txt + person[x];}document.getElementById("demo").innerHTML=txt;
}
</script>
//
BG6
//more  https://www.runoob.com/js/js-strings.html

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

JavaScript学习攻略相关推荐

【MLDN_李兴华】JAVA学习攻略+新书导读
<Java开发实战经典>--学习攻略首先需要为读者说明的是,<Java开发实战经典>,如图1所示,不只是一本纯粹讲解基础的书,里面更多的内容是为JAVA E ...
学习攻略|清华大学对外免费开放2000门课程
作者:Tom Hardy Date:2020-02-09 来源:学习攻略|清华大学对外免费开放2000门课程
2009.11网络工程师考试案例试题学习攻略(1)
2009.11网络工程师考试案例试题学习攻略(1) 源于在网络工程实践过程中对该领域的喜爱,2005年本人有幸顺利地通过了网络工程师的资格考试,后又顺利地通过了系统分析师的资格考试.之后开始了软考培训 ...
网络规划设计师学习攻略(2)
网络规划设计师学习攻略(2) 五．厚积薄发,突破考试难点之论文篇.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com: ...
传图识字java_Java：全面清晰的 NIO 学习攻略
Java:全面 & 清晰的 NIO 学习攻略发布时间:2018-11-19 09:19, 浏览次数:202 , 标签: Java NIO <>前言 * JDK 1.4后,Java ...
Android 系统（189）---Android Handler：这是一份全面、详细的Handler机制学习攻略
Android Handler:这是一份全面.详细的Handler机制学习攻略前言在Android开发的多线程应用场景中,Handler机制十分常用今天,我将献上一份全面.详细的Handl ...
变换例题_小学语文学习攻略9：句式变换知识点概述+例题讲练
很多家长都会遇到这样的情况:孩子的语文考试卷发下来,作文上老师的评语或者做的记号上总会有几个是句意不通.在平常的交流中也是,支吾了半天也不能完整.通顺的表达自己的意思.这都是孩子在造句方面有障碍!孩子 ...
java 高效计算99乘法表_【九九乘法表】九九乘法表学习攻略九九乘法表快速记忆小诀窍...
[九九乘法表]九九乘法表学习攻略九九乘法表快速记忆小诀窍很多孩子的九九乘法表还是背的不熟练,下面是精心为大家整理的九九乘法表学习攻略,欢迎阅读.更多九九乘法表学习攻略相关内容请关注实用资料栏目! & ...
Carson带你学Android：这是一份全面详细的属性动画学习攻略！
前言属性动画的使用是 Android 开发中常用的知识本文将献上一份全面 & 详细的属性动画学习指南,将详细介绍属性动画的所有内容,包括:意义.作用.应用场景.功原理 & 具体使 ...

JavaScript学习攻略

JavaScript学习攻略相关推荐

最新文章

热门文章