1.JavaScript（以下简称JS）是一种轻量级的编程语言，被设计用来向 HTML 页面增加交互性，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中（java文件不能直接执行，得先编译成class才能执行）
2.使用方式：内嵌式、外链式
JavaScript用法：
1.放置位置：理论上可以放置在html文件中的任意位置。建议统一放置在<head></head>中，不要占用body中的位置，免得html和js混杂在一起，后期不好维护。
2.可以写多个<script></script>
3.注释：单行注释 // 多行 /* */
4.每行代码用分号分隔，一行可以写多条语句
5.页面简单的代码查错，可以用打印数据的方式：
JavaScript 可以通过不同的方式来输出数据：
（1）使用 alert() 弹出警告框。
（2）使用 console.log() 写入到浏览器的控制台。
（3）使用 document.write() 方法将内容写到 HTML 文档中。
（4）使用 innerHTML 写入到 HTML 元素。
基础知识：
1数据类型
Number（数值型）、String（字符串类型）、Boolean（布尔类型）、Object（对象类型）、Null（空类型）、Undefined（未定义类型）
2变量
使用var命令声明变量，因为JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定，其语法格式如下所示。
var number=27;
var str="传智播客";
变量的命名必须遵循命名规则，变量名可以由字母、下划线（_）、美元符号（$），甚至中文组成，但中文命名的方式不建议使用，中间可以是数字、字母或下划线，但是不能有空格、加号、减号等符号，不能使用JavaScript的关键字。可以和java一样：字母、数字、_；数字不能开头
3关键字
4运算符
JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种，具体介绍如下
| 算术运算符 | +、-、*、/、%、++、-- |
| 赋值运算符 | =、+=、-=、*=、/=、%= |
| 比较运算符 | ==、!=、>、<、<=、>=、 ===（绝对等于（值和类型均相等）） !==（不绝对等于（值和类型有一个不相等，或两个都不相等）） |
| 逻辑运算符 | &&、||、！ |
| 条件运算符 | a==b?a:b |
5对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。和java的类类似， 比如人是一个对象，包含属性身高、体重、肤色；包括方法：吃饭、睡觉
Public Class Person{
private double height;
private double weight;
public void eat(){
} public int sleep(int n){
}
}
var person = {
height:"65kg",
weight:"165cm",
eat:function(){
alert("吃饭了");
},
sleep:function(n){
alert("睡觉了："+n);
} };
alert(person.height);
alert(person['height']);
person.eat();
person.sleep("30分钟");
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
6函数
在JavaScript中，定义函数是通过function语句实现的。
function functionName（[parameter1，parameter1，...]）{
statements；
[return expression；]
}
functionName是必选项，用于指定函数名，在同一个页面中，函数名必须是唯一的，并且区分大小写； parameter1,parameter2,…是可选项，代表参数列表，当使用多个参数时，参数间使用逗号进行分隔，一个函数最多可以有255个参数； statements是必选项，代表用于实现函数功能的语句； return expression是可选项，用于返回函数值， expression为任意表达式、变量或常量。
7语句
选择语句：
（1）if…..else if…else （2）switch语句
循环语句 ：
（1）for - 循环代码块一定的次数
（2）for/in - 循环遍历对象的属性
（3）while - 当指定的条件为 true 时循环指定的代码块
（4）do/while - 同样当指定的条件为 true 时循环指定的代码块
8事件处理
HTML 事件是发生在 HTML 元素上的事情。
HTML 页面完成加载
HTML 按钮被点击
HTML 输入框里的内容改变时
| 事件 | 描述 |
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
9其他对象
10类型转换
var 声明的变量，没指明类型，如何查看类型？typeof
一般数字和字符串、字符串和日期转换常用：
将数字转换为字符串 ：
String（x）
String（123）
String（100 + 23）
将字符串转换为数字 ：
var x = “22.2”；
alert（parseFloat（x））；
alert（parseInt（x））；
字符串转日期 ：var dd = new Date("2019-12-11 11:11:11");
11JSON
JSON 字符串转换为 JavaScript 对象
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text);
alert(obj.sites[1].name);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="myCsss.css" />
<!--外链式 css引入时link是单标签的；成对的-->
<!--<script type="text/javascript" src="myJs.js"></script>-->
<!--内嵌式-->
<script type="text/javascript">
//函数，和java的区别：参数无类型，返回值无类型
/*
void login(String username,String pwd)
int login(String username,String pwd)
String login(String username,String pwd)
*/
function isExitName(username){//有返回值的方法
if(username=='zq'){
return true;
}else{
return false;
}
}
function login(username,pwd){//单引号和双引号一样用
//for in：遍历对象的属性
var person = {
height: "65kg",//属性
weight: 165.00,
sex: true,
eat: function(){//方法
alert("我吃饭了");
},
sleep: function(n){//n:睡了几个小时
alert("睡了："+n+"小时");
}
};
for(var x in person){
alert("属性是："+x+"--属性值："+person[x]
+"--属性类型-"+typeof(person[x]));
}
//一个数组里面可以有多个类型的值，java里不可以int[] s=[]
/*var s = [1,"hello",true,{},null];
for(var i = 0; i<s.length; i++){
alert(i+"---"+s[i]+"----"+typeof(s[i]));
}*/
/*switch(pwd){//case后面可以同时存在多种类型的数据，c和java不可以
case 123://123==='123' case比较：数字和类型都要相等
alert(123);
break;
case '123'://123==='123'
alert("我是字符串123");
break;
case "hello":
alert("hell");
break;
case true:
alert(true);
break;
default:
break;
}*/
/*var isExit = isExitName(username);
alert(isExit);
if(pwd=='123' && isExit){
alert("登陆成功");
}else{
alert("登录失败");
}*/
}
/*var a = 123;
var b = new Number(123);//int Integer
alert(a===b);
alert(a==b);*/
/* //Date
var d = new Date();
alert(d);
alert(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+
" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());//yyyy-MM-dd HH:mm:ss
alert(d.getTime());//把日期直接转成long值,13位的数字，这个在php存储数据常用long值的日期
alert(d.getDay());//日期，0-6，周日是0，周一是1，周六是6*/
/*//String对象，和java的String类的方法几乎的一样的
var a = "I am a china";
alert(a.length);//长度属性，算上空格
alert(a.indexOf('c',4));//查找c字符的位置,第一个位置从0开始
alert(a.lastIndexOf('c',20));//从后往前查c的位置，20超过字符串长度，不报错
alert(a.substr(2,3));//截取字符串,从位置2开始截取，截取3个字符
alert(a.substring(2,3));//从2开始截取，截取到第3个位置，不包含第3个位置的字符
var b = a.split(" ");//以空格为分隔符，拆成数组
alert(b[1]);//数组应该是这样的：["I","am","a","china"]*/
//自定义一个对象
/*var person = {
height: "65kg",//属性
weight: 165.00,
sex: true,
eat: function(){//方法
alert("我吃饭了");
},
sleep: function(n){//n:睡了几个小时
alert("睡了："+n+"小时");
}
};
alert("身高："+person.height);//对象名字.属性
alert("体重："+person.weight);
person.eat();//对象名字.方法或叫函数
person.sleep("18个");*/
/*//字符串+连接符
var a = 12;
var b = "12";
var c = a + b;
alert(c);//1212
var d = a + parseInt(b);//parseFloat,只有这2个
alert(d);//24*/
/*var a = 12;
var b = "12";
alert("==:"+(a==b));//只比较值是否相等
alert(a===b);//值和类型都相等*/
/*var a = 1;
var b = 1.0;
b = "haha";//js里面可以赋值为不同类型是数据
alert(typeof(b));//typeof是查看b的数据类型
b = true;
alert(typeof(b));//typeof是查看b的数据类型
var c;
alert(typeof(c));//undefined
var d = [];
alert(typeof(d));//object对象类型
*/
//几种住打印方式
//console.log("我是console打印");
//document.write('<h1>写入页面</h1>');
//document.getElementById("msg").innerHTML = "您用户名不对";
//alert("内嵌式引入js");
/*
多行注释
*/
function over(){
//给按钮改个背景,#fff RGB=red g=green blue
//document.getElementById("btn").style.backgroundColor = "#f00";
//$("#btn") jquery.js在原生js上进一步封装后，简化代码编写
document.getElementById("btn").className = "overClass";
}
function out(){
document.getElementById("btn").style.backgroundColor = "#0f0";
}
</script>
<style type="text/css">
.overClass{
background-color:#F90;
width:400px;
height:80px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点我登陆" onClick="login('zq','123')"
onMouseOver="over()" onMouseOut="out()"/>
<span id="msg"></span>
</body>
</html>
67
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
