本文围绕前端开发展开，重点介绍了JavaScript。阐述其起源、应用、定义等基础内容，涵盖书写方式、执行顺序、语法注释等知识。还介绍了基本数据类型、数据类型转换、运算符、流程控制、循环、函数、对象等。此外，提及了AJAX技术和jQuery库，助力前端开发。
前端三大块
- HTML：页面结构
- CSS：
页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 - JavaScrip
页面行为：部分动画效果、页面与用户的交互、页面功能
js动画
起源
javascript 也是一种语言 运行在浏览器端的脚本语言
早期网页是没有交互性的动画, 简单的操作
网页是静态的, 而且html不能实现计算, 就算是简单的1+1 都需要提交给服务器, 然后服务器计算回来 在返回给客户端
然后就开发出一种语言, 可以在浏览器简单的运算, 让标签可以做一些简单的操作, 这就诞生了 javascript
当然中间还有很多版本的演变和迭代,才到我们最终看到的javascript
应用
- 购物车的点击操作 增加数量
- 网页的轮播图
- 楼层导航
- 提交注册
之前注册一个网站的时候, 填写完信息之后点击提交,页面刷新(表单带这个我们的数据去请求服务器,对数据库的数据进行比对, 发现重复, 返回结果展示在浏览器提示已注册)
现在:填写完鼠标焦点只要移开, 就提示了结果, 这期间页面没有刷新, 用户不感知, 这其实就是js 的一项技术 ajax(填完信息之后ajax去请求了服务器, 然后结果再被ajax带回来,之后显示在浏览器上
ajax 只是一项技术, 不是一种语言
定义
JavaScript是一种客户端脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
文件后缀
.js
学习目的
1. 知道js是什么
2. 应用在什么场景
3. 在网页中, 看到请求的时候, 知道这是一个js操作
4. 了解简单的js变量, 学习函数的基本定义方法和使用方法(看懂简单的函数逻辑即可)
5. 不要求看懂网站源码 时间成本太高, 不要求会写js代码(微博)
书写方式
行间事件 / 内联样式
主要适用于某个标签的点击事件
<div type="button" name="" onclick="alert('ok！');">我</div>
<a href="javascript:alert('你瞅啥')">你愁啥</a> 使超链接去执行一个js操作,而不是跳转一个页面
页面标签嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script>
一般写在body标签的下方
外部引入
在head标签中,书写script标签
<script type="text/javascript" src="js/index.js"></script>
执行顺序
从上到下执行
语法与注释
-
一条JavaScript的语句应该以“;”结尾
变量
JavaScript 是一种弱类型语言，变量类型由它的值来决定
定义变量需要用关键字 'var'
var a = 123;
var b = 'asd';
同时定义多个变量可以用","隔开，共用一个‘var’关键字
var c = 45,d='qwe',f='68';
单行注释
//
多行
/*
*/
变量、函数、属性、函数参数命名规范
-
只能是字母数字下划线
-
首字母不能为数字
-
严格区分大小写
-
不能使用关键字
break
case
continue
default
delete
else
finally
for
function
if
in
new
return
switch
this
try
typeof
var
while
with -
分号作为结尾
<script type="text/javascript">
var b = '你好！';
alert(b);
var a = 'i love you';
alert(a)
console.log(a);
document.write(a);
</script>
基本数据类型
数据类型
typeof()函数获取一个变量的类型
boolean - 如果变量是 Boolean 类型的
true
false
number - 如果变量是 Number 类型的
-
包括整数、浮点数(浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）)
-
特殊值 NaN
当一个表达式返回了NaN 时，表示该表达式中返回了无效的结果，并不是返回了一个确切的值
所以 NaN != NaN , 因为它是一个范围，而不能代表一个确定的值
涉及到的任何关于NaN的操作，都会返回NaN, 与字符串相加会返回字符串
<script>
var b = NaN;
var c = 1.3;
var d = 1.3 + b;
var d = NaN + 'woemn';
var Q = NaN + 1.8;
var E = NaN + true;
</script>
string - 如果变量是 String 类型的 （采用""、 ‘’）
转型函数String(), 适用于任何数据类型
var v = 1;
var v = null;
var v = undefined;
var a = String(v);
console.log(a);
console.log(typeof (a));
undefined
使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined
var a;
console.log(a);
console.log(typeof(a));
null
var v = null;
console.log(v);
console.log(typeof (v)); //object 对象类型
引用类型
js引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法
object – 对象类型
new Array()/new Object();/ null
var object1 = new Object();
object1.name = 'jhon';
alert(object1.name);
JS数据类型转换
Boolean(value) - 把给定的值转换成 Boolean 型
var v = 1;
var v = 0;
console.log(Boolean(v));
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
var v = false;
var v = true;
console.log(Number(v));
String(value) - 把给定的值转换成字符串；
js运算符
算 字 赋 比 逻 位 它
算术运算符
+ - * / ++ --
var v = 1;
v = v * 4;
v ++;
console.log(v);
字符串连接
+
var a = 'i';
var b = 'love you'
document.write(a+b)
赋值运算
= += -=
比较运算符
< > >= <= == === != !==
流程控制
流程控制用于基于不同的条件来执行不同的动作
如果语句
可以单分支，双分支，也可以多分支，需要注意如果中间必须要有空格
if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}
var mycarrer = "HTML";
if (mycarrer == "HTML")
{
document.write("你面试成功，欢迎加入公司。");
}
var mycarrer = "HTML"; //mycarrer变量存储技能
if (mycarrer == "HTML")
{ document.write("你面试成功，欢迎加入公司。"); }
else //否则，技能不是HTML
{ document.write("你面试不成功，不能加入公司。");}
var useName = "king",age = 50,sex ="男";
if(useName == "king"){ //多重嵌套的代码段
if(age == 20 ){ //当if语句中判断的结果为true时，执行代码段
if(sex == "男"){ //但是代码断中又是一个if语句继续判断，直到嵌套最后的执行语句
document.write("这才是我想要的男人")
}
} else {document.write('什么玩意,我不要');}
}
x = 3;
if(x == 3){
document.write("x真的等于3")
}else if(x == 4){
document.write("x真的等于4")
}else if(x == 5 ){
document.write("x真的等于5")
}else{
document.write("以上都不等于")
}
切换语句
多分支语句：switch（）{。case：…}
switch语句用于基于不同的条件来执行不同的动作
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
var i = 0;
switch (i){ //i表示要判断的值
case 0:
document.write("星期天");
break;
case 1: //case里面都是所对应的值，每一个代码段后都要加上一个break让他跳出判断
document.write("星期一");
break
case 2:
document.write("星期二");
break
case 3:
document.write("星期三");
break;
case 4:
document.write("星期四");
break;
default: //default的意思是以上case里的值都不是的话，执行default语句里的代码段
document.write("什么都不是");
}
var c =4;
switch (c){ //c表示要判断的值
case 0:
case 1:
case 2:
document.write("星期二") ; //这个方法可以把所匹配的值所要执行的代码段放在一块
break;
case 3:
case 4:
document.write("星期四");
break; //当前输出结果为星期四
default:
document.write("什么都不是");
break;
}
都有分号
JS循环
程序中进行有规律的重复性操作，需要用到循环语句。
循环
var i=0;
while(i<8){
......
i++;
}
var i=0;
while (i<5)
{
document.write(i);
i++;
}
for-in语句
for-in语句是严格的迭代语句，用于枚举对象的属性。
var a = [10,20,30,40,50];
//迭代的是数组的下标。
for(i in a){
document.write(a[i]);
}
//输出： 1020304050
js函数
使用function语句定义函数
function abc(){
alert('abc');
}
function myFunction() {
console.log("你好");
}
在表达式中定义函数
var 函数名 = function(参数1，参数2，…){函数体};
var add = function\(a,b\){
return a+b;
}
//调用函数
document.write\(add\(50,20\)\);
function myFunction() {
console.log("你好");
// return 'haha';
}
document.write(myFunction());
function myfinction() {
var num=7,time="点",action="起床";
console.log(num + time + action);
// return num+time+action;
};
document.write(myfinction())
-
关于变量和参数问题：
-
函数外面定义的变量是全局变量，函数内可以直接使用。
-
在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
-
js 函数可以定义参数默认值
-
js对象
-
使用原始的方式创建内置对象
var myObject = new Object();myObject.name = ‘name’;
myObject.age = 20;
myObject.say = function say(){alert('say'); return 'say';};
document.write(myObject.name);
document.write(’
’);
document.write(myObject.age);
document.write(’
’);
// document.write(myObject.say()); -
使用自定义构造函数创建对象
fnction pen(name,color,price){ //对象的name属性 this.name = name; //对象的color属性 this.color = color; //对象的piece属性 this.price = price; //对象的say方法 this.say = function(){ alert(this.color); alert(this.name); alert(this.price); }; } var pen = new pen('铅笔','红色',20); pen.say(); document.write(pen.name); document.write(pen.color);
this关键字 this单词本身就是 这个 的意思 在对象的方法中使用,代表着当前这个对象 意味着当对象调用这个方法时,方法中的this就代表着这个对象
ajax
- AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。
- AJAX 指异步请求
- AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
- AJAX 不是一种新的编程语言，是一项技术
- 通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
- AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）
注意
-
ajax是页面无刷新请求服务器，所以我们在浏览器中是感觉不到，需要通过调试工具F12查看请求
-
返回的数据类型是 ‘json’
-
本身是一个字符串类型
-
以键值对存在
-
JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）等等
{
“age”:16,
“msg”:[“a”,“b”],
“regex”: “^http://.*”
}
-
-
在python中json格式数据,使用json模块转换
json -> dict
import json
json_text = '{"age":16,"msg":["a","b"],"regex": "^http://.*"}'
res = json.loads(json_text)
name = res['name']
print(name)
dict -> json
dict_test = {"age":16,"msg":["a","b"],"regex": "^http://.*"}
print(type(dict_test))
res = json.dumps(dict_test)
print(res)
print(type(res))
jQuery
-
jQuery是一个是免费、开源的javascript库, 也是目前使用最广泛的javascript函数库。
-
jQuery极大的方便你完成web前段的相关操作,例如节点操作,元素操作,事件绑定,ajax操作
-
jQuery照比原生js减少了很多代码量
<script> // js window.onload = function(ev){ // 1.通过原生js的入口函数可以获取DOM元素 var img = document.getElementsByTagName("img"); console.log(img); // 2.通过原生js的入口函数可以获取DOM元素的宽高 var width = img.width; console.log("js:"+width); };// jQuery $(document).ready(function(){ /* *1.通过jquery的入口函数可以获取DOM元素 *$('img')[0]这句把选择器的结果变成了dom对象 */ var $img = $("img"); console.log($img); // 2.通过jquery的入口函数不可以获取DOM元素的宽高 var _$img = $("img"); var $width = _$img.width(); console.log("jquery:"+$width); }); </script>
$('.jian').click(function(){
var b = $('#yi').text();
if(b>1){
b --;
$('#yi').text(b);
}else{
b=1;
}
})
$('.jia').click(function(){
var b = $('#er').text();
if(b<10){
b ++;
$('#er').text(b);
}else{
b=1;
}
})
扫一扫
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
