JS基础

最新推荐文章于 2024-06-05 22:00:23 发布

ambition_star

最新推荐文章于 2024-06-05 22:00:23 发布

阅读量110

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/ambition_star/article/details/103756424

版权

一、 JavaScript 概述

1. 什么是JavaScript

1) JS 介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

2) JS 组成

核心语法 -ECMAScript 规范了JS的基本语法
浏览器对象模型 -BOM
Browser Object Model，提供了一系列操作浏览器的方法
文档对象模型 -DOM
Document Object Model ，提供了一系列操作的文档的方法

2. 使用方式

元素绑定事件
- 事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
- 事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
- 常用事件：onclick (单击事件)
- 语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。
```

<button onclick="console.log('Hello World');">点击</button>
```
文档内嵌。使用既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。
JS 输入语句
- alert(""); 普通的网页弹框
- prompt(""); 接收用户输入的弹框，返回用户输入的内容
- console.log(); 控制台输出，多用于代码调试
- document.write(“
  Hello
  ”);实现在动态在网页中写入内容。
  1. 在使用事件方式写入时，会重写网页内容
  2. 可以识别HTML标签,脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置，在当前位置中插入，如果是在head中嵌入，内容会作为body的首行内容显示

二、基础语法

1. 语法规范

JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
JS严格区分大小写
注释语法
单行注释使用 //
多行注释使用 /* */

2. JS的变量与常量

1) 变量

作用 : 用于存储程序运行过程中可动态修改的数据

语法 : 使用关键var声明,自定义变量名

var a;		//变量声明
a = 100;	//变量赋值
var b = 200; //声明并赋值
var m,n,k;	//同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

命名规范 :
- 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
- 禁止与关键字冲突(var const function if else for while do break case switch return class)
- 变量名严格区分大小写
- 变量名尽量见名知意,多个单词组成采用小驼峰,例如：“userName”
使用注意 :
```
- 变量如果省略var关键字,并且未赋值,直接访问会报错
```
- 变量使用var关键字声明但未赋值,变量初始值为undefined
- 变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

2) 常量

作用 : 存储一经定义就无法修改的数据
语法 : 必须声明的同时赋值
```
const PI = 3.14;
```
注意 :
- 常量一经定义,不能修改,强制修改会报错
- 命名规范同变量,为了区分变量,常量名采用全大写字母

操作小数位
toFixed(n); 保留小数点后 n 位
使用：

 var num = 3.1415926;
 //保留当前变量小数点后两位
 var res = num.toFixed(2);

3. 数据类型

1) 基本数据类型（简单数据类型）

number 数值类型

整数

十进制表示

   var a = 100;

八进制表示
以0为前缀

   var b = 021; //结果为十进制的 17

十六进制
以0x为前缀

   var c = 0x35;//结果为十进制的 53

 使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数
1. 小数点表示
```
 var m = 1.2345;
```
1. 科学计数法
  例 : 1.5e3
  e表示10为底,e后面的数值表示10的次方数
  1.5e3 等价于 1.5 * 10(3)

string 字符串类型
字符串 : 由一个或多个字符组成,使用""或’'表示,每一位字符都有对应的Unicode编码
```
var s = "100";
var s1 = "张三";
```
boolean 布尔类型
只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0
```
var isSave = true;
var isChecked = false;
```
undefined
特殊值,变量声明未赋值时显示undefined
```
var a;
console.log(a);//undefined
```
null 空类型
解除对象引用时使用null,表示对象为空

2) 引用数据类型

主要指对象，函数等

3) 检测数据类型

typeof 变量或表达式
typeof (变量或表达式)

var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. 数据类型转换

不同类型的数据参与运算时,需要转换类型

1) 强制类型转换

转换字符串类型
方法 : toString()
返回转换后的字符串

 var a = 100;
 a = a.toString(); //"100"
 var b = true;
 b = b.toString(); //"true"

转换number类型
- Number(param)
  参数为要进行数据类型转换的变量或值，返回转换后的结果:
  如果转换成功,返回number值
  如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN
- parseInt(param)
  参数为要解析的数据
  作用 : 从数据中解析整数值
  过程 :
  1. 如果参数为非字符串类型,会自动转成字符串
  2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果
