javaScript
JavaScript: 简称JS，是Netscape公司提供的嵌入在html网页中的一门脚本语言，可以实现网页的交互。为什么会设计js这么语言,是为了操作当前html 中dom树.实现页面动态变化.
JS特点及优势:
特点：
（1）JS是一门直译式的语言，直接执行源代码（是一边解释一边执行，不像Java需要提前编译为class文件再运行）
（2）JS是一门弱类型的语言
优势：
（1）交互性
（2）安全性
（3）跨平台性（跨平台：有浏览器的地方就可以执行JS）
一.在HTML书写JS的方式(掌握)
1、在script标签内部可以书写JS代码，如下：
script标签可以放在head或body或页面的其他位置中，一般放在head中
<title>语法演示</title>
<script type="text/javascript">
/* if...else功能演示,if条件里会自动转型 */
/* var score=prompt("请输入您的成绩:");
if(score>=80){
alert("优秀!");
}else if(score<80 && score>=60){
alert("良好");
}else{
alert("不及格");
} */
/* switch功能演示 */
/* day最开始得到的是字符串,通过-0,则会变成数值类型,
switch语句case比较不会自动转换类型 */
/* var day=prompt("请输入周几:")-0; */
/* 这样也可以将其他类型转为整形 */
/* day = parseInt(day);
switch (day){
case 1:alert("周一");break;
case 2:alert("周二");break;
case 3:alert("周三");break;
case 4:alert("周四");break;
case 5:alert("周五");break;
default :alert("周末");break;
} */
/* 循环语句 */
var sum=0;
var i = 1;
while(i<=50){
sum += i;
i ++;
}
console.log(sum);
var arr=[89,"hello js",true,new Date()];
for(var i=0;i < arr.length;i++){
console.log(arr[i]);
}
</script>
</head>
2、通过script标签引入外部的JS文件
即将所有JS代码放在一个单独的JS文件中（后缀名为.js），再通过script标签引入JS文件即可，例如：
在html中：
<script type="text/javascript">
alert("引入JS的第一种方式!");
</script>
<script type="text/javascript" src="demo.js"></script>
Js相对于java多了几个东西:
1.多了对dom对象的操作.
2.多了事件.
3.多了效果.
二.js的输出
window.alert() 弹出警告框。
window.confirm() 弹出确认框
window.prompt()方法可以不带上window对象，直接使用
prompt()方法,弹出输入框.
document.write() 方法将内容写到 HTML文档中。
innerHTML 写入到 HTML 元素。
console.log() 写入到浏览器的控制台。
三.js变量的声明
1．使用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"};
2．不使用var关键字,声明的是全局属性
X = 3.14;
Y = “abcd”
3．let声明变量(let声明的变量只在大括号内有效,也称作局部变量)
let i = 5;
for (let i = 0; i < 10; i++) {
// 一些代码...
}
// 这里输出 i 为 5
4．Const 声明变量(const声明的变量是常量,类似于java中的final关键字)
const PI;// 错误写法
PI = 3.14159265359;
const PI = 3.14159265359;// 正确写法
const car = {type:"Fiat", model:"500", color:"white"}; // 创建常量对象
car.color = "red"; // 修改属性:
car.owner = "Johnson";// 添加属性
const cars = ["Saab", "Volvo", "BMW"];// 创建常量数组
cars[0] = "Toyota";// 修改元素
cars.push("Audi");// 添加元素
5．变量类型
(1)值类型(基本类型)：
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
A.数字
var length = 16; // Number 通过数字字面量赋值
B.字符串(注意如果字符串中有特殊符号,比如双引号,可以在该符号之前加上,转义字符)
var lastName = "Johnson"; // String 通过字符串字面量赋值
C.布尔类型
Var flag = true;
D.对空
Var tem = null;
E.未定义
Var t ;
(2)引用数据类型：
对象(Object)、数组(Array)、函数(Function)。
A.数组,java中的数组相同
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
B.对象就和java的类相同
var obj = {
id:1,
name:"gl",
show:function () {
alert(100)
}}; /*对象*/
C.方法
var fu = function show() {
$("button").prepend("<p>这是方法开头的段落!!</p>")
$("button").before("<p>这是方法之前的段落!!</p>")
$("button").after("<p>这是方法之后的段落!!</p>")
}
同样也可以用以下来指定变量类型(这样定的变量的类型都是object类型的):
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
例如：
var x = 1; /*数字*/
var y = "adsf"; /*字符串*/
var z = true; /*boolean*/
var q = null; /*null*/
var w ; /*undefined*/
var arr = ["qw","we"] /*数组*/
var obj = {
id:1,
name:"gl",
show:function () {
alert(100)
}}; /*对象*/
var fn = function f(){ /*方法*/
}
四.Js方法即函数(方法用function关键字声明,括号内写参数)
特点:
1.参数写在括号内,并且不需要指定参数的类型
2.没有返回值类型,但是可以直接通过return关键字返回.
3.方法声明关键字就是function;
格式:
function functionName(参数1,参数2)
{
执行代码
[return …]
}
例子:
function show(a,b) {
$("button").prepend("<p>这是方法开头的段落!!</p>")
$("button").before("<p>这是方法之前的段落!!</p>")
$("button").after("<p>这是方法之后的段落!!</p>")
return 30;
}
方法的调用
第一种在元素标签中调用
<input type="button" value="按钮" onclick="show()">
(2)第二种在script中调用
function show() {
document.getElementById("p1").innerHTML="p1";
show2();
}
function show2() {
document.getElementById("p2").innerHTML="p2";
document.getElementById("p3").innerHTML=person.fu(25);
}
var person={
id:1,
name:"张三",
fu:function (age) {
return this.id + "," + this.name + "," + age;
}
}
五.js对象
和java中的类非常相似,java需要定义类再创建对象赋值,而js声明类和创建对象一起完成.
var person = {
id:1,
name:"张三",
age:24,
gender:"男",
getString:function () {
return this.name + " " + this.gender + " " + this.age;
}
}
$(function () {
$("#inpu1").click(function () {
$("p").text(person.getString())
})
})
六.this关键字的使用
1．在对象中的方法使用this,this代指方法所属的对象
var person = { firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() { return this.firstName + " " + this.lastName; } };
2．在全局中使用this,this表示windows对象,也就是整个窗口
function myFunction() {
return this; }
3．在对元素进行操作中,this表示该html的标签元素
<button onclick="this.style.display='none'"> 点我后我就消失了 </button>
总结:Js对dom树的操作
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
所有选中的dom树中的元素,都是得到了一个js对象.我们可以对这些对象进行操作.
