2021-07-21

最新推荐文章于 2021-07-29 21:37:06 发布

大山爱打球

最新推荐文章于 2021-07-29 21:37:06 发布

阅读量109

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zzs11055213/article/details/118958067

版权

学习目标：

例如：一周掌握 Java 入门知识

学习内容：

1、CSS

2、JS

学习时间：

早上8:30-11:30

下午2:30-6:00

学习产出：

CSS三种样式表

内部样式表（行内式）

内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>
    div{
    color:red;
    font-size:12px;
   }
</style>

*<style>标签理论上可以放到HTML文档的任何地方，但一般会放在文档的<head>标签中。

*通过此种方式，可以方便控制当前整个页面中的元素样式设置。

*代码结构清晰，但是并没有实现结构与样式完全分离。

*使用内部样式表设定CSS，通常也被称为嵌入式引用。

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

<div style="color:red; font-size:12px;">青春不常在，抓紧谈恋爱</div>

*style其实就是标签的属性。

*在双引号之间，写法要符合CSS规范。

*可以控制当前的标签设置样式。

*对当前元素添加简单样式的时候，可以考虑使用。

*使用行内样式表设定CSS，通常也被称为行内式引入。

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

1、新建一个后缀名为.css的样式文件，把所以CSS代码都放到此文件中。

2、在html页面中，使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href	定义外部样式表文件的URL，可以是相对路径，也可以是绝对路径

*使用外部样式表设定CSS，通常也被称为1外链式或链接式引入，这种方式是开发中常用的方式。

CSS样式表总结：

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构与样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，吐血推荐	控制多个页面

JS

初识JS

浏览器执行JS简介：

1、渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit。

2、JS引擎：也称为JS解释器，用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8.

*浏览器本身并不会执行JS代码，而是通过内置JS引擎来执行JS代码，JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS语言归为脚本语言，会逐行解释执行。

JS组成：

ECMAScript，DOM，BOM

1、ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2、BOM：是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器窗口，获取分辨率等。

JS初体验

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

<script>
        alert('沙漠骆驼');
  </script>

alert('如果我是DJ你还爱我吗')
<script src="my.js"></script>

行内式JS

<input type="button" value="点我试试" onclick="alert('hello world')" />

注意：

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性）,如：onlick；

在HTML中我们推荐使用双引号，在JS中我们推荐使用单引号。

内嵌JS

<script>
    alert('Hello world');
</script>

注意：

可以将多行JS代码写到<script>标签中。

内嵌JS是学习时常用的方式。

外部JS文件

<script src="my.js"></script>

注意：

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用。

引用外部JS文件的script标签中间不可以写代码。

适合于JS代码量比较大的情况。

JS代码注释

//单行注释快捷键：ctrl+/

/* */多行注释快捷键：shift+alt+a

JS输入输出语句

