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>