- parseFloat(param)
  作用 : 提取number值，包含整数和小数部分

2) 隐式类型转换（自动转换）

当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串
其他情况下，一律将操作数转number进行数学运算

5. 运算符

1) 赋值运算符

= 将右边的值赋给左边变量

2) 算数运算符

+ - * / %  加 减 乘 除 取余

3) 符合运算符

+= -= *= /= %=

4) 自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：

自增或自减运算符在单独与变量结合时，放前和放后没有区别
如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/–,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / –

5) 关系运算符/比较运算符

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
使用
- 字符串与字符串之间的比较
  依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
- 其他情况
  一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
相等与全等
- 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
- 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

6) 逻辑运算符

&& 逻辑与
表达式同时成立,最终结果才为true;全1则1
|| 逻辑或
表达式中只要有一个成立,最终结果即为true; 有1则1
! 逻辑非
对已有表达式的结果取反
注意 : 除零值以外,所有值都为真

7) 三目运算符

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;

<body>
    <!-- console.log() 向控制台输出日志内容  需要F12找到Console(控制台)选项查看 -->
    <!-- onclick表示单击事件 当元素被鼠标单击触发执行里边得js代码 -->
    <button onclick="console.log('hello world');">clike me</button>
    <div onclick="console.log('hello world');">clike me</div>

    <script src="hello.js"></script>
    <script>
        // 当程序运行到scrip标签时  自动执行里面的代码
        console.log('hello world');
        alert('网页弹框警告')
    </script>

span{
           font-size: 32px;
           /* 取值为400   700时对应正常和加粗的字体 */
           /* 如果取其他值可能美对应方案 */
           font-weight: normal;
           font-style: italic;
           /* 正常显示字体   去掉额外的字体样式比如倾斜 */
           /* font-style: normal; */
           font-family:"黑体","Microsoft YaHei",Arial;
           text-decoration: line-through;
           /* text-align: justify;                                 */
       }
       div{
           /* 两端对齐  保证左右两测都是对齐的情况下用空白字符对齐 */
           text-align: justify;
           /* line-height: 30px; */
       }
       #div1{
           height: 50px;
           border: 1px solid red;
           text-align: center;
           /* line-height: 50px; */
           /* color: darkgoldenrod; */
           /* background-color: #555;  */
           font: 32px/60px/'黑体';
       }
   </style>
</head>
<body>
   <span>测试字体属性</span>
   <b>加粗属性</b>
   <i>倾斜字体</i>
   <div id="div1">测试行高</div>
   <div>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ipsam totam itaque corporis! Veniam animi doloremque ex soluta enim commodi mollitia, cupiditate modi reprehenderit magnam quaerat odio. Ut, ab repellat!
   </div>

<body>
    <div>这是页面input的内容</div>
    <button onclick="document.write('<h1>你好啊</h1>')">click me</button>
    <script>
        // 接收用户输入的姓名 保存到变量中
        // 弹框显示变量的内容
        // name = prompt("请输入您的姓名") 
        // alert(name)   
        document.write("<h1>你好啊</h1>")

<body>
    <script>
        // var num=20;
        // console.log(num.toString());  
        // console.log(20)  ;
        // var age=null;
        // 04-demo.html:15 Uncaught TypeError: Cannot read property 'toString' of null
        // at 04-demo.html:15          空对象没有toString方法  报错
        // console.log(age.toString());
        var str='20';
        console.log(Number(str));//  20
        console.log(Number(true));//  1
        console.log(Number('你好'));//     NaN不是数字的数字
         var str2='12.96';
         console.log(parseInt(str2));
         console.log(parseFloat(str2));//12.96 可以解析小数部分内容
    </script>

ambition_star

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础

文章目录一、 JavaScript 概述1. 什么是JavaScript1) JS 介绍2) JS 组成2. 使用方式二、基础语法1. 语法规范2. JS的变量与常量1) 变量2) 常量3. 数据类型1) 基本数据类型（简单数据类型）2) 引用数据类型3) 检测数据类型4. 数据类型转换1) 强制类型转换2) 隐式类型转换（自动转换）5. 运算符1) 赋值运算符2) 算数运算符3) 符合运算符...
复制链接

扫一扫