方法	说明	归属
alter(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

输入语句：

 <Script>
        prompt('请输入你的年龄:');
    </Script>

弹出警示框：

 <Script>
        prompt('请输入你的年龄:');
        alert('计算的结果是:');
    </Script>

控制台输出：

<Script>
        prompt('请输入你的年龄:');
        alert('计算的结果是:');
        console.log('我是程序猿能看到的');
 </Script>

变量

1、什么是变量

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。

2、变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间。

3、变量的使用

变量在使用时分为两步：1、声明变量2、赋值

1、声明变量

//声明变量
var age;  //声明一个名称为age的变量

*var是一个JS关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。

*age是程序猿定义的变量名，我们要通过变量名来访问内存中分配的空间。

2、赋值

age=10;  //给age这个变量赋值为10

*=用来把右边的值赋给左边的变量空间中，此处代表复制的意思。

*变量值是程序猿保存到变量空间里的值。

3、变量的初始化

var age=18  //声明变量的同时进行赋值

变量案例

<Script>
        var myname = '旗木卡卡西';
        var address = '火影村';
        var age = 20;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </Script>

<script>
        var myname = prompt('请输入你的名字');
        alert(myname)
    </script>

变量的语法扩展

1、更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将会以最后一次赋的值为准。

2、同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

var myname='zz',
    age=10,
    sex='nan';

3、声明变量的特殊情况

情况	说明	结果
var age; console.log(age);	只声明，不赋值	undefined
console.log(age);	不声明，不赋值，直接使用	报错
age=10;console.log(age);	不声明，只赋值	10

变量的命名规范

①由字母数字下划线，美元符号组成。

②严格区分大小写

③不能以数字开头

④不能是关键字，保留字例如：var、for、while

⑤变量名必须有意义

⑥遵守驼峰命名法，首字母小写，后面单词的首字母需要大写

⑦推荐翻译网站：有道爱词霸

例子：

 <script>
        var apple1 = '红苹果',
            apple2 = '青苹果';
        var temp;
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>

数据类型

数据类型简介

JS的变量数据类型是只有在程序在运行过程中根据等号右边的值来确定的。

JS拥有动态类型，同时也意味着相同的变量可用作不同的类型。

var age=10;  //这是一个数字型
var areYouOK='是的';  // 这是一个字符串型的

简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含整形值和浮点型值，如21 ，0.21	0
Boolean	布尔型，如true ，false 等价于1和0	false
String	字符串类型，在js里面，字符串都带引号	“”
Underfined	var a；声明了变量a，但是没有给值，此时a=undefined	undefined
Null	var a=null；声明了变量a为空值	null

在JS中，前面加0表示八进制，加0x表示十六进制。

isNaN()

用来判断一个变量是否为数字的类型，如果是数字返回false，如果不是数字返回true。

console.log(isNaN(22));   //返回false
console.log(isNaN('heieheiehei'));   //返回true

字符串型String

字符串型可以是引号中的任意文本，其语法为双引号和单引号。

字符串引号嵌套

JS可以用单引号嵌套双引号，或者双引号嵌套单引号（外双内单，外单内双）

var strMsg='我是"高富帅"程序猿';
var strMsg1="我是'高富帅'程序猿";

字符串转义字符都是用\开头，但是这些转义字符写在引号里面。

字符串长度

通过字符串的length属性可以获取整个字符串的长度。

var strMsg='我是帅气多金的程序猿';
alter(strMsg.length);   //显示11

字符串拼接

多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个心的字符串。

console.log('沙漠'+'骆驼');  //沙漠骆驼

+号总结口诀：数值相加，字符相连。

undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined

var variable;
console.log(variable) ;      //undefined
console.log('你好'+variable);   //你好undefined
console.log(11 + variable);   //NaN
console.log(true + variable);  //NaN

一个声明变量给null值，里面存的值为空

var vari=null;
console.log('你好' + vari);       //你好null
console.log(11 + vari);           //11
console.log(true + vari);         //1

获取变量数据类型

typeof可用来获取检测变量的数据类型。

var num=10;
console.log(typeof num);    //输出number型

数据类型转换

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1; alert(num.toString());
String强制转换	转成字符串	var num =1;alert(String);
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+"我是字符串");

转换为数字型

方式	说明	案例
parselnt(string)函数	将string类型转换为整数值型	parseInt('78')
parseFloat(string)函数	将string类型转换为浮点值型	parseFloat('78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换( )	利用算术运算隐式转换为数值型	'12' -0

<script>
        var age = prompt('请输入你的年龄');
        console.log(parseInt('21'));
        console.log(parseFloat('21.3'));
        console.log(parseInt('21px'));
        console.log(Number(12));
        console.log('12' - 0);
    </script>

转化为布尔型

方式	说明	案例
Boolean()函数	其他类型转换为布尔型	Boolean('true');

代表空，否定的值会被转换为false，''、0、NaN、null、undefined

其余值都会被转换为true。

大山爱打球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-21

学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：1、CSS2、JS学习时间：早上8:30-11:30下午2:30-6:00学习产出：CSS三种样式表内部样式表（行内式）内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。<style> div{ color:red; font-size:12px; }</
复制链接

扫一扫