一、JS基础语法
1.JS概述
- HTML 定义网页的内容 H5
- CSS 规定网页的布局 CSS3
- JavaScript 实现网站的交互 ES6
特点:
(1)JS是一门直译式的语言,直接执行的就是源代码.
是一边解释一边执行,没有编译的过程(不像Java需要提前编译为class文件再运行).
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势:
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
2.基础数据类型
包括:number/string/boolean/null/undefined
(1) 数值类型-number
在JS中,数值类型只有一种,就是浮点型。
在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换。
(2) 字符串类型-string
在JS中,字符串是基本数据类型。
在JS中,字符串直接量是通过单引号或者双引号引起来。
(3) 布尔类型-boolean
值为true或者是false;
(4) undefined
值只有一个就是undefined。表示变量没有初始化值。
(5) null
值也只有一个,就是null。表示空值或者不存在的对象。
3.复杂数据类型
函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)
4.JS变量
js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。
(1) 在JS中是通过 var 关键字来声明一个变量
(2) 在JS中声明的变量是不区分类型的, 可以指向任意的数据类型。
5.JS运算符
JS中的运算符和Java中的运算符大致相同
算术运算符: +,-,*,/,%,++,–
赋值运算符: =,+=,-=,*=,/=,%=
比较运算符: ,!=,=,!==,>,>=,<,<=
位运算符: & , |
逻辑运算符: && ,||
前置逻辑运算符: ! (not)
三元运算符: ? :
6.测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的基础语法</title>
<!-- script在HTML网页中嵌入JS代码 -->
<script>
//2.JS的运算符
//typeof运算符获取数据的类型
var i = 10;
console.log(typeof i);//number,控制台输出的日志,f12
i = 'hello';
console.log(typeof i);
console.log(typeof i + 'abc');
//比两个数里的最大值
var e = 3;
var f = 5;
var g = e > f ? e: f ;
alert(g);
//比三个数里的最大值
var h = 8;
// g = g > h ? g : h ;
// g = e > f ? e大 : f大 ;
g = e > f ? (e > h ? e : h) : (f > h ? f : h) ;
alert(g);
var c = 10 ;
var d = '10' ;
alert(c==d);//true
alert(c===d);//false,比值和类型
alert(c!=d);//false
alert(c!==d);//true
var b = 10;
alert(b+1);//11
alert(b-2);//8
alert(b*1.6);//16
alert(b/3);//3.333
alert(b%3);//1
//自增自减
//alert(b++);//10
//alert(++b);//11
// b = b++ ;
// alert(b+"====");//10
//java面试题:以下两行代码有区别吗?
// byte b = 1;
// b = b * 2 ; // 错误,需要强转
// b *= 2 ; //正确,复合赋值运算符会自动类型转换
b = b * 2 ;
b *= 2 ;
// 1.JS的变量: 变量类型 变量名=变量值
var a = 5;
//修改a的类型
a = 1.5;
a = "hello js" ;
a = 'hello js2' ;
a = true ;
alert(a);
</script>
</head>
<body>
</body>
</html>
二、JS语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS的语句</title>
<script>
// 2. JS的循环结构:for while
//练习:while 计算1个亿一天花一半,花多少天
var days = 0;//定义变量,记录天数
var money = 100000000 ;//定义变量,记录钱
while( money > 1 ){
money /= 2 ; //照着一半花
days++ ; //天数++
}
console.log('1个亿总共花了'+days+'天');
//练习:for计算1~100里的奇数个数
var count = 0;//定义变量,记录个数
for(var i = 1 ; i<=100 ; i++){
if(i % 2 == 1){//奇数
count++ ;//遇到奇数就加1
}
}
console.log('奇数个数是:'+count);
//练习:for计算1~100里的偶数和
var sum = 0;//定义变量,记录和
for(var i=1 ; i<=100 ;i++){
if( i % 2 == 0 ){//偶数
sum = sum + i ;
}
}
console.log('偶数和是:'+sum);
// 1. JS的分支结构:
//switch...case
//练习:根据变量的值,提示今天星期几
var week = 1 ;
switch(week){
case 1 : console.log('今天星期1');break;
case 2 : console.log('今天星期2');break;
case 3 : console.log('今天星期3');break;
case 4 : console.log('今天星期4');break;
case 5 : console.log('今天星期5');break;
case 6 : console.log('今天星期6');break;
case 7 : console.log('今天星期7');break;
}
//if...else
//练习: 80~100(包括80,也包括100) 优秀
// 60~80(包括60,但不包括80) 中等
// 0~60(包括0,但不包括60) 不及格
// 其他值 输入有误
var score = 78 ;
if(score>=80 && score<=100){
console.log('优秀');
}else if(score>=60 && score<80){
console.log('中等');
}else if(score>=0 && score<60){
console.log('不及格');
}else{
console.log('输入有误');
}
const m = 10 ;//const定义常量,必须被初始化,而且不能改值
// m = 1.1;
console.log(m);
var a = 10;
if( a > 5 ){
console.log('ok');
}else{
console.log('no ok');
}
</script>
</head>
<body>
</body>
</html>
三,JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如:数值、字符串、布尔值、undefined、null、对象、函数等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS的数组</title>
<script>
// 1.创建js数组: 数据类型丰富,长度可变
//第二种方式: 推荐!!
var b = [] ;
console.log(b.length);
b = [10,1.1,'jack',true,null] ;
console.log(b.length);
b[3]=99;
console.log(b);
//遍历数组:i表示下标,b.length是数组的长度
for(var i = 0 ; i < b.length ; i++ ){
console.log(b[i]);//根据下标获取数据
}
//java里的foreach: for(Object o : b){
//js里的for..in
for(var o in b){
console.log(b[o]);//o是下标,根据下标获取数据
}
//第一种方式:
var a = new Array();
console.log(a);
console.log(a.length);//获取数组的长度
//修改长度并存入各种类型的数据
a = new Array(10,1.1,'jack',true,null);
console.log(a);
a[99]=100;
console.log(a.length);//100
console.log(a);
</script>
</head>
<body>
</body>
</html>
四.JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块,前面使用了关键词 function
方式一:通过function关键字声明函数
声明:function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例:
function a(){ //无参函数定义
var a = [1,2,3,4,5]; //定义数组
var sum =0; //定义变量
for (var i = 0; i <a.length; i++) {
if(a[i]%2==0){
sum+=a[i];
}
}
alert(sum);
}
a();//函数调用
function b(x,y){//定义含参函数
alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用
方式二:通过函数直接量声明函数
声明:var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例:
// fn2(); //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
alert(100);
}
fn2(); //函数调用
var fn3 = function(x,y){ //定义含参函数
alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配,王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用
注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题!!!
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js函数</title>
<script>
//统计1~100里4的整数倍数的和
//方式1:
//1. 定义js函数
function test1(){
var sum = 0 ;//定义变量,记录总和
for(var i=1;i<=100;i++){
if(i % 4 == 0){//4的整数倍
sum = sum + i ; //求和
}
}
return sum ;//把算完的和返回给调用者
}
//2.调用函数
var a = test1();
console.log(a);
//方式2:
//1.定义函数
var test2 = function(){
console.log(100);
}
var test3 = function(){
return 666; //返回值,交给调用者保存
}
var test4 = function(a,b,c){//参数列表等着调用者传入具体的值
return a+b+c;
}
//2.调用函数
var tt = test4(1,2,3);
console.log(tt);
var t = test3();
console.log(t);
test2();
</script>
</head>
<body>
</body>
</html>
五.JS对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS的对象</title>
<script>
//2. js的自定义对象
//方式2: {name: 'jack', age: 20}
//练习:创建新的js对象
var car = {
//绑定属性 k:v
color : 'red' ,
price : 9.9 ,
//绑定函数
run : function(a,b){
console.log(a+b);
},
stop : function(x,y,z){
return x+y+z ;//返回给调用者
}
}
//调用属性
console.log(car.color + car.price);
//调用函数
var res = car.stop(1,2,3);
console.log(res);
car.run(1,2);
console.log(car);
var teacher = {
//绑定属性
name : 'jack',
age : 20 ,
//绑定函数
run : function(){
console.log(100);
},
eat : function(){
console.log(200);
}
}
teacher.eat();//调用函数
teacher.run();
console.log( teacher.name );//调用属性的值可以打印或修改
//方式1:
function Student(){}//声明对象
var s = new Student();//创建对象
//绑定属性
s.name='蔡徐坤';
s.hobby='唱跳rap';
//绑定函数
s.sing=function(){
console.log("solo...");
}
console.log(s);
s.sing();
function Person(){}//声明对象
var p = new Person();//创建对象
//动态的给对象绑定属性
p.name = 'jack';
p.age = 20;
//动态的给对象绑定函数
p.eat = function(){
console.log(100);
}
console.log(p);
p.eat();//调用函数
//1.js的内置对象
//document对象,JSON对象...重点后面讲
//window对象的常用功能--了解
// window.alert('123');//弹出框
// window.confirm('请选择');//确认框
// window.prompt('请输入');//输入框
// window.document //获取document文档对象
// //string对象的常用功能--了解
// alert('123'.length);//求字符串的长度
// alert('123'.concat("hello"));//拼接字符串
// //number对象的常用功能--了解
// alert(3.3333.toFixed(2));//约束小数位数,参数是小数的位数
// var a = parseInt('100')+1 ;//把字符串转成数字
// alert(a);//101
</script>
</head>
<body>
</body>
</html>
六.DOM技术
1.概述
全称是 文档对象模型.用来 利用document对象提供的各种属性和方法,方便快速的定位网页中的所有元素
2.document对象
1, 获取对象: window.document
2, 常用的方法:
按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素
按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组
按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组
按照标签名的值获取元素: getElementsByTagName(标签的名字)–获取到多个元素 , 存入数组
直接向网页输出: write()
3, 常用的属性:
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容
3.测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM技术</title>
<!--
DOM: document object model 文档对象模型,用来利用js的技术快速的操作元素
利用核心对象document提供的API完成
-->
</head>
<body>
<!-- onclick给元素设置鼠标点击事件,调用指定函数test1() -->
<div onclick="test1()">我是div1</div>
<div name="n1">我是div2</div>
<div class="c1">我是div3</div>
<span id="d1">我是span1</span>
<span name="n1">我是span2</span>
<a href="#" class="c1">点我</a>
<script>
// 1. 定义函数--当点击我是div1时触发
function test1(){
//需求3:输出第二个class="c1"的元素内容
var data2 = document.getElementsByClassName("c1")[1].innerText;
console.log(data2);
//修改元素内容
// document.getElementsByClassName("c1")[1].innerText='<p>我是p1</p>';//不解析标签
document.getElementsByClassName("c1")[1].innerHTML='<p>我是p1</p>';//解析
//修改元素的样式css变字的颜色
document.getElementById("d1").style.color='red' ;
//需求2:输出第一个name="n1"的元素内容
//document.getElementsByName根据name属性获取到多个元素,存入数组
//[0]按照下标,获取到数组里的第一个元素
var data = document.getElementsByName("n1")[0].innerText ;
console.log(data);
//也可以选中元素后,直接修改内容
document.getElementsByName("n1")[0].innerHTML='<h1>我又变了...</h1>' ;
//document对象提供的innerHTML和innerText属性的区别?前者可以解析HTML代码
//需求1:输出了id=d1的元素内容
var a = document.getElementById("d1");//获取id=d1的元素
console.log(a);//输出了整个元素
console.log(a.innerHTML);//获取元素的内容
a.innerHTML='我变了....';//修改元素的内容
}
</script>
</body>
</html>
七.JSON
7.1概述
是一个字符串,用来完成 前后端数据交互的 格式.
是一种轻量级的数据交换格式,而且数据格式看起来很简洁
JSON对象: 可以把 json字符串 和 js对象 互转
1, json字符串 转成 js对象: 方便的通过对象,调用属性 函数
JSON.parse(json字符串) :接受一个json字符串作为参数,返回 js对象
2, js对象 转成 json字符串: 方便对字符串操作(拼接,长度,截取…)
JSON.stringify(js对象) : 接受一个js对象,返回一个 json字符串
7.2测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JSON对象</title>
<!-- JSON对象用来完成 js对象和json字符串的 互转 -->
<script>
//定义函数,点击div1时触发
function test1(){
// 1. json字符串,对象的写法
var a ='{"name":"jack","age":"20"}';
// 2. json字符串,数组的写法
var b ='[{"name":"tony","age":"20"},{"name":"rose","age":"30"}]';
//3. JSON对象
//3.1 json字符串的转成js对象:目的是方便的调用对象封装的属性
var jsobj = JSON.parse(a);//json字符串的转成js对象
console.log(jsobj);//{name: 'jack', age: '20'}
console.log(jsobj.name);//获取对象里name属性的值
console.log(jsobj.age);//获取对象里age属性的值
//需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置
document.getElementById("d2").innerHTML=jsobj.name ;
//练习:
var jsobj2 = JSON.parse(b);//json字符串的转成js对象
console.log(jsobj2);//类似于数组结构
console.log(jsobj2[1].name);//获取到数组里第二个对象的name属性的值
console.log(jsobj2[0].age);//获取到数组里第一个对象的age属性的值
//需求: 利用dom技术,把解析到的20,展示在id="d3"位置
document.getElementById("d3").innerHTML = jsobj2[0].age ;
//3.2 js对象转成json字符串:目的是方便的操作字符串,也可以发送给服务器
//创建js对象
var obj = { name:"jack" , age:20 } ;
var jsonstr = JSON.stringify(obj);//js对象转成json字符串
console.log(jsonstr);//得到json字符串
console.log(jsonstr.length);//获取字符串的长度
console.log(jsonstr.concat('hello'));//拼接字符串
}
</script>
</head>
<body>
<div id="d1" onclick="test1()">我是div1,点我</div>
<div id="d2">我是div2</div>
<div id="d3">我是div3</div>
</body>
</html>