Javaweb_Js

政宇 | STAR

已于 2023-08-29 21:26:55 修改

阅读量44

点赞数

文章标签： javascript 前端开发语言

于 2023-07-21 19:50:50 首次发布

本文链接：https://blog.csdn.net/m0_64837052/article/details/131859044

版权

alert('hello,js!');

// 输出语句
window.alert('1');
document.write('2');
console.log('3');

// var与let
/*
var：
  作用域比较大，全局变量
  可以重复定义
let：
   只在代码块内部有效（局部变量）
   不允许重复声明   
*/
// const常量：不允许改变
const pi=3.14

// 数据类型：原始类型 和 引用类型
/*
原始类型：
  number string boolean null(对象为空) undefined  
*/
let a=3
alert(typeof(a))
alert(typeof(null)) // object

// 类型转换
/**
 * 字符串转数字
 *  如果不是数字，转为NaN
 * 
 * 其他类型转boolean
 *  Number：0和NaN为false
 *  String：空串为false
 *  Null和undefined为false
 */
alert(parseInt("12")); //12
alert(parseInt("12A45"));//12
alert(parseInt("A41"));//NAN

// 函数 箭头函数
function add(a,b){
  return a+b;
}
var add=function(a,b){
  return a+b;
};

(形参) => {
  console.log('我是箭头函数');
}

// js对象 Array String JSON BOM(浏览器对象模型) DOM（文档）等
/* 1.Array
  特点：长度可变 类型可变
  属性：length 
  方法：
    foreach（遍历每个 有值 元素(fori会遍历全部)，并调用一次传入函数） 
    push（将新元素添加到末尾，返回新的长度）
    splice（start,num）从数组中删除元素
*/
var arr=[];
arr=[1,2,3,true,'a',[1,2,3]]
alert(arr[1])
// 或者
var arr=new Array(1,2);

var array=[1,3,[2,4],'a',undefined,true]
array.forEach(
  function(e){
    console.log(e);
  }
);

array.forEach(
  (e)=>{
    console.log(e);
  }
)

/* 2.String
  var str='';
  var str=new String('...')
  属性：length
  方法：
    charAt(index)返回在指定位置的字符
    indexOf(string)检索字符串
    (string) trim()去除两边空格
    substring(start,end)两个索引之间子串  [start,end)
*/

/*3.Json
  js自定义对象
      var obj={
        属性
        方法
      };
  json(JavaScript Object Notation,JavaScript对象标记法)
    json是通过JavaScript对象标记法书写的文本  
    方法：
      json字符串转js对象
        JSON.parse(jsonStr)
      js对象转json字符串
        JSON.stringify(obj)

*/
// 自定义对象
var user={
  name:'tom',
  age:10,
  gender:'male',
  eat:function(){
    console.log('吃'+this);//Object
    console.log('吃');
  },
  drink :()=>{
    console.log('喝'+this); //Window
    console.log('喝');
  }
};
user.eat();
user.drink();

var jsonStr='{"name":"Tom","age":18,"addr":["北京",1]}';
// value可以是number string 逻辑值 数组 对象 null

// json字符串转js对象
var obj=JSON.parse(jsonStr);
console.log(obj.name);
console.log(obj.addr);

/*4.BOM browser object model,js与浏览器进行对话，js将浏览器的各个组成部分封装成对象

组成：
  ①Window浏览器窗口对象
    获取window.(可以省略)
    属性：
      history获取history对象
      location
      navigator
    方法：
      alert()
      confirm()确认/取消
      setInterval()按照指定周期（毫秒）执行某个函数
      setTimeout()在指定时间后调用某个函数
  ②Navigator浏览器对象
  ③Screen屏幕对象
  ④History历史记录对象
  ⑤Location地址栏对象
    获取：location
    属性：
      href：设置或返回完整的url


*/
var flag=confirm("你确定吗?");
console.log(flag);

setInterval(
  function(){
    console.log("每隔2s执行一次");
  },
  2000
);
setTimeout(
  function(){
    console.log("3s后执行");
  },
  3000
)
console.log(location.href);
location.href="https://www.baidu.com";

/*5.DOM对象 document object model  将标记语言（html/xml）的各个组成部分封装成对应的对象
  组成：
    Core DOM-所有文档类型的标准模型
      ①Document：整个文档对象（整个html）
      ②Element：元素对象（标签）
      ③Attribute：属性对象（标签的属性）
      ④Text：文本对象（标签之间文本）
      ⑤Comment：注释对象
    XML DOM -XML文档标准模型
    HTML DOM：
      多了image button等
      获取：HTML中Element对象可以通过Document对象获取，而Document通过window对象获取的
        document.getElementById("id")（返回单个Element对象）
        document.getElementsByTagName/Name/ClassName （标签名(例:div)/name属性值/class属性值）
      查询手册，设置属性，方法
        let img=document.getElementById("id");
        img.src="img/on.git";
*/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    alert('hello1!')
  </script>
  <!-- <script src="./javaScript/hello.js"></script> -->

</head>

<body>
  <input type="button" id="btn" value="按钮">
  <input onfocus="hand()" onblur="point()">
  <p onmouseover="over()" onmouseout="out()">p标签</p>
</body>

<script>
  alert('hello!')
</script>
<script>
  // 必须在后面
  document.getElementById('btn').onclick = function () {
    console.log('点击了');
  }
  function hand() {
    console.log("手");
  }
  var point = function () {
    console.log("箭头");
  }
  function over(){
    console.log("over");
  }
  function out(){
    console.log("out");
  }
</script>

</html>
<!-- 
  js区分大小写
  style="box-sizing: border-box;"
 -->