JS学习-优快云博客

本文介绍了JavaScript的基本用法，包括HTML插入脚本、输出方式（alert、document.write、innerHTML和console.log）、变量与语法、事件处理、字符串操作、运算符、条件判断、DOM操作以及表单和正则表达式的应用。

一、简介

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

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

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

二、用法

HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中

在< body>中的JS

<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>

在< head>中

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" οnclick="myFunction()">尝试一下</button>
</body>
</html>

还可以进行外部的js文件运行

三、输出

使用 window.alert() 弹出警告框。

<script>
window.alert(5 + 6);
</script>

使用 document.write() 方法将内容写到 HTML 文档中。

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button οnclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>

【在文档加载完成后执行JS，页面将会覆盖】

使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

	var i = 1;
        while (i <= 10) {
            if (i % 2 == 0) {
                console.log(i);
            }
            i++;
        }
       for (var i = 1; i <= 5; i++) {
     		if (i == 3) {
         	continue; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
}

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

四、基础语法

1、数组（Array）字面量定义一个数组：
[40, 100, 1, 5, 25, 10]
2、对象（Object）字面量定义一个对象：
{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
3、函数（Function）字面量定义一个函数：
function myFunction(a, b) { return a * b;}
4、var 关键字会告诉浏览器创建一个新的变量
5、当您声明新变量时，可以使用关键词 “new” 来声明其类型

var length = 16;                                  
var points = x * 10;                             
var lastName = "Johnson";                         
var cars = ["Saab", "Volvo", "BMW"];             
var person = {firstName:"John", lastName:"Doe"};
var carname=new String;
var x=      new Number;
var y=      new Boolean;

5、注释用 “ // "
6、JavaScript 对大小写是敏感的

五、语句

break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do … while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for … in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if … else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

六、作用域

在函数内声明则为局部变量，在函数外定义则为全局变量；如果在函数内定义但没用var定义，则为全局变量

function myFunction() {
    carName = "Volvo";
}

七、事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码

<button onclick ="this.innerHTML=Date()">现在的时间是? </button>
<button οnclick="displayDate()">现在的时间是?</button>

常见的事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
可以使用多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生

八、字符串

<script>
var app = "qwer tyui op";
var a =app[2];  
document.write(a);//显示e
document.write(app.length);//12
</script>

<p id="demo">
<script type="text/javascript">
var x = "John";
var y = new String("John");
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;//x与y是不同的，x是字符串，y是对象
</script>
</p>

转移字符

’ 单引号
" 双引号
\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

九、运算符

加法
-减法 »
*乘法
/ 除法
% 取模（余数）
++ 自增 i++（i–）（先运算，在加减）
– 自减 ++i (–i) (先加减，在运算）

=… x=y
+=… x+=y … x=x+y
-= … x-=y …x=x-y
=… x=y… x=x*y
/=… x/=y… x=x/y
%=… x%=y …x=x%y


<script>
var a = 16+  "als" ;
alert(a);
</script

<script>
var a =  "16als" ;
alert(a);
</script

== …等于
=== …绝对等于（值和类型绝对相等）
！= …不等于
！== …不绝对等于（值和类型有一个不等或都不等）
&& ……与（同真为真）
|| …… 或（同假为假）
！……非

十、if……else

var a = prompt("请输入数字")
if(a > 10)
{  alter("大于")}
else{alter{"小于");}

var a =prompt("成绩");
if(a > 80)
{ alert("不错")}
else if(a >60 && a <=80){
alert("还行")}
else{alert("不行")}

alert(a > 10 ? "大于10" : "小于");

十一、switch

var x;
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; 
  case 6:x="今天是星期六"; 
  break; 
}

十二、for

var a = prompt("请输入数字")
for(i=0;i<=a:i++)
{ alert(i);
if(i == 4 )
continue;//continue是跳出当前循环，break是停止循环

//循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)  // x 为属性名
{ txt=txt + person[x];
}
}

十三、while

注意：do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行

十四、typeof、null、undefined

typeof ----(返回数据类型）【constructor 属性返回所有 JavaScript 变量的构造函数】

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object //数组也是特殊的对象
typeof {name:'John', age:34} // 返回 object



"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }


function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

null -----表示一个空对象引用

var person = null;           // 值为 null(空), 但类型为对象

undefined ---- undefined 来清空对象;undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。

var person = undefined;     // 值为 undefined, 类型为 undefined
var person;                  // 值为 undefined(空), 类型是undefined

何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a; // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = [‘ss’,‘nn’];
emps = null; // 释放指向数组的引用
4、延伸——垃圾回收站
它是专门释放对象内存的一个程序。
（1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
（2）总有一个对象不再被任何变量引用时，才释放

十五、类型转换

String(123)  //数字转换为字符串
String(true）//bool型转换为字符串
（123）.toString()
（true).toString()
number("998") //字符串转换为数字
number(true)  //1

d= new date();
number(d);

5 + null    // 返回 5         null 转换为 0

十六、正则表达式

正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法：/正则表达式主体/修饰符(可选)

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

//replace()
<p>替换 "Microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
    document.getElementById("demo").innerHTML = txt;
}

修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配
表达模式
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

text()
test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

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

exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

十七、表单

  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">

disabled 规定输入的元素不可用
max 规定输入元素的最大值
min 规定输入元素的最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必需的
type 规定输入元素的类型

表单验证

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

十八、DOM

查找元素：
通过ID来查找

var a = document.getElementById("demo");

通过标签来查找

var a = document.getElementByTagName("p");

通过类名来查找

var a =document.getElementByClassName("pp");

改变HTML内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

<p id="pa">lalalalala</p>
<script type="text/javascript">
document.getElementById('pa');*.innerHTML = "wenben";
</script>

改变CSS

<h1 id="id1">我的标题 1</h1>
<button type="button"  onclick="document.getElementById('id1').style.color='red'">点我!</button

事件

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

document.getElementById("myBtn").onclick=function(){displayDate()};

//onload 和 onunload 事件会在用户进入或离开页面时被触发。
//onchange 事件常结合对输入字段的验证来使用。

/onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>
//onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
<div onmouseup="up(this)" onmousedown="down(this)" style="background-color: red;width: 200px;height: 200px;padding: 100px">点击鼠标
</div>
	<script type="text/javascript">
		function up(obj) {
			obj.style.backgroundColor="blue";
			obj.innerHTML = "谢谢学习js";
		}
		function down(obj) {
			obj.style.backgroundColor="green";
			obj.innerHTML = "松开鼠标";
		}
	</script> -->