编程技术

Document

html js内容

1.JS概念

JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言 js文档：https://zh.javascript.info/#tab-1

2.特点

  • 是基于对象的弱类型语言

    • 弱类型语言：是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变量自动进行转换，不需要经过显性强制转换。弱类型语言包括vb，php，javascript等。

    • 强类型语言：是一种强制类型定义的语言，一旦某一个变量被定义类型，如果不经过强制转换，则它永远就是该数据类型了，强类型语言包括java，net，c++等

  • 跨平台

    • Linux，windows，mac只要有浏览器，就能够运行

  • 事件驱动

    • 鼠标点击，鼠标悬浮，鼠标移动，键盘按下，键盘弹起，获取焦点，失去焦点，加载等常用的事件

4.JS的用途

  • 表单客户端验证；

  • 动态HTML(DHTML)：不需要人为介入，就能自动实现动画效果。

  • 用户交互的动画效果：需要鼠标和键盘介入的动画效果

  • 动态添加一些网页内容

  • 动态的获取和改变html元素的属性或css属性，从而动态的创建网页内容或改变内容的显示

 

8.引入方式

8.1 如何在HTML中引入Javascript

  • 引入js文件

  • 写在script标签内部（可以使用多个，每一个之间都是有联系的）

  • 注意事项：

    • js代码必须放在结束的后面【原因：js会阻塞dom的解析；当js加载没有完成，页面是不会继续往下执行的】

    • 在head中添加js代码，必须使用window.onload

    • 不能在s

      8.2 如何在HTML中使用Javascript

    • 使用事件传入javascript代码

        <div onclick="alert('hello world')"></div>

    • 使用超链接传入javascript代码

    • <a href="javascript:alert('hello world');"></a>

      9.输出语句

    • alert（"这是我的输出页面"）； 弹窗输出

    • document.write（“这是我输出的内容”）； 在页面输出，可以输出标签

    • console.log（） 在控制台中打印，打印任意字符或者js的变量信息； 可以接受任何字符串、变量、数字、对象；

    • 10.JS语句与注释

    • javaScript中的语句以一个分号结尾，如果省略分号，则由解析器确定语句的结尾，一般情况下，换行会被当做一个语句的结尾

alert('hello world') ;
document.write('hello world');

 

11.标识符

注意：

JavaScript的数据类型

分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；

js常用的基本数据类型包括

undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)

js的引用数据类型也就是

对象类型Object- - (对象)，比如：array - - （数组）、function - - （函数）、data - - （时间）等；

JS为弱类型语言，不必声明数据类型，而是在使用或赋值的时候确定其类型 基本数据类型存放在栈中 引用数据类型存放在堆中【讲完类型后面详细说堆和栈】

强类型语言/弱类型语言

强类型语言【java】：

弱类型语言【js/python/php】：

对象类型

判断数据类型

可以通过typeof运算符来判断数据类型

  • 标识符的组成：标识符可以由字母、数字、下划线（_）和美元符号（$）组成。这意味着标识符可以包含英文字母、数字、下划线和美元符号。

  • 不能以数字开头：标识符的第一个字符必须是字母、下划线或美元符号，不能以数字开头。

  • 大小写敏感：JavaScript是大小写敏感的，因此“MyVariable”和“myvariable”被视为两个不同的标识符。

  • 保留字和关键字：标识符不能使用JavaScript的保留字（关键字），如if、for、while，true、false和null等。这些词被JavaScript语言内部使用，具有特定的用途，用户不能自定义同名的标识符。

  • 描述性和驼峰命名法：标识符应具有描述性，能够清晰地表达其含义和用途（有意义）。命名通常采用驼峰命名法，即第一个单词小写，后续单词首字母大写，例如myVariable、calculateSum等。

  • 常量命名：常量通常使用全大写字母，并用下划线分隔单词，例如MAX_VALUE、PI。

  • 变量的声明和赋值

  • 什么是变量？

    解释：可以变化的量

  • 变量是用于存储信息的容器【内存空间】 变量是一段命名的存储空间 变量是在程序运行过程中值允许改变变量的值 变量是由变量名，变量值，和变量类型组成

  • 变量命名规则

  • 第一个字符必须为字母，_或$，其后的字符还可以是数字 严格区分大小写，要有一定的含义 建议使用小驼峰规则来命名变量。redApple 不能使用关键词，保留字作为变量名

  • 变量的命名和赋值

  • var 变量名

  • 变量名=值

  • var 变量名=值

  • 变量名=值

  • var 变量1=值1，变量2=值2，变量3=值3

  • 变量名是浏览器关闭后才释放在，在没关闭之前随时使用

  • 重新声明的变量，不会丢失原始值，除非重新赋值

  • 换行是语句的结束，最好结束时都加上 “ ； ”

  • 变量名是区分大小写的

  • 要求变量的使用要严格符合定义，所有变量都必须先定义后使用。

  • 一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了

  • 它与强类型定义语言相反, 一个变量可以赋不同数据类型的值

  • 本地对象：string，Array，Date，Math，Golbal，独立于宿主环境的ECMAScript实现提供的对象

  • 宿主对象：DOM，BOM。ECMAScript中的‘宿主’就是我们网页的运行环境，即‘操作系统’和‘浏览器’

  • String类型【重要】

js中用来表述文本的数据类型

  • 字符串用单引号或双引号包括起来

  • 单双引号均不能解析变量

  • 变量与字符串，变量与变量之间可以使用运算符‘+’来链接

  • 单引号和双引号可以互相嵌套，如果单引号中要嵌套单引号，需要使用转义字符

 

注意：

  1. \n换行（在alert中生效）

  2. 8进制表示法【进行两次转换，这里面的数字是ASCII中表示的八进制数字】

  3. 16进制表示法

  4. 16进制unicode表示法 

console.log('\062') //八进制50 对应的值：2

  1. Number

按照进制划分：二进制、八进制、十进制、十六进制 按照其他划分：整形、浮点型、NaN（not a number） js中所有的数字是以IEEE-75标准格式表示的，浮点数的精确问题不是js特有的；因为有点小树以二进制表示位数是无穷的

整形： 0，6，-100，0xff00（十六进制），0377/0o77（八进制），0b1010（二进制），不管输入的是几进制，最终显示时都会转为10进制

浮点型： 1.2，0.123，3.14e11=>3,14*10^11 科学计数法

 

0.375+0.248.toFixed(2)=>保留两位小数（四舍五入）
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true

NaN（not a number）： NaN是一个特殊的number值，not a number表示非数字，当程序由于某种原因计算错误时，将产生一个无意义的数字NaN NaN与任何值都不想等，包括NaN本身 任何涉及NaN的操作，结果都为NaN

var a='hello';
b=10;
alert(a-b)  // NaN

  1. Boolean

  1. 值只有true和false。分别代表逻辑真与假

  2. 布尔值通常用来表示比较所得的结果

  3. true和false是严格区分大小写的

var n=10;
if(n>8){
    alert('我是true');
}else{
    alert('我是false');
}

 

  1. undefined【了解】

  1. 定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量

  2. 使用了一个不存在的对象的属性时

  3. null【了解】

  4. null表示一个空值

  5. null不等于空字符串""、''或0

  6. null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值

  7. Array(数组)【重要】

  8. 创建数组

    方法一：

    var 数组名=new Array();

    方法二：

    var cars=new Array("Audi","BMW","BYD");

    方法三：

    var cars=["Audi","BMW","BYD"];

    获取数组中的值

var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇'];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

 多维数组

var arr = [
  ['北京','上海','深圳'],
  ['合肥','石家庄','昆明'],
  ['','','']
];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;