javaScript入门(一)

不成为大佬不改名
46 阅读3分钟

js是一门有趣的语言

JS官方

  • JavaScript的书写位置

    • 内部js

      • 写在head标签中,可以通过window.onload等待html渲染完成之后再执行js

      • 写在html末尾,上(最后一个body上方)等浏览器加载完html,再操作dom

        我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效

  • 外部js

    • 通过src属性引入,用于多个模块中某个共同操作的解耦

  • 内联js

    • <body>
  <button onclick="alert('后年去字节跳动')">心想事成</button>
</body>
    • 这种写法和内部js写在head中通过window.onload等待html渲染完成之后，再去执行js一样.
  • JS的输入

    • 输出

      • 向dom中的body输出

        document.write("toDO")

      • 页面弹出输出(alert会在html渲染前弹出)

        alert("toDO")

      • 控制台测试输出

        console.log("toDO")

    • 输入

      • 页面弹出对话框输入(会在html渲染前弹出)

        prompt('请输入您的姓名')
  • 执行顺序
    • 按HTML文档流顺序执行JavaScript代码 alert() 和 prompt() 它们会跳过页面渲染先被执行
  • js中的变量

    • let和var(默认都使用let)

      let 先声明再使用，不可以重复声明
var 声明:
  可以先使用 在声明 (不合理)
  var 声明过的变量可以重复声明(不合理)
  比如变量提升、全局变量、没有块级作用域等等
  • js中的数据类型

    • 基本数据类型

      • number(整数,小数)

        • NaN(not a number 表示一个不正确的数字计算)

      • string('和"无区别)

        • 模版字符串 ${xx}

          let name='zy'
let age=21
document.write(`我叫${name},今年${age}岁`)

      • boolean

      • undefined(变量不赋值默认)

        我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

      • Null(赋值了,但内容为空)

        • 一般用在为一个尚未创建的对象先赋一个null

    • 引用数据类型

      • Object
  • 检测数据类型
    • typeof 两种写法 typeof x / typeof(x)
  • 类型转换

    • 隐式类型转换

      • 号两边只要有一个是字符串，都会把另外一个转成字符串 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

    • 显示转换

      • Number,若字符串转Number时有非数字会转为NaN

        • Number(x)
        • parseInt(x)
        • parseFloat(x)

      • String

        • String(x)
        • x.toString(进制)

  • prompt默认输入为string,转为Number运算

  • 数组

    • 声明

      • let arr =new Array(length)
      • let arr =[xx,xx,xx,xx,xx] 两种无区别

    • js数组可以自动扩容,无需担心越界

    • image-20231121164233467

    • splice删除

      • arr.splice(start,num) 从下标start开始删除num个元素，不设置num默认删到末尾,用于实现抽奖或者删除购物车中的商品

  • 函数 弱类型,形参可多于实参

    • Lambda(java就是借鉴这里)

      let fn=function(){
  //xxxx
}
fn();
//web API中
btn.onclick=function(){
  alert("xxx")
}

  • 对象

    let obj={
  name:'xxx' //对象属性用: 赋值
  age:18
}
//或者
let obj=new Object()

    image-20231123105232470

  • 遍历对象

    • for in遍历对象(for of 遍历数组)
for(let k in obj){
    console.log(k) //属性名
    console.log(obj[k]) //value值
  }

image-20231123110726644

  • 内置对象

    • Math

      • random 生成[0,1)之间的随机数

        //生成[0,10]的随机数
Math.floor(Math.random() * (10 + 1))
//生成[5,10]的随机数
Math.floor(Math.random() * (5 + 1)) + 5
//生成N-M的随机数
Math.floor(Math.random() * (M - N + 1)) + N

*

  • js的基本数据类型和引用数据类型

    • 基本数据类型

      • string
      • number
      • boolean
      • undefined
      • Null

    • 引用数据类型

      • Object
      • Array
      • 引用类型显然这个java一样修改指向同一个堆的对象，会影响彼此

      image-20231123113301354

avatar
文章
阅读
粉丝