JavaScript（1）基本语法

薛定谔的__猫

已于 2023-06-20 14:03:15 修改

阅读量44

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-06-20 13:59:47 首次发布

本文链接：https://blog.csdn.net/m0_64188165/article/details/131302177

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法
DOM: 页面文档对象模型, 对页面中的元素进行操作
BOM: 浏览器对象模型, 对浏览器窗口进行操作

JavaScript 代码可以嵌入到 HTML 的 script 标签中.

<script>
  alert("你好！");
</script>

这就是一个简单的JavaScript（以下简称JS）代码实现。JS是为了和用户交互的，上述就是一个最简单的交互：当用户打开界面内的时候就会弹出一个对话框，显示你好。

一.书写方式

1.书写位置

1. 行内式直接嵌入到 html 元素内部

<input type="button" value="点我一下" onclick="alert('kkk')">

注意, JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示. HTML 中推荐使用双引号, JS 中推荐使用单引号.

2. 内嵌式写到 script 标签中

<script>
  alert("你好！");

</script>

3. 外部式写到单独的 .js 文件中

<script src="hello.js"></script>
alert("hehe");

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.

2.输入输出

<script>
  //输入：弹出一个对话框
   prompt("请输入您的姓名：");
  //输出：弹出一个警示框，输出结果
  alert("你好！");
   //输出：在控制台打印一个日志(仅仅给程序员查看)
  console.log("这是一个日志");
  

</script>

二.变量的使用

1.基本用法

 //创建变量
  var name = 'zhangsan';
  var age = 20;
  //使用变量
  console.log(age);//读取变量内容
  age=30;//修改变量内容
  //举例
  var name=prompt("请输入名字");
  var sge=prompt("请输入年龄");
  alert("你的名字"+name+"\n"+"你的年龄"+age);
  // alert("你的年龄"+age);

java:静态类型变量的类型在创建的时候就确认好了,后边就不能改变了,改变就会报错.

JS：动态类型变量的类型是随着程序的运行才会确认,因此 js 中的变量类型是允许发生改变的.

2.基本数据类型

JS 中内置的几种类型

number: 数字. 不区分整数和小数,统一都使用 "数字类型" 来表示
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值.

特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.

'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.

可以使用 isNaN 函数判定是不是一个非数字.

3.数组的操作

 //定义数组
  var arr=new Array();
  var arr2=[];
  arr2[0]="hello";
  arr2[1]=2;
  //同一个数组中，元素类型可以不同。

  //不要给数组名直接赋值，此时数组中的所有元素都没了
  var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
  alert(arr);
  arr = '小猫凯迪';//这个是错误的,就变成字符串了

  //新增数组元素
  //1.修改length
  var arr=[9,5,3,1];
  arr.length=6;
  console.log(arr);
  console.log(arr[4],arr[5]);
  //2.修改下标新增
  var arr=[];
  arr[2]=10;
  console.log(arr);
  //3.使用push 进行追加元素
  var arr=[3,4,1,5,7,4];
  var newArr=[];
  for(var i=0;i<arr.length;i++){
      if(arr[i]%2!=0){
          newArr.push(arr[i]);
      }
  }
  console.log(newArr);

  //删除元素
  var arr=[9,2,4,6,4,,8,0,9];
  //从下标为2的位置开始，删除3个元素
  arr.splice(2,3);

4.函数

 //函数
  function  hello(){
      console.log("hello");
  }
  hello();
//另一种定义方式
  var add=function(){
      var sum=0;
      for(var i=0;i<arguments.length;i++){
          sum+=arguments[i];
      }
      return sum;
  }
  console.log(add(10,20));

在JS中,函数是一等公民,可以用变量保存,也可以作为其他函数的参数或者返回值.

5.对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象.

每个对象中包含若干的属性和方法.

属性: 事物的特征.

方法: 事物的行为.

//1.创建对象，使用{}
  var a={};//创建了一个空的对象
  var student={
    name:'ss',
    height:120,
    weight:189,
    sayHello:function(){
      console.log("Hello");
    }
  };
  //使用对象的属性和方法
  console.log(student.name);
  console.log(student['height']);
  student.sayHello();

  //2.创建对象，使用new Object
  var student1=new Object();
  student1.name="ss";
  student1.height=189;
  student1.weight=120;
  student1.sayHello=function(){
      console.log("hello");
  }

  //3.创建对象，使用 构造函数
  var mimi={
      name:"mimi",
      type:"中华田园喵",
      miao:function(){
          console.log("喵");
      }
  }
  function cat(name,type,sound){
      this.name=name;
      this.type=type;
      this.miao=function (){
          console.log(sound);
      }

  }
  var xiaohei=new cat('xiaohei','波斯猫','喵呜');

三.获取元素

这部分工作类似于 CSS 选择器的功能.

querySelector

<div class="box">abc</div>
<div id="id">kjk</div>
<script>
  //和css中选择器的选择方式一样
  var element = document.querySelector('.box');
  var element2 = document.querySelector('#id');
</script>

querySelectorAll

一次获取所有 / 多个.

和上边的使用一样.

四.事件

JS 要构建动态页面, 就需要感知到用户的行为.

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.

事件三要素

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进一步如何处理. 往往是一个回调函数.

1.操作元素

1.获取 / 修改元素

innerText

// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string;

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取 div 内部内容
    console.log(div.innerText);
    // 修改 div 内部内容, 界面上就会同步修改
    div.innerText = 'hello js <span>hello js</span>';
</script>

innerHTML

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

两者区别

innerText 只能获取内容

innerHTML 可以获取到HTML标签

赋值的时候:

innerText 不会解析HTML标签

innerHTML 会解析HYTML标签

2.获取 / 修改元素属性

直接通过属性获取属性的值

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

直接修改属性

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
       } else {
            img.src = './rose.jpg';
       }
   }
</script>

3.获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等)

五.两个小案例

播放-暂停按钮切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>暂停-播放切换</title>
</head>
<body>
<input type="button" value="播放"style=" width:100px; height:100px; border-radius:50px; background-color:orange">
<script>
  var btn=document.querySelector('input');
  btn.onclick=function(){
    if(btn.value=='播放'){
      btn.value='暂停';
    }else{
      btn.value='播放';
    }
  }
</script>
</body>
</html>

计数器--加一减一操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<input type="text" value="0" id="value">
<input type="button" value="点我加一" id="add">
<input type="button" value="点我减一" id="sub">

<script>
  var input =document.querySelector("#value");
  var add=document.querySelector("#add");
  add.onclick=function (){
      var num=parseInt(input.value);
      //num++;//自动隐式转换为number类型
      num=num+1;//需要自己转换为number类型
      input.value=num;
  }
  var sub=document.querySelector("#sub");
  sub.onclick=function(){
      var num=input.value;
      num--;
      input.value=num;
  }
</script>

</body>
</html>

薛定谔的__猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（1）基本语法

JavaScript 的组成JavaScript 代码可以嵌入到 HTML 的 script 标签中.这就是一个简单的JavaScript（以下简称JS）代码实现。JS是为了和用户交互的，上述就是一个最简单的交互：当用户打开界面内的时候就会弹出一个对话框，显示你好。
复制链接

扫一扫