javascript:引入基本数据类型基本语法类型转换数组的单列

本文链接：https://blog.csdn.net/QL279214836/article/details/79199981

一 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);