JS的基本内容-CSDN博客

本文链接：https://blog.csdn.net/Gang__lang/article/details/129541459

这篇文章介绍了JavaScript的基础知识，包括数据类型如number、string、boolean等，展示了变量赋值和运算符的使用，如加减乘除。还涵盖了循环结构如while和for，函数的定义与调用，以及对象的概念。此外，讲解了DOM操作，如获取和修改HTML元素，以及JSON的使用，强调了JSON与JS对象之间的转换。

摘要由CSDN通过智能技术生成

JS是为了弥补HTML和CSS只能生成静态页面的不足

js的数据类型：是弱类型的语言，number string boolean null undefined

js的基本案例及运算符的使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试JS的语法</title>
        <!-- 1、内部JS代码 -->
        <script>
            //js的数据类型：是弱类型的语言，number string boolean null undefined
            var a=10;
            a=1.9+2.8;
            a=1.9+2.1;
            a="何林阳";
            a=false;
            // a=null;
            alert(a);
            var b;
            alert(b);//只定义而未赋值，会得到提示undefined
            var c="123"+"456";
            alert(c);
            //JS的运算符--- % ++ --
            var d=12;
            d++;
            alert(d);
            d=d%2;
            alert("d%2的值"+d)
            var e=11;
            // e+=1;
            // e-=1;
            // e*=2;
            e/=2;
            alert(e);
            var f=1;
            var g=1;
            alert(f==g);
            alert(f===g);//除了比数据的值，还要比数据的类型
            
            alert(e>f?e:f);
            
            var aa=prompt("输入数字1");
            var bb=prompt("输入数字2");
            alert(aa>bb?1:0);
            
            alert(typeof f);//typeof用来查看数据类型
            //alert(typeof c);
        </script>
    </head>
    <body>
    </body>
</html>

循环

js中的循环与Java中的类似

//while循环
var c=0;
var d=100000000;
while(d>1){
    d/=2;
    c++;
}
console.log("总共要"+ c);

//for循环
for(var i=1;i<=10;i++){
    console.log(i);//在浏览器的控制台输出
}
var sum=0;
for(var i=1;i<=100;i++){
    if(i%4==0){
        sum+=i;
    }
}
console.log("总和是："+sum);


//if判断
var a=prompt("请输入名字");
if(a=="狼"){
    // alert("成功");
    console.log("成功");
}else{
    alert("失败");
}
// 增强for循环--for...in
for(var i in arr2){
    console.log(i+":::"+arr2[i]);
}

数组

js中的数组可以存放任何类型的数据，相对于Java中的object数组

js中的数组长度可随意改变

var a=new Array();
var arr=new Array("abc",12,true);
alert(arr.length);//3
var arr2=[];
alert(arr2.length);//0
arr2=["as",false,123,44];
alert(arr2.length);
console.log(arr2);
console.log(arr2[1]);

函数

定义函数必须要有function

函数有两种定义方式：

第一种：可以先调用在定义

function a(){
    var b=[1,3,true];
    for (var i = 0; i < b.length; i++) {
        console.log(i+" "+b[i]);
    }
}
a();

第二种：只能先定义在调用

var b=function(x,y){
    console.log(x+y);
}
b(1,2);

JS中函数的返回值与Java的一样，都是使用return关键字

var d=function(x,y){
    console.log(x*y);
    return x*y;
}
alert(d(1,33));

对象

对象分为window对象和自定义对象

window对象：

// Window对象
window.onload=function(){//当整个页面都加载完时，才执行的功能
    console.log(typeof 100)
}
//确认框
window.confirm("text");//window.confirm("text");
//弹出框
window.alert("test");
//输入框
var a=prompt("请输入数字");
window.console.log(typeof a);
//将String类型的数据转为number类型的数字
var b=parseInt(a);
window.console.log(typeof b);

自定义对象：

自定义对象有两种定义方式：

//方式一
function Person(){}//声明对象
var p=new Person();//创建对象
console.log(p);
//动态绑定属性
p.name="狼";
p.age=11;
//动态绑定函数
p.run=function(){
    console.log(this.name+"跑的飞快...");
}
//调用函数
p.run();

//方式二
var d={
    //动态绑定属性，逗号隔开多个属性
    name:"小动物",
    age:12,
    //动态绑定函数
    run:function(){
        console.log("小动物吃啥都行");
    }
}
console.log(d);
d.run();

DOM

与网页HTML连接，可以很方便的对html元素进行访问及增删改查操作

获取页面元素的4种方式:

getElementsByTagName 标签名称，得到数组

getElementsByName name属性，得到数组

getElementsByClassName class属性，得到数组

getElementById id属性，单个值

注意：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

//使用dom --通过id的值，获取元素
var x=document.getElementById("a");
console.log(x);//打印元素
console.log(x.innerHTML);//获取标签内的内容
x.innerHTML="改变";//设置元素的内容

//通过class的值获取元素
var b=document.getElementsByClassName("b");
console.log(b);
console.log(b.length);
for(var i=0;i<b.length;i++){
    console.log(b[i].innerHTML);//根据下标遍历数组
}
b[2].innerHTML="lang";//根据下标修改元素
//根据name获取元素
var c=document.getElementsByName("c");
console.log(c);
console.log(c[0].innerHTML);
//根据标签名获取元素
var c=document.getElementsByTagName("a");
console.log(c);
console.log(c[1].innerHTML);

JSON

json对象的定义与js对象的定义十分相似，但是json的对象本质还是字符串

json字符串

//定义json字符串
var a='"name":"lang"';//json字符串
console.log(a);
console.log(a.substr(1));//截取子串
console.log(a.concat(123));//拼接字符串
console.log(a.length);

json对象

//定义json对象--本质还是字符串
var b='{"name":"张三","age":"13"}';//是json字符串，用来交互数据的格式
var b2={name:"张三",age:13};//js对象，封装了属性函数

json数组

//定义json数组--本质也是字符串
var c='[{"name":"lisi","age":"10"},{"name":"jack","age":"22"}]';
console.log(c);
console.log(c.substr(5));

json与js之间也可以相互转换

//json字符串 -->js对象--为了调用属性，函数方便
//js对象-->json字符串--为了对字符串进行操作，给服务器发送数据
var jsobj=JSON.parse(c);//json字符串 -->js对象
console.log(jsobj);
console.log(jsobj[1].age);
console.log(jsobj[0].name);
var jsobj1=JSON.stringify(jsobj);//js对象-->json字符串
console.log(jsobj1);
console.log(jsobj1.concat(123));
console.log(jsobj1);