HTML基础第六课（js基础语法，js原生对象，DOM语法)

最新推荐文章于 2022-11-23 14:27:08 发布

wangsongll

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量172

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wangsongll/article/details/79592536

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
    <!-- 让html实现与用户产生交互 -->

</head>
<body>
<!-- 内部引入 -->
    <script type="text/javascript">
      //变量 - 内存
      //JS声明变量都用var关键字
      //五种基本类型

      // 变量名要求
      //1.数字 字母 下划线 和$符号
      //2.不能以数组开头
      //3.不能是关键字和保留字
      //4.区分大小写
     //规范：可以使用驼峰命名法

      var a = 10;//数值 Number
      var b = "123";//字符串 String
      var c = '456';//字符串 String
      var d = true; //布尔类型 boolean
      var e = false; //布尔类型 boolean

      var f = null ;//空对象
      var g; //未定义烈类型 undefined
      //强类型语言
      //short int double string char
      //JS弱类型语言
      //var

      //判断相等 ==  ===
      //== 会判断两个值是否相等
      //=== 除了判断值之外，还会判断类型

      console.log("5" == 5);//true
      console.log("5" === 5)//false
      console.log("5" != 5);//false
      console.log("5" !== 5)//true

       for (var a = 3; a < 10; a +=5) {
       setTimeout(function(){
             console.log(a);
       },1000);

       }
       // console.log(a);
       // a=100;
    //类型转换
    //查看类型
    console.log(typeof a);
  //转数字(true(1) false(0))
  // NaN :Not a Number
   console.log(Number(true)); //1
   console.log(Number(false));//0
   console.log(Number("5")); //5
   console.log(Number("a"));//NaN
   console.log(Number("b1"));//NaN
   console.log(Number(""));//0
   console.log(Number(" "));//0
   console.log(Number("99"));//99

  //转字符串
  console.log(String(true))//true


   //转布尔值
   //对于数字--非0为真

  console.log(Boolean(1))

//对于字符串--非空为真
console.log(String(" "));//这个为空字符串 false
//console.log(String(" "));//这个不为空，中间有个空格（空格字符）

//隐式转换
//加号两边如果有一个字符串，就是拼接字符串
//其他算数运算符转换为数值计算
 console.log(3 + true);
 console.log(null + 5);
 console.log( false + "2");
 console.log(5 - true);
 console.log(7 + null);
 console.log(6 + undefined);//NaN

//转数字 parseInt()
console.log(parseInt(5.6));//5
console.log(parseInt("5.6"));//5
console.log(parseInt("34abd"));//34
console.log(parseInt("23ab34"))//23
console.log(parseInt("a33"))//NaN

//10进制 -》2进制

console.log(parseInt(15,8));//13(15(数值),8（进制类型))

//生成随机数
var num = parseInt(Math.random()*(30 -20 +1)+20);
console.log(num)


//函数  JS里面的变量只分为函数内部的局部变量，和函数外面的全局变量

function test(a,b){
   console.log(a + b);
   return a * b;
}
//调用函数
var c = test(10,20);
console.log(c);
test();

//匿名函数
//把匿名函数保存在变量里面--第一种
var fn = function(){
    console.log("我是匿名函数第三执行顺序");
};

//3
//匿名函数自执行--第二种写法
 (function(){
    var t = 100;
    console.log("我是匿名函数第一执行顺序1");
})();
//1
 (function(){
    console.log("我是匿名函数第二执行顺序2");
}());
//2

fn();
var shuzu = [2,8,3,5,12];
  for (var i = 0; i < shuzu.length; i++) {
    for (var j = 1+i; j < shuzu.length+i; j++) {
        if (shuzu[i]<shuzu[j]) {
        var a1 = shuzu[i];
        shuzu[i] = shuzu[j];
        shuzu[j] = a1;

  }
    }
  }
  console.log(shuzu);
   console.log(shuzu[1]);

  // 生成0-29不重复的随机数
 function text(){

 }
  var suiji = [];
 for (var i = 0; ; i++) {
     if (suiji.length<10) {
        suijf();
    }else{
        break;
    }
 }

 function suijf(){
     var num = (parseInt)(Math.random()*(29-0+1)+0);
     for (var i = 0; i < suiji.length; i++) {
        if (suiji[i] == num) {
            return false;
        }
     }
     suiji.push(num);
 }
      console.log(suiji);
    </script>
    <!-- 外部引入 -->
    <script type="text/javascript" src="xx.js" >
    </script>
     <!-- css引入方式 3种 -->
    <!-- js引入三种 -->
