JS是JavaScript的缩写，而JSP是Java Server Page的缩写，后者是用于服务器的语言。
JavaScript代码写在标签<script></script>之间。
Html文档中可以放入不限数量的脚本；脚本可位于<body>或<head>部分中（可同时存在），通常做法是把函数放入<head>部分或者页面底部。
<body>中的JavaScript：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script> 10 document.write("<h1>这是一级标题</h1>"); 11 document.write("<p>This is a message!</p>"); 12 </script> 13 14 15 </body> 16 </html>
本例是在页面加载时向Html的<body>写文本。
<head>中的JavaScript函数：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <script> 8 <!--函数体放在head部分--> 9 function myFunction() 10 { 11 document.getElementById("demo").innerHtml = "我的第一个JavaScript函数"; 12 } 13 </script> 14 </head> 15 <body> 16 <h1>my web page</h1> 17 <p id="demo">This is a paragraph!</p> 18 <!--在body中使用button的onclick实事件调用函数--> 19 <button type="button" onclick="myFunction()">Try it!</button> 20 </body> 21 </html>
<body>中的JavaScript函数：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <h1>My web page</h1> 10 <p id="demo">A paragraph</p> 11 <!--段落的对象id属性为demo--> 12 <button type="button" onclick="myFunction()">try</button> 13 14 <script> 15 function myFunction() 16 //js获取id的属性,使用innerHTML设置属性 17 { 18 document.getElementById("demo").innerHTML="my first Js function!"; 19 } 20 </script> 21 22 </body> 23 </html>
外部的JavaScript：
外部文件通常包含被多个网页使用的代码；外部文件拓展名为.js；如需使用外部文件，html文件中的<script>标签的src属性中设置该.js文件。外部js文件不能包含<script>标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script src="myScript.js"></script> 9 </body> 10 </html>
外部
1 document.write("你真帅！");
输出内容：
JavaScript中没有打印或输出函数，输出数据有以下四种方式：
1.使用alert()弹出警告框；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>弹窗测试</title> 6 </head> 7 <body> 8 <h1>handsome</h1> 9 <button type="button" onclick="myFunction()">你过来啊</button> 10 <script src="myScript.js"></script> 11 </body> 12 </html>
1 function myFunction() 2 { 3 alert("你真是帅到掉渣！"); 4 }
2.document.write()将内容写到HTML文档中（如果在HTML文档完成加载后执行则会对整个页面进行覆盖）
3.console.log()数据写入到浏览器控制台（浏览器F12打开控制台，点击控制台的console查看控制台文本）
4.innerHTML写入到HTML中的元素里
操作HTML元素：
给HTML元素加上id属性，js代码中使用document.getElementById("")的方式进行操作，使用innerHTML=""的方式获取或插入元素内容
JS语法规则：
*****Javascript标识符必须以字母，下划线，或美元符($)开头。
数据类型：
定义变量使用var
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语句理解:
JS语句是对浏览器发送的要求指令,浏览器根据接收到的指令执行相应操作,执行操作的载体为HTML语句.
例如:
1 document.getElementById("demo").innerHTML = "hello"; 2 //表示向id为demo的HTML语句输出字符串hello
JS是脚本语言,通常的编程语言是先讲程序进行编译然后再执行,JS是对语句按照编写顺序逐行执行.
每一行可执行语句以分号“;”结尾。
JS语句通常以语句标识符开始并执行，标识符是不可作为变量名的保留关键字段。
JavaScript变量：
存储的信息的容器，使用var关键字定义变量。
给变量赋值时，若为字符串则使用单引号或双引号。
重新声明变量，其值不会丢失。
声明新变量事可以使用new来定义其数据类型。
1 var carname =new String; 2 var x= new Number; 3 var y= new Boolean; 4 var cars= new Array; 5 var person= new Object;
JavaScript数据类型：
字符串（string），数字（number），布尔（boolean），数组（array），对象（object），空（null），未定义（undefined）
JS拥有动态类型，相同的变量可作用于不同的类型，根据赋值确定类型.
JavaScript数组：
三种定义方式：
1 var fruit = new Array(); 2 fruit[0] = "Apple"; 3 fruit[1] = "banana"; 4 fruit[2] = "grape";
1 var fruit = new Array("Apple","Banana","Grape");
1 var fruit = ["Apple","Banana","Grape"];
JavaScript对象：
由花括号隔开，对象的属性定义采用名称和值对（name:value）的形式，属性之间用逗号隔开，属性定义可以换行，代码可读性更高。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>just test</title> 6 </head> 7 <body> 8 <h1>下面依次打印数组的三个元素</h1> 9 <p id="test">我马上就变了。</p> 10 <button type="button" onclick="myFunction()">见证奇迹的时刻。</button> 11 12 <script> 13 var person = { 14 firstname : "Edward", 15 lastname : "Erlic", 16 id : 12138}; 17 function myFunction() 18 { 19 document.getElementById("test").innerHTML = person.id; 20 } 21 </script> 22 </body> 23 </html>
对象属性寻址有以下两种方式：
对象寻址
undefined和null：
undefined表示标量为空值，可以通过给变量赋值null来清空变量。
JavaScript函数：
函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用于中的任何变量。
函数是由事件驱动的，当被调用时才执行，且可以重复调用。
function functionname() //function关键字不可少，大小写敏感，花括号必须有 { 执行语句； }
调用带参数的函数：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>just test</title> 6 <script> 7 function myFunction(a,b) 8 //定义带参函数时参数变量之间使用,隔开, 9 { 10 alert(a+b); 11 } 12 </script> 13 </head> 14 <body> 15 <h1>点击下面的按钮</h1> 16 <button type="button" onclick="myFunction(3,5)">按钮1</button> 17 <!--调用函数myFunction时想其中传递了两个值“3,5”，顺序与定义函数时参数顺序必须相同--> 18 <button type="button" onclick="myFunction(7,8)">按钮2</button> 19 </body> 20 </html>
调用带返回值的函数：
调用函数结束后返回一个值到调用的地方，函数结束运行，整个程序继续执行。
1 var temp = myFunction();
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>just test</title> 6 </head> 7 <body> 8 <p id="test"></p> 9 10 <script> 11 function myFunction(a,b) 12 { 13 return a*b; 14 } 15 document.getElementById("test").innerHTML = myFunction(3,4); 16 //myFunction函数的返回值作为值向id为test的HTML元素输出文本 17 </script> 18 19 </body> 20 </html>
return也可以作为退出函数的语句而不返回任何值
1 function myFunction(a,b) 2 { 3 if(a>b) 4 { 5 return; 6 } 7 x=a+b; 8 }
局部变量：
在函数内部声明的变量，只能在函数内访问它；不同的函数中可以声明同名的局部变量，只有声明过该变量的函数能识别出该变量；函数运行完毕本地变量就会被删除；局部变量优先级比全局变量高，同时出现的时候会隐藏同名的全局变量。
全局变量：
在函数外声明的变量都是全局变量，网页上的所有脚本和函数都能访问它。
//myGlobal定义在函数外，是全局变量 var myGlobal =10; function fun1() { //oopsGlobal虽然在函数内声明，但是没有使用var关键字，所以自动被创建在全局作用于中，是全局变量 oopsGlobal = 5; }
JavaScript事件：
事件是可以被JS监测到的行为
HTML事件：
浏览器行为或用户行为，HTML网页中每个元素都能产生可以触发JS函数的事件。
EXP：HTML页面加载完成、HTML input字段改变时、按钮被点击
字符串：
用于存储和处理文本，单、双引号都适用。
字符串中有引号的话有两种处理方式：
（1）字符串中的引号与外层引号不同
（2）使用转移字符反斜杠“\”
1 var answer = 'It\'s alright'; 2 var answer = "He is called \"Johnny\"";
字符串也可以是对象，使用new创建，一般尽量不要创建字符串对象，会拖慢执行速度。
字符串属性和方法：
原始值字符串不是对象，没有自己的属性和方法，但是可以调用JavaScript的属性和方法，因为JS在执行属性和方法的时候可以把字符串当做对象。
字符串属性如下：
| 属性 | 描述 |
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串长度 |
| prototype | 允许向对象添加属性和方法 |
字符串方法（只有常用的，一些比较生僻的没有列出）：
| Method | 描述 |
| charAt() | 返回指定索引位置的字符 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式匹配的值 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substrng() | 提取字符串中两个指定的索引号之间的字符 |
| toLowerCase() | 字符串转为小写 |
| toUpperCase() | 字符串转为大写 |
| toString() | 返回字符串对象值 |
| vaueOf() | 返回某个字符串对象的原始值 |
扫一扫
4920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
