一 JS的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS引入</title>
位置一:
<script type = "text/javascript">
window.onload = function(){
alert("line:18" + ele.innerText);
}
</head>
<body>
1.在js中可以通过ele.innerText获取该div文本
<div id = "ele">我是一个普通的div标签中的文本<div>
</body>
位置二:
2.该位置的js代码会被解析到body标签的最下方
特点:该位置js代码能直接获取body中的页面标签
<script type = "text/javascript">
alert("line:30" - "ele.innerText");
</script>
</html>**重点内容**
重点:** ele.innerText **
二 基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本数据类型</title>
</head>
<body>
<h1>基本数据类型</h1>
</body>
<script src = "js/page02.js" type = "text/javascript">
alert(1)
</script>
</html>
js/page02.js
JS的三大核心:DOM BOM ES语法(ECMScript)ES55
一.如何定义变量:var let变量 const常量
①通过关键词var进行声明变量(var a; | var a= 10;)
②不声明变量,直接对变量进行赋值(a=10)
二.变量的类型:变量的类型根据所赋予的值的类型而决定
①underfined 类型
只声明初始化的变量或初始化值为underfined变量
var a = 12345;
console.log("类型为:" + typeOf(a) + ",值为:" + a);
//②number类型
a = 10;
console.log("类型为:" + type(a) + ",值为:" + a );
注:所有数字都是number类型
//思考
console.log("5/2的结果:" + (-5/2));
//③string类型
a = "10";
console.log("类型为:" + typeOf(a) + ",值为:" + a);
//注:js中没有字符类型,'' "" 都代表字符串
//思考:打印 - 我的名字叫"顺溜"!
var str = '我的名字叫"顺溜"';
console.log("str的值:" + str);
**字符串类型用'""'嵌套**
//④boolean类型
a = true;
console.log("类型为:" + typeOf(a) + ",值为:" + a);
//注:除了 underfined 0 NaN "" false null 其他都为真
if(!1){
console.log('条件为真');
}else
console.log('条件为假');
//⑤object 类型
a = {
name:"张三",
eat.function(){
var str = this.name + "正在吃饭!";
return str;
}
}
console.log("类型为:" + typeOf(a) + ",值为:" + a);
console.log("特征:" + a.name );
console.log("行为:" + a.eat());
//⑥function类型
//this属性 var全局变量
this.age = 18;
}
console.log("类型为:" + type (a) + ",值为:" + ((new a()));
//⑦null类型
a = null;
console.log("类型为:" + typeOf(a) + ",值为:" + a);
三 基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本语法</title>
</head>
<body>
<h1>基本语法</h1>
</body>
<script src="js/page03.js">
</script>
</html>
js/page03.js
//一.分支结构
//1.if语句
//①.语法规范同java的if
//②.但没有局部作用域
//③.条件可以为任意合法表达式
if( a = 3 + 5){
var str = "我是if语法中的普通字符串";
console.log("① >>>" + str);
console.log("② >>>" + str);
}
//2.switch 语句
//①.语法和用跟java相同
//②没有局部作用域
var key = 1;
switch(key){
case 1:{
var val = "case字符串";
}
}
console.log(val);
//3.三目运算符
//①.语法同java
//②.算式的结果不仅仅为boolean类型值
var res = 10 > 5? "明天为世界末日" : "后天为世界末日";
console.log(res);
//二.循环结构
//除了没有局部作用域外,其他都和java相同
for(var i = 0 ;i < 5 ; i++){
console.log("当前i的值:" + 1);
}
console.log("循环结束后,i还存在,且值为:" + 1);
//三.关系运算符
var a = 10;
var b = "10";
if (a == b){
console.log("a和b的值相等!");
}
if (a === b){
console.log("a和b的值和类型均相等!");
}
//四.逻辑运算符
//注:结果不仅仅为boolean类型值
var num;
var res = 10 != 20 &&(num = 30);
console.log("res :" + res );
console.log("num :" + num );
var n,m;
var res = (n = 10 ) || (m = 20);
console.log(res);
四.类型转换
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>基本语法</title>
</head>
<body>
<h1>类型转换</h1>
</body>
<script src="js/page04.js" type="text/javascript">
</script>
</html>
js/page04.js
//字符串与数字之间的相互转换
//①string to number
var str;
var num;
str = "10.4";
num = (Number) (str);
console.log(num);
num = new Number(str);
console.log(num.valueOf());
//floor ceil sound
num = Math.cell(str);
console.log(num);
//parseInt从前往后解析为数字部分的字符串,转换为数字
//parseFloat可以最多解析一个小数点
str = "10.65.87ab";
num = parseInt(str);
console.log(num);
//②number to string
num = 3.14;
str = num.toString();
console.log(str);
// str = (String)(num);
// console.log(str);
// str = new String(num);
// console.log(str.valueOf());
str = "" + num;
console.log(str);
//③ all to boolean
//i) boolean类型只有true false两个值
//i) 所有类型都可以作为boolean类型通用
//iii)如果一定要做值转换,利用取非
var bol = !!5;
console.log(bol);
五.JS的数组单列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS数组单列</title>
</head>
<body>
<h1>JS数组 - 单列集合</h1>
</body>
<script src="js/page05.js" type="text/javascript"></script>
</html>
js/page05.js
var arr = [1,2,3,4,5,function(){return 4}];
//var arr = new Array(1,2,3,4,5);
console.log("数组值:" + arr + ",长度:" + arr.length);
console.log(arr[3]());
console.log(arr[100]);
//不存在下角标越界,且可以对任意下标位置赋任何值
//夸下标赋值时,导致的未赋值位置为underfined
//console.log(arr[100]);
arr[100] = "呵呵";
//console.log("数组值:" + arr + ",长度:" + arr.length);
//增:头unshift(...) | 尾push(...)
arr[arr.length] = "任意值";
console.log("数组值:" + arr + ",长度:" + arr.length);
//删:头shift(...) | 尾pop(...)
//增删改插:splice()
arr.splice(3,1,4);
console.log("数组值:" + arr + ",长度:" + arr.length);