</body>
</html>

二、DOM语法（创建，设置，添加，替换，删除，获取，修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">
        .item{
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 10px blue solid;
            /*处理超出部分*/
            overflow: scroll;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
    我是box
<!-- 这是一个注释 -->
    <p>P</p>
    </div>
</body>
<script type="text/javascript">

    //1、创建元素(createElement)
  var newDiv = document.createElement("div");

   //设置类名
   newDiv.className = "item";
   // 设置id名
   newDiv.id = "first";
   newDiv.style.background = "red";

    //2、添加元素 (appendChild)
    var body = document.getElementsByTagName("body")[0];

     var box = document.getElementsByClassName("box")[0];
     //2.1body最后面添加
     body.appendChild(newDiv);

     //2.2把newDiv插入到box的前面
     body.insertBefore(newDiv,box);

      //替换掉一个元素-replaceChild
      body.replaceChild(newDiv,box);

    //3、删除元素
     // body.removeChild(box);
     box.remove();

  //DOM(元素/div。。)属性
  //JS 基础语法。 DOM
  //原生的对象
  var obj = {
    name:"丁鹏",
    age:18,
    gender:"man",
    eat:function(){
        console.log("开始吃饭");
    }
  };

  obj.add = 1;//加一个属性
  console.log(obj);
  console.log(obj.age);
  obj.eat();//调用obj方法

 //宿主对象  浏览器自己添加的对象（div）
 console.log(newDiv);


//节点   标签、文本、注释、声明（doctype）
//获取元素下所有子节点
 console.log(box.childNodes);
//获取标签类型的子节点
console.log(box.children[0]);


//尺寸和位置
//尺寸
//宽
 console.log(newDiv.offsetWidth);//包含边框
 console.log(newDiv.clientWidth);//不含边框
//高
 console.log(newDiv.offsetHeight);//包含边框
 console.log(newDiv.clientHeight);//不含边框和滚动条--可视区域
 console.log(newDiv.scrollHeight);//是内容的大小--滚动的高度

//位置
console.log(newDiv.offsetTop);
//相对于定位父级的一个位置
console.log(newDiv.offsetLeft);

//子元素滚动上去的一段距离

console.log(newDiv.scrollTop);
//除了scrollTop之外，以上属性都是只读的
setInterval(function(){

newDiv.scrollTop= 2000;
},1000);
console.log(newDiv.scrollLeft);

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <style type="text/css">
        #first{
            width: 200px;
            height: 200px;
            background-color: red;
            color: white;

        }
    </style>
</head>
<body>

    <!-- 对象模型 -->
    <div id="first"></div>
    <input type="text" class="uName">
    <input type="button" values ="点我呀">

</body>
<script type="text/javascript">
    // 获取元素，并修改背景·颜色
    var first = document.getElementById("first");
    first.style.backgroundColor="blue";
    first.style.border="5px black solid";
    first.style.margin="0px auto";
    // first.style.transform: "rotate(45deg)";

    //修改内容  first.innerHTML可以解析字符串里面的标签
    // first.innerText不能解析，可以写留言板
     first.innerHTML = "<p>福</p>";
    first.innerText = "<p>福</p>";
    console.log(first.innerHTML);
    // 通过类名获取一组元素
    var uNames = document.getElementsByClassName("uName");
    // uNames是所有uName的集合（先当成数组使用)
  //获取。修改输入框都是用value
     uNames[0].value = "我是一个输入框";
       console.log(uNames[0].value);
      // 两种获取方式，三种修改内容 一种修改样式
      // 通过标签名获取
     var button =  document.getElementsByTagName("input")[1];
     var a = 1;
     // 添加点击方法。每次点击都会执行下面这个函数
      button.onclick = function(){
        console.log(123);
        uNames[0].value = a++;
        first.style.transition ="1s";
        first.style.width = a *10 +"px";
        first.style.height = "100px";
      }
</script>
</html>

wangsongll

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础第六课（js基础语法，js原生对象，DOM语法)

一、基础语法&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;基础语法&lt;/title&gt; &lt;!-- 让html实现与用户产生交互 --&gt;&lt;
复制链接

扫一扫